@live-change/flow-frontend 0.9.226 → 0.9.227

package/.node-version

@@ -0,0 +1 @@
+20.20.2

package/.nvmrc

@@ -0,0 +1 @@
+20.20.2

package/README.md

@@ -0,0 +1,33 @@
+# @live-change/flow-frontend
+
+Headless Vue 3 **node-and-edge canvas**: pan, zoom, drag nodes, connect ports, reconnect edge ends.
+
+The app supplies node/edge Vue wrappers, graph data, persistence, and any execution runtime.
+
+## Public exports
+
+`useFlow`, `Flow`, `Node`, `NodeHandle`, `NodePort`, `Edge`, `EdgeBezierCurve`, `EdgeEndHandle`
+
+## Run the kitchen-sink demo
+
+From this package directory (use the repo Node version via `fnm`):
+
+```bash
+fnm exec -- yarn memDev
+```
+
+Open the printed local URL. `/` is a sample dataflow (source → enrich → output) with `localStorage` persistence and **Run sample**.
+
+## Docs
+
+- Stack chapter: [Frontend – Flow editor](../../docs/docs/frontend/14-flow-frontend.md)
+- Copy-paste demo: `front/src/demo/`
+
+## Embedding in another app
+
+```javascript
+import { Flow, useFlow, Node, NodeHandle, NodePort, Edge, EdgeBezierCurve, EdgeEndHandle }
+  from '@live-change/flow-frontend'
+```
+
+Do not import `front/src/demo/*` from the package entry — those files are the sample app only.

package/e2e/calculation.test.ts

