@tldiagram/core-ui 1.87.0

package/src/pkg/importer/mermaid.test.ts

@@ -0,0 +1,141 @@
+import { describe, it, expect } from 'vitest'
+import { parseMermaid } from './mermaid'
+
+describe('Mermaid Importer Compliance', () => {
+  it('should parse a simple left-right graph (Example 1)', () => {
+    const code = `
+graph LR;
+A-->B;
+A-->C;
+B-->D;
+C-->D;
+`
+    const result = parseMermaid(code)
+    expect(result.elements.length).toBeGreaterThanOrEqual(4)
+    expect(result.connectors.length).toBe(4)
+    expect(result.warnings).toHaveLength(0)
+    
+    const ids = result.elements.map(o => o.ref)
+    expect(ids).toContain('A')
+    expect(ids).toContain('B')
+    expect(ids).toContain('C')
+    expect(ids).toContain('D')
+  })
+
+  it('should parse a flowchart with labels (Example 2)', () => {
+    const code = `
+flowchart LR
+    a[Chapter 1] --> b[Chapter 2] --> c[Chapter 3]
+    c-->d[Using Ledger]
+    c-->e[Using Trezor]
+    d-->f[Chapter 4]
+    e-->f
+`
+    const result = parseMermaid(code)
+    expect(result.elements.length).toBe(6)
+    expect(result.connectors.length).toBe(6)
+    
+    const chapter1 = result.elements.find(o => o.ref === 'a')
+    expect(chapter1?.name).toBe('Chapter 1')
+  })
+
+  it('should parse a graph with dependency sets (Example 4)', () => {
+    const code = `
+graph TB
+    A & B--> C & D
+`
+    const result = parseMermaid(code)
+    // A->C, A->D, B->C, B->D = 4 edges
+    expect(result.connectors.length).toBe(4)
+  })
+
+  it('should parse a flowchart with shapes and link variants (Example 6)', () => {
+    const code = `
+graph LR
+    A[Square Rect] -- Link text --> B((Circle))
+    A --> C(Round Rect)
+    B --> D{Rhombus}
+    C --> D
+`
+    const result = parseMermaid(code)
+    expect(result.elements.length).toBe(4)
+    expect(result.connectors.length).toBe(4)
+    
+    const edgeWithText = result.connectors.find(e => e.sourceElementRef === 'A' && e.targetElementRef === 'B')
+    expect(edgeWithText?.label).toBe('Link text')
+  })
+
+  it('should parse a top-down graph (Example 3)', () => {
+    const code = `
+graph TD;
+A-->B;
+A-->C;
+B-->D;
+C-->D;
+`
+    const result = parseMermaid(code)
+    expect(result.connectors.length).toBe(4)
+  })
+
+  it('should parse a binary tree (Example 5)', () => {
+    const code = `
+graph TB
+    A((1))-->B((2))
+    A-->C((3))
+    B-->D((4))
+    B-->E((5))
+    C-->F((6))
+    C-->G((7))
+    D-->H((8))
+    D-->I((9))
+    E-->J((10))
+`
+    const result = parseMermaid(code)
+    expect(result.elements.length).toBe(10)
+    expect(result.connectors.length).toBe(9)
+  })
+
+  it('should parse a flowchart with subgraphs (Example 11)', () => {
+    const code = `
+graph TB
+    c1-->a2
+    subgraph one
+    a1-->a2
+    end
+    subgraph two
+    b1-->b2
+    end
+    subgraph three
+    c1-->c2
+    end
+`
+    const result = parseMermaid(code)
+    expect(result.elements.length).toBeGreaterThanOrEqual(6)
+    expect(result.connectors.length).toBe(4)
+  })
+
+  it('should parse a decision tree (Example 14 simplified)', () => {
+    const code = `
+graph TB
+A[Do you think online service learning is right for you?]
+B[Do you have time to design a service learning component?]
+C[What is the civic or public purpose of your discipline?]
+D[Do you have departmental or school support?]
+E[Are you willing to be a trailblazer?]
+F[What type of service learning to you want to plan?]
+
+A==Yes==>B
+A--No-->C
+B==Yes==>D
+B--No-->E
+D==Yes==>F
+D--No-->E
+E==Yes==>F
+E--No-->C
+`
+    const result = parseMermaid(code)
+    const ids = result.elements.map(o => o.ref)
+    expect(result.elements.length, `IDs found: ${ids.join(', ')}`).toBe(6)
+    expect(result.connectors.length).toBe(8)
+  })
+})

