@tldiagram/core-ui 1.87.0

package/src/components/HeaderContext.tsx

@@ -0,0 +1,30 @@
+/* eslint-disable react-refresh/only-export-components */
+import React, { createContext, useContext, useState } from 'react'
+
+type HeaderPayload = { node: React.ReactNode | null; hideMobileBar?: boolean } | React.ReactNode | null
+type HeaderSetter = (payload: HeaderPayload) => void
+
+const HeaderContext = createContext<{ header: HeaderPayload; setHeader: HeaderSetter } | undefined>(undefined)
+
+export function HeaderProvider({ children }: { children: React.ReactNode }) {
+  const [header, setHeader] = useState<HeaderPayload>(null)
+  return (
+    <HeaderContext.Provider value={{ header, setHeader }}>
+      {children}
+    </HeaderContext.Provider>
+  )
+}
+
+export function useSetHeader() {
+  const ctx = useContext(HeaderContext)
+  if (!ctx) throw new Error('useSetHeader must be used within HeaderProvider')
+  return ctx.setHeader
+}
+
+export function useHeader() {
+  const ctx = useContext(HeaderContext)
+  if (!ctx) throw new Error('useHeader must be used within HeaderProvider')
+  return ctx.header
+}
+
+export default HeaderContext

package/src/components/Icons.tsx

@@ -0,0 +1,245 @@
+import React from 'react'
+
+
+export function ZoomOutIcon({ size = 14, strokeWidth = 3 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+      <line x1="8" y1="11" x2="14" y2="11" />
+    </svg>
+  )
+}
+
+export function ZoomInIcon({ size = 14, strokeWidth = 3 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+      <line x1="11" y1="8" x2="11" y2="14" />
+      <line x1="8" y1="11" x2="14" y2="11" />
+    </svg>
+  )
+}
+
+export function AddElementIcon({ size = 12, strokeWidth = 3 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <line x1="12" y1="5" x2="12" y2="19" />
+      <line x1="5" y1="12" x2="19" y2="12" />
+    </svg>
+  )
+}
+
+export function FitViewIcon({ size = 14, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <path d="M7 12h10" />
+      <path d="M12 7v10" />
+    </svg>
+  )
+}
+
+export function ShareIcon({ size = 14, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" />
+      <polyline points="16 6 12 2 8 6" />
+      <line x1="12" y1="2" x2="12" y2="15" />
+    </svg>
+  )
+}
+
+export function TrashIcon({ size = 13, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="3 6 5 6 21 6" />
+      <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+      <path d="M10 11v6M14 11v6" />
+      <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+    </svg>
+  )
+}
+
+export function EditIcon({ size = 13, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" />
+    </svg>
+  )
+}
+
+export function GitIcon({ size = 14, strokeWidth = 2 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="18" r="3" />
+      <circle cx="6" cy="6" r="3" />
+      <circle cx="18" cy="6" r="3" />
+      <path d="M18 9v2c0 1.1-.9 2-2 2H8a2 2 0 0 1-2-2V9" />
+      <path d="M12 13V15" />
+    </svg>
+  )
+}
+
+export function MoveSourceIcon({ size = 13, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="5" cy="12" r="2" />
+      <line x1="7" y1="12" x2="17" y2="12" />
+      <polyline points="14 9 17 12 14 15" />
+    </svg>
+  )
+}
+
+export function MoveTargetIcon({ size = 13, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <line x1="7" y1="12" x2="17" y2="12" />
+      <polyline points="14 9 17 12 14 15" />
+      <circle cx="19" cy="12" r="2" />
+    </svg>
+  )
+}
+
+export function NavigationIcon({ size = 14, strokeWidth = 1.8 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <rect x="8" y="2" width="8" height="5" rx="1.5" fill="none" />
+      <line x1="12" y1="7" x2="12" y2="11.5" />
+      <line x1="4.5" y1="11.5" x2="19.5" y2="11.5" />
+      <line x1="4.5" y1="11.5" x2="4.5" y2="14" />
+      <rect x="1.5" y="14" width="6" height="4.5" rx="1.5" fill="none" />
+      <line x1="19.5" y1="11.5" x2="19.5" y2="14" />
+      <rect x="16.5" y="14" width="6" height="4.5" rx="1.5" fill="none" />
+    </svg>
+  )
+}
+
+export function LibraryIcon({ size = 14 }: { size?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
+      <rect x="1" y="1" width="5" height="5" rx="1" fill="currentColor" opacity="0.85" />
+      <rect x="8" y="1" width="5" height="5" rx="1" fill="currentColor" opacity="0.85" />
+      <rect x="1" y="8" width="5" height="5" rx="1" fill="currentColor" opacity="0.85" />
+      <rect x="8" y="8" width="5" height="5" rx="1" fill="currentColor" opacity="0.85" />
+    </svg>
+  )
+}
+
+export function ExpandExtrasIcon({ size = 14, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="8 6 14 12 8 18" />
+      <polyline points="13 6 19 12 13 18" />
+    </svg>
+  )
+}
+
+export function CollapseExtrasIcon({ size = 14, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="16 6 10 12 16 18" />
+      <polyline points="11 6 5 12 11 18" />
+    </svg>
+  )
+}
+
+export function EyeIcon({ size = 14, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  )
+}
+
+export function EyeOffIcon({ size = 14, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" />
+      <line x1="1" y1="1" x2="23" y2="23" />
+    </svg>
+  )
+}
+
+export function ImportIcon({ size = 12, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="7 10 12 15 17 10" />
+      <line x1="12" y1="15" x2="12" y2="3" />
+    </svg>
+  )
+}
+
+export function LayerIcon({ size = 14, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <polygon points="12 2 2 7 12 12 22 7 12 2" />
+      <polyline points="2 17 12 22 22 17" />
+      <polyline points="2 12 12 17 22 12" />
+    </svg>
+  )
+}
+
+export function ChevronLeftIcon({ size = 14, strokeWidth = 3 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M15 18l-6-6 6-6" />
+    </svg>
+  )
+}
+
+export function ChevronRightIcon({ size = 14, strokeWidth = 3 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M9 6l6 6-6 6" />
+    </svg>
+  )
+}
+
+export function ChevronDownIcon({ size = 14, strokeWidth = 3 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M6 9l6 6 6-6" />
+    </svg>
+  )
+}
+
+export function TagsIcon({ size = 14, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <path d="M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z" />
+      <line x1="7" y1="7" x2="7.01" y2="7" />
+    </svg>
+  )
+}
+
+export function GridIcon({ size = 12, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
+      strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <rect x="3" y="3" width="18" height="18" rx="2" />
+      <line x1="3" y1="9" x2="21" y2="9" />
+      <line x1="3" y1="15" x2="21" y2="15" />
+      <line x1="9" y1="3" x2="9" y2="21" />
+      <line x1="15" y1="3" x2="15" y2="21" />
+    </svg>
+  )
+}
+export function FocusIcon({ size = 14, strokeWidth = 2.5 }: { size?: number, strokeWidth?: number }) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round">
+      <circle cx="12" cy="12" r="10" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  )
+}