@@ -0,0 +1,247 @@
+import assert from 'node:assert'
+import { withBrowser } from './withBrowser.js'
+import { e2eSuite, test } from './e2eSuite.js'
+import type { TestEnv } from './env.js'
+import { flowTestId } from '../front/src/demo/flowTestId.js'
+
+async function waitUntil(fn: () => Promise<boolean>, timeoutMs = 10000, message = 'waitUntil timeout') {
+  const start = Date.now()
+  while (Date.now() - start < timeoutMs) {
+    if (await fn()) return
+    await new Promise(resolve => setTimeout(resolve, 100))
+  }
+  throw new Error(message)
+}
+
+function graphIdFor(calculationId: string) {
+  return JSON.stringify('calculation_Calculation') + ':' + JSON.stringify(calculationId)
+}
+
+async function waitForCalculation(page: import('playwright').Page) {
+  await page.getByTestId('add-constant').waitFor({ state: 'visible', timeout: 60000 })
+  await page.waitForURL(/\/calc\/.+/, { timeout: 60000 })
+  const calculationId = page.url().split('/').pop() as string
+  assert.ok(calculationId && calculationId !== 'calc', 'calculation id in url')
+  await waitUntil(async () => !(await page.getByTestId('add-constant').isDisabled()), 20000)
+  return calculationId
+}
+
+async function fillNumber(locator: import('playwright').Locator, value: string) {
+  const input = locator.locator('input').first()
+  await input.waitFor({ state: 'visible', timeout: 15000 })
+  await input.click({ clickCount: 3 })
+  await input.fill(value)
+  await input.blur()
+}
+
+async function dragPort(
+  page: import('playwright').Page,
+  fromTestId: string,
+  toTestId: string
+) {
+  const from = page.getByTestId(fromTestId)
+  const to = page.getByTestId(toTestId)
+  await from.waitFor({ state: 'visible', timeout: 15000 })
+  await to.waitFor({ state: 'visible', timeout: 15000 })
+  await from.scrollIntoViewIfNeeded()
+  await to.scrollIntoViewIfNeeded()
+  const fromBox = await from.boundingBox()
+  const toBox = await to.boundingBox()
+  assert.ok(fromBox && toBox, `missing bounding box for ${fromTestId} or ${toTestId}`)
+  await page.mouse.move(fromBox.x + fromBox.width / 2, fromBox.y + fromBox.height / 2)
+  await page.mouse.down()
+  await page.mouse.move(toBox.x + toBox.width / 2, toBox.y + toBox.height / 2, { steps: 12 })
+  await page.mouse.up()
+}
+
+e2eSuite('calculation', () => {
+  test('page creates a Calculation and Graph', async () => {
+    await withBrowser(async (page, env: TestEnv) => {
+      await page.goto(env.url + '/calc', { waitUntil: 'domcontentloaded' })
+      const calculationId = await waitForCalculation(page)
+      const graph = await env.grabObject('flow', 'Graph', graphIdFor(calculationId))
+      assert.ok(graph, 'Graph row exists for the calculation')
+      env.haveAction('calculation', 'runCalculation')
+      env.haveView('flow', 'graphOwnedEdges')
+    })
+  })
+
+  test('add Constant + Add, connect, run shows the sum', async () => {
+    await withBrowser(async (page, env: TestEnv) => {
+      await page.goto(env.url + '/calc', { waitUntil: 'domcontentloaded' })
+      const calculationId = await waitForCalculation(page)
+      const gid = graphIdFor(calculationId)
+
+      await page.getByTestId('add-constant').click()
+      await waitUntil(async () => {
+        const nodes = await env.haveModel('flow', 'Node').sortedIndexRangeGet('byGraph', ['flow_Graph', gid])
+        return (nodes || []).length >= 1
+      }, 15000, 'expected 1 node after first add-constant')
+      await page.getByTestId('add-constant').click()
+      await waitUntil(async () => {
+        const nodes = await env.haveModel('flow', 'Node').sortedIndexRangeGet('byGraph', ['flow_Graph', gid])
+        return (nodes || []).length >= 2
+      }, 15000, 'expected 2 nodes after second add-constant')
+      await page.getByTestId('add-add').click()
+      await waitUntil(async () => {
+        const nodes = await env.haveModel('flow', 'Node').sortedIndexRangeGet('byGraph', ['flow_Graph', gid])
+        return (nodes || []).length >= 3
+      }, 15000, 'expected 3 nodes after add-add')
+
+      const constantNodes = page.getByTestId('node-calculation_Constant')
+      await constantNodes.first().waitFor({ state: 'visible', timeout: 15000 })
+      await fillNumber(constantNodes.nth(0).getByTestId('constant-value'), '3')
+      await fillNumber(constantNodes.nth(1).getByTestId('constant-value'), '4')
+      await waitUntil(async () => {
+        const rows = await env.haveModel('calculation', 'Constant')
+          .sortedIndexRangeGet('byCalculation', [calculationId])
+        const values = []
+        for (const row of rows || []) {
+          const id = (row as { to?: string, id?: string }).to
+            || (row as { id?: string }).id as string
+          const obj = await env.grabObject('calculation', 'Constant', id) as { value?: number }
+          values.push(obj?.value)
+        }
+        return values.includes(3) && values.includes(4)
+      }, 15000, 'constant values 3 and 4 were not saved')
+
+      const constants = await env.haveModel('calculation', 'Constant')
+        .sortedIndexRangeGet('byCalculation', [calculationId])
+      const addRows = await env.haveModel('calculation', 'Add')
+        .sortedIndexRangeGet('byCalculation', [calculationId])
+      assert.ok((constants || []).length >= 2)
+      assert.ok((addRows || []).length >= 1)
+
+      const flowNodes = await env.haveModel('flow', 'Node')
+        .sortedIndexRangeGet('byGraph', ['flow_Graph', gid])
+      const nodeObjects = []
+      for (const row of flowNodes || []) {
+        const id = (row as { to?: string, id?: string }).to
+          || (row as { id?: string }).id as string
+        nodeObjects.push(await env.grabObject('flow', 'Node', id) as {
+          id: string, logicType: string, logic: string
+        })
+      }
+      const constantFlowNodes = nodeObjects.filter(n => n.logicType == 'calculation_Constant')
+      const addFlowNode = nodeObjects.find(n => n.logicType == 'calculation_Add')
+      assert.ok(addFlowNode)
+
+      for (const constantNode of constantFlowNodes.slice(0, 2)) {
+        await dragPort(
+          page,
+          `port-${flowTestId(constantNode.id)}-out`,
+          `port-${flowTestId(addFlowNode!.id)}-in`
+        )
+        await page.waitForTimeout(400)
+      }
+
+      await waitUntil(async () => {
+        const edges = await env.haveModel('flow', 'Edge')
+          .sortedIndexRangeGet('byGraph', ['flow_Graph', gid])
+        return (edges || []).length >= 2
+      }, 15000, 'expected 2 edges after connecting constants to add')
+
+      await page.getByTestId('run-calculation').click()
+      const results = page.getByTestId('run-results')
+      await waitUntil(async () => {
+        const text = await results.innerText()
+        return text.includes('7')
+      }, 15000, 'run results should include 7')
+
+      await page.getByTestId('add-power').click()
+      await waitUntil(async () => {
+        const powers = await env.haveModel('calculation', 'Power')
+          .sortedIndexRangeGet('byCalculation', [calculationId])
+        return (powers || []).length >= 1
+      })
+      const powerNodeRow = (await env.haveModel('flow', 'Node')
+        .sortedIndexRangeGet('byGraph', ['flow_Graph', gid]) || [])
+      const powerNodes = []
+      for (const row of powerNodeRow as { to?: string, id?: string }[]) {
+        const id = row.to || row.id as string
+        const obj = await env.grabObject('flow', 'Node', id) as {
+          id: string, logicType: string
+        }
+        if (obj.logicType == 'calculation_Power') powerNodes.push(obj)
+      }
+      assert.ok(powerNodes[0], 'Power node exists')
+      const edgesBeforePower = ((await env.haveModel('flow', 'Edge')
+        .sortedIndexRangeGet('byGraph', ['flow_Graph', gid])) || []).length
+      await dragPort(
+        page,
+        `port-${flowTestId(addFlowNode!.id)}-out`,
+        `port-${flowTestId(powerNodes[0].id)}-in`
+      )
+      await waitUntil(async () => {
+        const edges = await env.haveModel('flow', 'Edge')
+          .sortedIndexRangeGet('byGraph', ['flow_Graph', gid])
+        return (edges || []).length > edgesBeforePower
+      }, 15000, 'expected an edge from add to power')
+      await page.getByTestId('run-calculation').click()
+      await waitUntil(async () => {
+        const text = await results.innerText()
+        return text.includes('49')
+      }, 15000, 'run results should include 49')
+    })
+  })
+
+  test('delete edge removes Wire; delete node removes logic and Node', async () => {
+    await withBrowser(async (page, env: TestEnv) => {
+      await page.goto(env.url + '/calc', { waitUntil: 'domcontentloaded' })
+      const calculationId = await waitForCalculation(page)
+      const gid = graphIdFor(calculationId)
+
+      await page.getByTestId('add-constant').click()
+      await waitUntil(async () => {
+        const nodes = await env.haveModel('flow', 'Node').sortedIndexRangeGet('byGraph', ['flow_Graph', gid])
+        return (nodes || []).length >= 1
+      }, 15000, 'expected 1 node after add-constant')
+      await page.getByTestId('add-add').click()
+      await waitUntil(async () => {
+        const nodes = await env.haveModel('flow', 'Node').sortedIndexRangeGet('byGraph', ['flow_Graph', gid])
+        return (nodes || []).length >= 2
+      }, 15000, 'expected 2 nodes after add-add')
+
+      const flowNodes = await env.haveModel('flow', 'Node')
+        .sortedIndexRangeGet('byGraph', ['flow_Graph', gid])
+      const nodeObjects = []
+      for (const row of flowNodes || []) {
+        const id = (row as { to?: string, id?: string }).to
+          || (row as { id?: string }).id as string
+        nodeObjects.push(await env.grabObject('flow', 'Node', id) as {
+          id: string, logicType: string, logic: string
+        })
+      }
+      const constantNode = nodeObjects.find(n => n.logicType == 'calculation_Constant')
+      const addNode = nodeObjects.find(n => n.logicType == 'calculation_Add')
+      assert.ok(constantNode && addNode)
+
+      await dragPort(
+        page,
+        `port-${flowTestId(constantNode.id)}-out`,
+        `port-${flowTestId(addNode.id)}-in`
+      )
+      await waitUntil(async () => {
+        const edges = await env.haveModel('flow', 'Edge')
+          .sortedIndexRangeGet('byGraph', ['flow_Graph', gid])
+        return (edges || []).length >= 1
+      }, 15000, 'expected an edge after connecting constant to add')
+
+      const edgesBefore = await env.haveModel('flow', 'Edge')
+        .sortedIndexRangeGet('byGraph', ['flow_Graph', gid])
+      const edgeRow = edgesBefore[0] as { to?: string, id?: string, connection?: string }
+      const edgeId = edgeRow.to || edgeRow.id as string
+      const edge = await env.grabObject('flow', 'Edge', edgeId) as { connection: string }
+      assert.ok(edge?.connection)
+
+      await page.getByTestId(`delete-edge-${flowTestId(edgeId)}`).click({ force: true })
+      await waitUntil(async () => !(await env.grabObject('calculation', 'Wire', edge.connection)))
+      await waitUntil(async () => !(await env.grabObject('flow', 'Edge', edgeId)))
+
+      const logicId = constantNode.logic
+      await page.getByTestId('node-calculation_Constant').first().getByTestId('delete-node').click()
+      await waitUntil(async () => !(await env.grabObject('calculation', 'Constant', logicId)))
+      await waitUntil(async () => !(await env.grabObject('flow', 'Node', constantNode.id)))
+    })
+  })
+})