package/src/pkg/importer/mermaid.ts

@@ -0,0 +1,76 @@
+import { C4, Flowchart, isC4Diagram, isFlowchartDiagram, parseC4, parseFlowchart } from 'mermaid-ast'
+import type { PlanConnector, PlanElement } from '@buf/tldiagramcom_diagram.bufbuild_es/diag/v1/workspace_service_pb'
+
+export interface ParsedImport {
+  elements: PlanElement[]
+  connectors: PlanConnector[]
+  warnings: string[]
+}
+
+function toPlanConnector(connector: Record<string, unknown>): PlanConnector {
+	return connector as unknown as PlanConnector
+}
+
+export function parseMermaid(code: string): ParsedImport {
+  const viewRef = 'root'
+  const result: ParsedImport = {
+    elements: [],
+    connectors: [],
+    warnings: [],
+  }
+
+  if (isFlowchartDiagram(code)) {
+    const diagram = Flowchart.from(parseFlowchart(code))
+
+    for (const node of diagram.nodes) {
+      result.elements.push({
+        ref: node.id,
+        name: node.text?.text || node.id,
+        kind: 'system',
+        placements: [{ parentRef: viewRef }],
+      } as PlanElement)
+    }
+
+    for (const link of diagram.links) {
+      result.connectors.push(toPlanConnector({
+        ref: `${link.source}:${link.target}`,
+        viewRef,
+        sourceElementRef: link.source,
+        targetElementRef: link.target,
+        label: link.text?.text || '',
+      }))
+    }
+  } else if (isC4Diagram(code)) {
+    const diagram = C4.from(parseC4(code))
+
+    const collectElements = (elements: typeof diagram.elements) => {
+      for (const el of elements) {
+        result.elements.push({
+          ref: el.alias,
+          name: el.label || el.alias,
+          kind: 'system',
+          placements: [{ parentRef: viewRef }],
+        } as PlanElement)
+        if ('children' in el && el.children) {
+          collectElements(el.children as typeof diagram.elements)
+        }
+      }
+    }
+
+    collectElements(diagram.elements)
+
+    for (const rel of diagram.relationships) {
+      result.connectors.push(toPlanConnector({
+        ref: `${rel.from}:${rel.to}`,
+        viewRef,
+        sourceElementRef: rel.from,
+        targetElementRef: rel.to,
+        label: rel.label || '',
+      }))
+    }
+  } else {
+    result.warnings.push(`Unsupported diagram type`)
+  }
+
+  return result
+}

package/src/platform/PlatformContext.tsx

@@ -0,0 +1,17 @@
+import React, { type ReactNode } from 'react'
+import type { PlatformFeatures } from './types'
+import { PlatformContext } from './context'
+
+export const PlatformProvider = ({ 
+  platform, 
+  children 
+}: { 
+  platform: PlatformFeatures<unknown>; 
+  children: ReactNode 
+}) => {
+  return (
+    <PlatformContext.Provider value={platform}>
+      {children}
+    </PlatformContext.Provider>
+  )
+}

package/src/platform/context.ts

@@ -0,0 +1,9 @@
+import { createContext, useContext } from 'react'
+import type { PlatformFeatures } from './types'
+import { platform as localPlatform } from './local'
+
+export const PlatformContext = createContext<PlatformFeatures<unknown>>(localPlatform)
+
+export function usePlatform() {
+  return useContext(PlatformContext)
+}

package/src/platform/local.tsx