package/src/components/ImportModal.tsx

@@ -0,0 +1,219 @@
+import { memo, useEffect, useState } from 'react'
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Textarea,
+  Text,
+  VStack,
+  Box,
+  Divider,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanels,
+  TabPanel,
+} from '@chakra-ui/react'
+import { parseMermaid, ParsedImport } from '../pkg/importer/mermaid'
+import { api } from '../api/client'
+import type { PlanConnector, PlanElement } from '@buf/tldiagramcom_diagram.bufbuild_es/diag/v1/workspace_service_pb'
+
+interface Props {
+  isOpen: boolean
+  onClose: () => void
+  isImporting?: boolean
+  onImport: (parsed: ParsedImport) => Promise<void> | void
+}
+
+type Format = 'mermaid' | 'structurizr'
+
+const MERMAID_PLACEHOLDER = `flowchart LR
+  A[Start] --> B[End]`
+
+const STRUCTURIZR_PLACEHOLDER = `workspace {
+  model {
+    user = person "User"
+    app = softwareSystem "App"
+    user -> app "Uses"
+  }
+}`
+
+function ImportModal({ isOpen, onClose, isImporting, onImport }: Props) {
+  const [code, setCode] = useState('')
+  const [format, setFormat] = useState<Format>('mermaid')
+  const [step, setStep] = useState<'input' | 'summary'>('input')
+  const [parsed, setParsed] = useState<ParsedImport | null>(null)
+  const [parseError, setParseError] = useState<string | null>(null)
+  const [isParsing, setIsParsing] = useState(false)
+
+  useEffect(() => {
+    if (!isOpen) return
+    setCode('')
+    setStep('input')
+    setParsed(null)
+    setParseError(null)
+  }, [isOpen])
+
+  const handleTabChange = (index: number) => {
+    setFormat(index === 0 ? 'mermaid' : 'structurizr')
+    setCode('')
+    setParseError(null)
+  }
+
+  const handleNext = async () => {
+    if (!code.trim()) return
+    setParseError(null)
+
+    if (format === 'mermaid') {
+      const result = parseMermaid(code)
+      setParsed(result)
+      setStep('summary')
+      return
+    }
+
+    // Structurizr: parse server-side
+    setIsParsing(true)
+    try {
+      const res = await api.import.parseStructurizr(code)
+      const result: ParsedImport = {
+        elements: res.elements as PlanElement[],
+        connectors: res.connectors as PlanConnector[],
+        warnings: res.warnings,
+      }
+      setParsed(result)
+      setStep('summary')
+    } catch (e: unknown) {
+      setParseError(e instanceof Error ? e.message : 'Failed to parse Structurizr DSL')
+    } finally {
+      setIsParsing(false)
+    }
+  }
+
+  const handleSubmit = async () => {
+    if (!parsed) return
+    await onImport(parsed)
+  }
+
+  return (
+    <Modal isOpen={isOpen} onClose={onClose} size="xl" isCentered>
+      <ModalOverlay bg="blackAlpha.700" backdropFilter="blur(4px)" />
+      <ModalContent mx={4}>
+        <ModalHeader>{step === 'input' ? 'Import Diagram' : 'Confirm Import'}</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <VStack spacing={4} align="stretch">
+            {step === 'input' ? (
+              <Tabs onChange={handleTabChange} size="sm" variant="enclosed">
+                <TabList>
+                  <Tab>Mermaid</Tab>
+                  <Tab>Structurizr DSL</Tab>
+                </TabList>
+                <TabPanels>
+                  <TabPanel px={0} pb={0}>
+                    <FormControl>
+                      <FormLabel fontSize="sm">Mermaid code</FormLabel>
+                      <Textarea
+                        value={code}
+                        onChange={(e) => setCode(e.target.value)}
+                        placeholder={MERMAID_PLACEHOLDER}
+                        size="sm"
+                        rows={12}
+                        fontFamily="mono"
+                      />
+                      <Text mt={1.5} fontSize="xs" color="gray.400">
+                        Supported: flowchart / graph, C4Context.
+                      </Text>
+                    </FormControl>
+                  </TabPanel>
+                  <TabPanel px={0} pb={0}>
+                    <FormControl>
+                      <FormLabel fontSize="sm">Structurizr DSL</FormLabel>
+                      <Textarea
+                        value={code}
+                        onChange={(e) => setCode(e.target.value)}
+                        placeholder={STRUCTURIZR_PLACEHOLDER}
+                        size="sm"
+                        rows={12}
+                        fontFamily="mono"
+                      />
+                      <Text mt={1.5} fontSize="xs" color="gray.400">
+                        Paste a Structurizr workspace DSL. Imports people, software systems, containers, and their relationships.
+                      </Text>
+                    </FormControl>
+                  </TabPanel>
+                </TabPanels>
+              </Tabs>
+            ) : (
+              <Box fontSize="sm">
+                <Text fontWeight="bold" mb={2}>Summary:</Text>
+                <VStack align="start" spacing={1} pl={4} mb={4}>
+                  <Text>• Elements: {parsed?.elements.length}</Text>
+                  <Text>• Connectors: {parsed?.connectors.length}</Text>
+                </VStack>
+                {parsed?.warnings && parsed.warnings.length > 0 && (
+                  <Box p={3} bg="orange.50" color="orange.800" borderRadius="md" mb={4}>
+                    <Text fontWeight="bold" fontSize="xs">Warnings:</Text>
+                    {parsed.warnings.map((w, i) => (
+                      <Text key={i} fontSize="xs">• {w}</Text>
+                    ))}
+                  </Box>
+                )}
+                <Divider mb={4} />
+                <Text color="gray.500">
+                  This will create the resources listed above in your current workspace.
+                </Text>
+              </Box>
+            )}
+            {parseError && (
+              <Box p={3} bg="red.50" color="red.800" borderRadius="md">
+                <Text fontSize="xs">{parseError}</Text>
+              </Box>
+            )}
+          </VStack>
+        </ModalBody>
+
+        <ModalFooter gap={2}>
+          {step === 'input' ? (
+            <>
+              <Button variant="ghost" size="sm" onClick={onClose}>
+                Cancel
+              </Button>
+              <Button
+                size="sm"
+                colorScheme="blue"
+                onClick={handleNext}
+                isDisabled={!code.trim()}
+                isLoading={isParsing}
+              >
+                Next
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button variant="ghost" size="sm" onClick={() => setStep('input')} isDisabled={isImporting}>
+                Back
+              </Button>
+              <Button
+                size="sm"
+                colorScheme="green"
+                onClick={handleSubmit}
+                isLoading={isImporting}
+              >
+                Confirm & Import
+              </Button>
+            </>
+          )}
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default memo(ImportModal)