package/e2e/e2eSuite.ts

@@ -0,0 +1,8 @@
+export {
+  e2eSuite,
+  getE2ERegistry,
+  resetE2ERegistry,
+  setCurrentE2EFile,
+  test,
+  type E2ETestDefinition
+} from '@live-change/e2e-test'

package/e2e/env.ts

@@ -0,0 +1,86 @@
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { TestServer } from '@live-change/server'
+import { createTestEnvHelpers, waitForServerReady } from '@live-change/e2e-test'
+import appConfig from '../server/app.config.js'
+import * as services from '../server/services.list.js'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const serverDir = path.join(__dirname, '..', 'server')
+const frontDir = path.join(__dirname, '..', 'front')
+
+for (const serviceConfig of appConfig.services) {
+  const name = (serviceConfig as { name: string }).name
+  ;(serviceConfig as { module?: unknown }).module = (services as Record<string, unknown>)[name]
+}
+;(appConfig as { init?: (s: unknown) => Promise<void> }).init =
+  (services as { init: (s: unknown) => Promise<void> }).init
+
+export type TestEnv = {
+  server: InstanceType<typeof TestServer>
+  url: string
+  haveService: (name: string) => { name: string; models: Record<string, { get: (id: string) => Promise<unknown>; sortedIndexRangeGet?: (index: string, key: unknown) => Promise<unknown[]> }>; views: Record<string, unknown>; actions: Record<string, unknown>; triggers: Record<string, unknown> }
+  haveModel: (serviceName: string, modelName: string) => { get: (id: string) => Promise<unknown>; sortedIndexRangeGet: (index: string, key: unknown) => Promise<unknown[]> }
+  haveView: (serviceName: string, viewName: string) => unknown
+  haveAction: (serviceName: string, actionName: string) => unknown
+  haveTrigger: (serviceName: string, triggerName: string) => unknown
+  grabObject: (serviceName: string, modelName: string, id: string) => Promise<unknown>
+}
+
+type TestServerInstance = InstanceType<typeof TestServer>
+
+let envPromise: Promise<TestEnv> | null = null
+let testServer: TestServerInstance | null = null
+
+export async function disposeTestEnv(): Promise<void> {
+  const s = testServer
+  if (!s) return
+  testServer = null
+  envPromise = null
+  await s.dispose()
+}
+
+export async function getTestEnv(): Promise<TestEnv> {
+  if (envPromise) return envPromise
+  envPromise = (async () => {
+    const server = new TestServer({
+      dev: true,
+      enableSessions: true,
+      port: 0,
+      ssrRoot: frontDir,
+      initScript: path.join(serverDir, 'init.js'),
+      services: appConfig
+    })
+    console.log('starting test server')
+    try {
+      await server.start()
+    } catch (error) {
+      console.error((error as Error).stack)
+      process.exit(1)
+    }
+    console.log('Test server started at', server.url)
+    console.log('waiting for front to be ready...')
+    await waitForServerReady(server.url!)
+    console.log('front ready')
+
+    testServer = server
+
+    process.on('beforeExit', () => {
+      void disposeTestEnv()
+    })
+
+    const url = server.url!
+    const helpers = createTestEnvHelpers(server)
+    return {
+      server,
+      url,
+      haveService: helpers.haveService,
+      haveModel: helpers.haveModel,
+      haveView: helpers.haveView,
+      haveAction: helpers.haveAction,
+      haveTrigger: helpers.haveTrigger,
+      grabObject: helpers.grabObject
+    }
+  })()
+  return envPromise
+}