@@ -0,0 +1,15 @@
+import { Navigate, Route } from 'react-router-dom'
+import type { PlatformFeatures } from './types'
+
+export const platform: PlatformFeatures = {
+  hasAuth: false,
+  hasBilling: false,
+  initPlatform: async () => {},
+  getUpgradePath: () => null,
+  getRoutes: () => [],
+  getAuthenticatedRoutes: () => [],
+  getSettingsRoutes: () => [
+    <Route key="api-keys" path="api-keys" element={<Navigate to="/settings/appearance" replace />} />,
+  ],
+  AuthLayout: () => null,
+}

package/src/platform/types.ts

@@ -0,0 +1,19 @@
+import type { ComponentType, ReactNode } from 'react'
+
+export interface PlatformRouteContext<User = unknown> {
+  user: User | null
+  onLogin?: (user: User) => void
+  onLogout?: () => void
+}
+
+export interface PlatformFeatures<User = unknown> {
+  hasAuth?: boolean
+  hasBilling?: boolean
+  initPlatform: (orgId?: string) => Promise<void>
+  getUpgradePath?: () => string | null
+  getRoutes: (context: PlatformRouteContext<User>) => ReactNode[]
+  getAuthenticatedRoutes: (context: PlatformRouteContext<User>) => ReactNode[]
+  getSettingsRoutes: (context: PlatformRouteContext<User>) => ReactNode[]
+  AuthLayout: ComponentType<unknown>
+  connectRealtime?: (...args: unknown[]) => unknown
+}

package/src/slots.ts

@@ -0,0 +1,92 @@
+/**
+ * @tldiagram/core-ui Extension Point Slots
+ *
+ * Slots are React.ReactNode props that host applications inject into core
+ * components to layer in optional host-app features (sharing, extra tools, etc.)
+ * without modifying the core library.
+ *
+ * Naming convention: `<area>Slot` describes WHERE the content renders.
+ */
+import type { ReactNode } from 'react'
+
+// ─── TopMenuBar ──────────────────────────────────────────────────────────────
+
+export interface TopMenuBarSlots {
+  /**
+   * Rendered in the right section of the desktop top bar, before the
+   * settings / user controls. Use for share buttons,
+   * buttons, notification bells, etc.
+   *
+   * @example <AvatarGroup /> or <ShareButton />
+   */
+  rightSlot?: ReactNode
+
+  /**
+   * Rendered inside the mobile "Options" bottom-nav menu, after the
+   * default settings items. Use for custom menu items, links, etc.
+   *
+   * @example <MenuItem>My Custom Action</MenuItem>
+   */
+  mobileMenuSlot?: ReactNode
+
+  /**
+   * Overrides the default user profile / settings controls.
+   * If provided, the default user avatar will be hidden.
+   */
+  userControlsSlot?: ReactNode
+}
+
+// ─── ElementPanel ────────────────────────────────────────────────────────────
+
+export interface ElementPanelSlots {
+  /**
+   * Rendered at the bottom of the ElementPanel body.
+   */
+  elementPanelAfterContentSlot?: ReactNode
+}
+
+// ─── ConnectorPanel ──────────────────────────────────────────────────────────
+
+export interface ConnectorPanelSlots {
+  /**
+   * Rendered at the bottom of the ConnectorPanel body.
+   */
+  connectorPanelAfterContentSlot?: ReactNode
+}
+
+// ─── ViewFloatingMenu ────────────────────────────────────────────────────────
+
+export interface ViewFloatingMenuSlots {
+  /**
+   * Overrides or wraps the default Share button.
+   */
+  shareSlot?: ReactNode
+
+  /**
+   * Rendered inside the ViewFloatingMenu, after the existing toolbar
+   * buttons. Use for extra buttons, export to SaaS, etc.
+   */
+  toolbarSlot?: ReactNode
+}
+
+// ─── ViewEditor ──────────────────────────────────────────────────────────────
+
+export interface ViewEditorSlots {
+  /**
+   * Rendered as a fixed overlay on top of the ReactFlow canvas.
+   */
+  canvasOverlaySlot?: ReactNode
+}
+
+// ─── Combined ────────────────────────────────────────────────────────────────
+
+/**
+ * All extension points collected. Host apps can build a single
+ * "slots" object and pass it down via context or props.
+ */
+export interface CoreUISlots
+  extends TopMenuBarSlots,
+  ElementPanelSlots,
+  ConnectorPanelSlots,
+  ViewFloatingMenuSlots,
+  ViewEditorSlots { }