package/e2e/kitchen-sink.test.ts

@@ -0,0 +1,85 @@
+import assert from 'node:assert'
+import { withBrowser } from './withBrowser.js'
+import { e2eSuite, test } from './e2eSuite.js'
+
+async function dragPort(
+  page: import('playwright').Page,
+  from: import('playwright').Locator,
+  to: import('playwright').Locator
+) {
+  await from.waitFor({ state: 'visible', timeout: 15000 })
+  await to.waitFor({ state: 'visible', timeout: 15000 })
+  await from.scrollIntoViewIfNeeded()
+  await to.scrollIntoViewIfNeeded()
+  const fromBox = await from.boundingBox()
+  const toBox = await to.boundingBox()
+  assert.ok(fromBox && toBox, 'missing port bounding box')
+  await page.mouse.move(fromBox.x + fromBox.width / 2, fromBox.y + fromBox.height / 2)
+  await page.mouse.down()
+  await page.mouse.move(toBox.x + toBox.width / 2, toBox.y + toBox.height / 2, { steps: 12 })
+  await page.mouse.up()
+}
+
+e2eSuite('kitchen-sink', () => {
+  test('page renders kitchen sink toolbar', async () => {
+    await withBrowser(async (page, env) => {
+      const response = await page.goto(env.url + '/', { waitUntil: 'domcontentloaded' })
+      assert.ok(response, 'navigation returned response')
+      assert.ok(response!.ok(), 'homepage responds with success status')
+      await page.getByTestId('nav-kitchen-sink').waitFor({ state: 'visible', timeout: 30000 })
+      await page.getByTestId('add-source').waitFor({ state: 'visible' })
+      await page.getByTestId('run-sample').waitFor({ state: 'visible' })
+      await page.getByTestId('node-source').first().waitFor({ state: 'visible' })
+    })
+  })
+
+  test('add a node, run sample, delete a node', async () => {
+    await withBrowser(async (page, env) => {
+      await page.goto(env.url + '/', { waitUntil: 'domcontentloaded' })
+      await page.getByTestId('add-source').waitFor({ state: 'visible', timeout: 30000 })
+
+      const before = await page.getByTestId('node-source').count()
+      await page.getByTestId('add-source').click()
+      await page.waitForTimeout(300)
+      const afterAdd = await page.getByTestId('node-source').count()
+      assert.ok(afterAdd > before, 'adding a source should create a node')
+
+      await page.getByTestId('run-sample').click()
+      const lastRun = page.getByTestId('last-run')
+      await lastRun.waitFor({ state: 'visible' })
+      const text = await lastRun.innerText()
+      assert.ok(text.includes('sku') || text.includes('traces') || text.includes('{'),
+        'run sample should show JSON')
+
+      await page.getByTestId('node-source').last().getByTestId('delete-node').click()
+      await page.waitForTimeout(300)
+      const afterDelete = await page.getByTestId('node-source').count()
+      assert.equal(afterDelete, afterAdd - 1)
+
+      await page.getByTestId('run-sample').click()
+      const afterDeleteRun = await lastRun.innerText()
+      assert.ok(afterDeleteRun.length > 0, 'graph remains runnable after delete')
+    })
+  })
+
+  test('drag out port to in port creates an edge', async () => {
+    await withBrowser(async (page, env) => {
+      await page.goto(env.url + '/', { waitUntil: 'domcontentloaded' })
+      await page.getByTestId('add-enrich').waitFor({ state: 'visible', timeout: 30000 })
+      await page.getByTestId('add-enrich').click()
+      await page.waitForTimeout(300)
+
+      const outPort = page.getByTestId('port-source-out')
+      const inPorts = page.getByTestId(/port-.*-in/)
+      await outPort.waitFor({ state: 'visible' })
+      const target = inPorts.last()
+      await target.waitFor({ state: 'visible' })
+      await dragPort(page, outPort, target)
+      await page.waitForTimeout(400)
+
+      await page.getByTestId('run-sample').click()
+      const text = await page.getByTestId('last-run').innerText()
+      assert.ok(text.includes('{'), 'graph still runs after connecting')
+    })
+  })
+})

package/e2e/runner.ts

@@ -0,0 +1,10 @@
+import { createRunner } from '@live-change/e2e-test'
+import { disposeTestEnv, getTestEnv } from './env.js'
+
+const runner = createRunner({
+  setupEnv: getTestEnv,
+  teardownEnv: disposeTestEnv
+})
+
+export const runE2E = runner.runE2E
+await runner.runCli(import.meta.url, process.argv.slice(2))

package/e2e/withBrowser.ts

@@ -0,0 +1,5 @@
+import { createWithBrowser } from '@live-change/e2e-test'
+import { getTestEnv } from './env.js'
+import type { TestEnv } from './env.js'
+
+export const withBrowser = createWithBrowser<TestEnv>(getTestEnv)

package/front/components.d.ts

@@ -0,0 +1,25 @@
+/* eslint-disable */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+// biome-ignore lint: disable
+export {}
+
+/* prettier-ignore */
+declare module 'vue' {
+  export interface GlobalComponents {
+    Button: typeof import('primevue/button')['default']
+    Dialog: typeof import('primevue/dialog')['default']
+    Edge: typeof import('./src/components/Edge.vue')['default']
+    EdgeBezierCurve: typeof import('./src/components/EdgeBezierCurve.vue')['default']
+    EdgeEndHandle: typeof import('./src/components/EdgeEndHandle.vue')['default']
+    Flow: typeof import('./src/components/Flow.vue')['default']
+    InputText: typeof import('primevue/inputtext')['default']
+    Node: typeof import('./src/components/Node.vue')['default']
+    NodeHandle: typeof import('./src/components/NodeHandle.vue')['default']
+    NodePort: typeof import('./src/components/NodePort.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Textarea: typeof import('primevue/textarea')['default']
+  }
+}

package/front/locales/en.js

@@ -0,0 +1,27 @@
+import messages from './en.json'
+
+export { messages }
+
+export const numberFormats = {
+  usd: {
+    style: 'currency',
+    currency: 'USD',
+    notation: 'standard'
+  }
+}
+
+export const datetimeFormats = {
+  short: {
+    year: 'numeric', month: 'short', day: 'numeric'
+  },
+  shortTime: {
+    dateStyle: 'short', timeStyle: 'short', hour12: false
+  },
+  shortestTime: {
+    month: 'numeric', day: 'numeric', hour: 'numeric', minute: 'numeric', hour12: false
+  },
+  long: {
+    year: 'numeric', month: 'short', day: 'numeric',
+    weekday: 'short', hour: 'numeric', minute: 'numeric'
+  }
+}

package/front/locales/en.json

@@ -0,0 +1,5 @@
+{
+  "flow": {
+    "title": "Flow editor"
+  }
+}

package/front/src/App.vue

@@ -7,15 +7,18 @@
 </template>
 
 <script setup>
-  import 'primevue/resources/themes/saga-green/theme.css'
-  import "@fortawesome/fontawesome-free/css/all.min.css"
 
-  import { ViewRoot, NavBar } from "@live-change/frontend-base"
+  import { useLocale } from '@live-change/vue3-components'
+  const locale = useLocale()
+  locale.captureLocale()
+
+  import NavBar from "./NavBar.vue"
+  import ViewRoot from "@live-change/frontend-base/ViewRoot.vue"
 
   import { computed } from 'vue'
   import { useHead } from '@vueuse/head'
   useHead(computed(() => ({
-    title: 'Title',
+    title: 'Flow editor',
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport',
@@ -28,13 +31,36 @@
     }
   })))
 