package/src/styles/editor-panels.css

@@ -0,0 +1,66 @@
+.panel-search-container {
+    padding: 0.75rem;
+    /* 12px */
+    flex-shrink: 0;
+}
+
+.panel-search-input {
+    background-color: rgba(255, 255, 255, 0.04) !important;
+    border: 1px solid rgba(255, 255, 255, 0.08) !important;
+    border-radius: 10px !important;
+    font-size: 0.75rem !important;
+    /* 12px / xs */
+    transition: all 0.2s ease !important;
+}
+
+.panel-search-input:focus {
+    background-color: rgba(255, 255, 255, 0.08) !important;
+    border-color: var(--accent) !important;
+    box-shadow: none !important;
+}
+
+.panel-action-button {
+    width: 100%;
+    height: 100%;
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.panel-action-button:hover:not(:disabled) {
+    background-color: rgba(255, 255, 255, 0.06);
+}
+
+.panel-action-button:active:not(:disabled) {
+    transform: translateY(1px);
+}
+
+
+.panel-action-icon-container {
+    width: 32px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 8px;
+    background-color: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    margin-right: 0.75rem;
+    flex-shrink: 0;
+    transition: all 0.2s ease;
+}
+
+.panel-action-button:hover .panel-action-icon-container {
+    color: var(--accent);
+}
+
+.panel-section-title {
+    font-size: 0.7rem;
+    font-weight: 700;
+    color: rgba(255, 255, 255, 0.9);
+    letter-spacing: 0.02em;
+    text-transform: uppercase;
+    padding: 1rem 1rem 0.75rem 1rem;
+}

package/src/styles/theme.css

@@ -0,0 +1,56 @@
+:root {
+    /* Base background color - dark blue/purplish */
+    --bg-main: #0d121e;
+    --bg-main-rgb: 13, 18, 30;
+
+    /* Element background color */
+    --bg-element: #2d3748;
+    --bg-element-rgb: 45, 55, 72;
+
+    /* Derived background colors */
+    --bg-canvas: color-mix(in srgb, var(--bg-main), black 15%);
+    --bg-header: rgba(var(--bg-main-rgb), 0.96);
+    --bg-menu: rgba(var(--bg-main-rgb), 0.98);
+    --bg-panel: rgba(var(--bg-main-rgb), 0.96);
+    --bg-card: rgba(var(--bg-main-rgb), 0.4);
+    --bg-card-solid: var(--bg-element);
+    --bg-dots: rgba(var(--bg-main-rgb), 0.6);
+    --bg-hover: rgba(255, 255, 255, 0.05);
+
+    /* Borders */
+    --border-main: rgba(255, 255, 255, 0.08);
+
+    /* Gradients */
+    --grad-header: linear-gradient(180deg, rgba(var(--bg-main-rgb), 0.96) 0%, rgba(var(--bg-main-rgb), 0.92) 100%);
+    --grad-panel: radial-gradient(circle at 50% -20%, rgba(var(--accent-rgb, 99, 179, 237), 0.15), transparent 80%);
+    --grad-card: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.05) 8%, rgba(255, 255, 255, 0.05) 92%, transparent 100%);
+}
+
+/* Chakra theme overrides or extensions can go here if needed */
+.bg-main {
+    background-color: var(--bg-main);
+}
+
+.bg-element {
+    background-color: var(--bg-element);
+}
+
+.bg-canvas {
+    background-color: var(--bg-canvas);
+}
+
+.bg-header {
+    background-color: var(--bg-header);
+}
+
+.bg-menu {
+    background-color: var(--bg-menu);
+}
+
+.bg-panel {
+    background-color: var(--bg-panel);
+}
+
+.bg-card {
+    background-color: var(--bg-card);
+}