-  import { watch } from 'vue'
-  import { client as useClient, useApi } from '@live-change/vue3-ssr'
-  const client = useClient()
-  watch(client, (newClient, oldClient) => {
-    console.log("WATCH CLIENT", oldClient, '=>', newClient)
-  })
+</script>
 
-  const api = useApi()
+<style>
+  @import "tailwindcss";
+  @plugin "tailwindcss-primeui";
 
-</script>
+  @custom-variant dark (&:where(.app-dark-mode, .app-dark-mode *));
+
+  :root { font-family: 'Verdana', sans-serif; }
+  @supports (font-variation-settings: normal) {
+    :root { font-family: 'Verdana var', sans-serif; }
+  }
+  html,body
+  {
+    min-height:100%;
+    font-family: 'Verdana var', 'Verdana', sans-serif;
+  }
+
+  @layer base {
+    a {
+      color: var(--p-blue-700);
+      text-decoration: underline;
+    }
+    a:hover {
+      color: var(--p-blue-900);
+      text-decoration: none;
+    }
+    a:visited {
+      color: var(--p-purple-800);
+    }
+  }
+
+</style>

package/front/src/NavBar.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="bg-surface-0 dark:bg-surface-900 py-1 px-6 shadow flex items-center justify-between
+              relative md:sticky top-0 z-5"
+       style="min-height: 64px" key="navbar">
+
+    <router-link :to="{ name: 'index' }" class="no-underline text-gray-700 text-2xl font-medium">
+      <div class="flex items-center">
+        <img src="/images/logo.svg" class="w-10 mr-4">
+        <span class="text-surface-700 dark:text-surface-400">
+          Flow editor
+        </span>
+      </div>
+    </router-link>
+
+    <nav class="flex items-center gap-4">
+      <router-link :to="{ name: 'index' }" data-testid="nav-kitchen-sink"
+                   class="no-underline text-surface-700 dark:text-surface-400">
+        Kitchen sink
+      </router-link>
+      <router-link :to="{ name: 'calculation' }" data-testid="nav-calculation"
+                   class="no-underline text-surface-700 dark:text-surface-400">
+        Calculation
+      </router-link>
+    </nav>
+
+  </div>
+</template>
+
+<script setup>
+
+</script>

package/front/src/components/Edge.vue

@@ -17,7 +17,7 @@
 
   const { edge } = toRefs(props)
 
-  const flow = inject("flow")
+  const flow = inject("flow", null)
 
   const srcView = computed(() => edge.value.src.node && flow.getPortView(edge.value.src.node, edge.value.src.port))
   const destView = computed(() => edge.value.dest.node && flow.getPortView(edge.value.dest.node, edge.value.dest.port))

package/front/src/components/EdgeEndHandle.vue

@@ -111,7 +111,7 @@
     ].join(' ')
   })
 
-  const flow = inject("flow")
+  const flow = inject("flow", null)
 
   function handleMouseDown(event) {
     event.preventDefault()