@picked/svelte 0.0.1-dev.1793776638554 → 0.0.1-dev.1793923852884

package/dist/plugins/devtools/screens/experiences/ExperienceTreeScreen.svelte

@@ -1,500 +0,0 @@
-<script lang="ts">
-  /** @file D3-based tree visualization of an experience's node graph in the devtools panel. */
-  import { onDestroy } from 'svelte'
-  import * as d3 from 'd3'
-  import type { ExperienceEdge, ExperienceNode, ExperienceStore } from '@picked/client'
-  import { Badge, Button, Spinner, Stack, Text, VisualizationContainer } from '../../ui'
-
-  export let experience: ExperienceStore
-
-  let svgEl: SVGSVGElement
-  let zoom = 1
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- reserved for future node details panel
-  let selectedNode = null
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars, sonarjs/no-unused-collection -- reserved for future path highlighting
-  let highlightedPath: string[][] = []
-  let error: string | null = null
-  const loading = false
-
-  let treeRenderingDone = false
-  let tooltipEl: d3.Selection<HTMLDivElement, unknown, null, undefined> | null = null
-
-  onDestroy(() => {
-    tooltipEl?.remove()
-    tooltipEl = null
-  })
-
-  const tree = experience.treeStore
-
-  $: nodes = $tree.nodes
-  $: edges = $tree.edges
-  $: conditions = $tree.conditions
-
-
-  let zoomBehavior: d3.ZoomBehavior<SVGSVGElement, unknown>
-
-  interface ProcessedNode {
-    id: string
-    name: string
-    tooltip?: string
-    type: string
-    children: ProcessedNode[]
-    _originalNode: ExperienceNode
-    _originalEdges: ExperienceEdge[]
-    _visited?: boolean
-    _isReference?: boolean
-    _referenceTo?: string
-  }
-
-  /**
-   * Type guard that checks if a value is a non-null, non-array object.
-   *
-   * @param val - The value to check.
-   * @example
-   * ```typescript
-   * isRecord({ key: 'value' }) // true
-   * isRecord([1, 2]) // false
-   * ```
-   */
-  function isRecord(val: unknown): val is Record<string, unknown> {
-    return val !== null && typeof val === 'object' && !Array.isArray(val)
-  }
-
-  /**
-   * Recursively formats a JSON Logic rule into a human-readable string.
-   *
-   * @param rule - The JSON Logic rule object to format.
-   * @example
-   * ```typescript
-   * formatLogicRule({ '==': [{ var: 'age' }, 18] }) // 'age = 18'
-   * ```
-   */
-  // eslint-disable-next-line sonarjs/cognitive-complexity -- recursive logic rule formatter handles all operator types
-  function formatLogicRule(rule: unknown): string {
-    if (rule === null || rule === undefined) return '?'
-    if (typeof rule === 'string') return rule
-    if (typeof rule === 'number' || typeof rule === 'boolean') return String(rule)
-    if (Array.isArray(rule)) {
-      return rule.map(formatLogicRule).join(', ')
-    }
-
-    if (isRecord(rule)) {
-      const keys = Object.keys(rule)
-      if (keys.length === 0) return 'Condition'
-      const op = keys[0]
-      const args = rule[op]
-
-      if (op === 'var') {
-        return String(Array.isArray(args) ? args[0] : args)
-      }
-
-      const compOps: Record<string, string> = {
-        '==': '=',
-        '===': '=',
-        '!=': '≠',
-        '!==': '≠',
-        '>': '>',
-        '<': '<',
-        '>=': '≥',
-        '<=': '≤',
-      }
-      if (op in compOps && Array.isArray(args) && args.length >= 2) {
-        return `${formatLogicRule(args[0])} ${compOps[op]} ${formatLogicRule(args[1])}`
-      }
-
-      if (op === 'and' && Array.isArray(args)) {
-        return args.map(formatLogicRule).join(' & ')
-      }
-
-      if (op === 'or' && Array.isArray(args)) {
-        return args.map(formatLogicRule).join(' | ')
-      }
-
-      if ((op === '!' || op === 'not') && Array.isArray(args)) {
-        return `!${formatLogicRule(args[0])}`
-      }
-
-      if (op === 'in' && Array.isArray(args) && args.length >= 2) {
-        return `${formatLogicRule(args[0])} in ${formatLogicRule(args[1])}`
-      }
-
-      return `${op}(?)`
-    }
-
-    return '?'
-  }
-
-  /**
-   * Renders the experience node graph as an interactive D3 tree visualization.
-   *
-   * @example
-   * ```typescript
-   * renderGraph() // builds and renders the SVG tree
-   * ```
-   */
-  function renderGraph() {
-    d3.select(svgEl).selectAll('*').remove()
-
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- D3 visualization runs imperatively outside Svelte reactivity
-    const conditionsMap = new Map(conditions.map((c) => [c.id, c]))
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- D3 visualization runs imperatively outside Svelte reactivity
-    const outgoingEdges = new Map<string, ExperienceEdge[]>()
-    edges.forEach((e) => {
-      if (!outgoingEdges.has(e.sourceNodeId)) outgoingEdges.set(e.sourceNodeId, [])
-      outgoingEdges.get(e.sourceNodeId)?.push(e)
-    })
-
-    const getNodeLabel = (node: ExperienceNode): string => {
-      if (node.type === 'origin') return 'Start'
-      if (node.type === 'step') return node.name ?? 'Unknown Step'
-
-      if (node.type === 'condition') {
-        const conditionItem = node.conditionId ? conditionsMap.get(node.conditionId) : undefined
-        return conditionItem?.name ?? 'Condition'
-      }
-
-      if (node.type === 'action') return node.name ?? node.actionKey ?? 'Action'
-
-      return 'Unknown Node'
-    }
-
-    const getNodeTooltip = (node: ExperienceNode): string | undefined => {
-      if (node.type !== 'condition') return undefined
-      const conditionItem = node.conditionId ? conditionsMap.get(node.conditionId) : undefined
-      if (conditionItem?.logic) return formatLogicRule(conditionItem.logic)
-      return undefined
-    }
-
-    // eslint-disable-next-line svelte/prefer-svelte-reactivity -- D3 visualization runs imperatively outside Svelte reactivity
-    const processedNodes = new Map<string, ProcessedNode>()
-    nodes.forEach((n) => {
-      processedNodes.set(n.id, {
-        id: n.id,
-        name: getNodeLabel(n),
-        tooltip: getNodeTooltip(n),
-        type: n.type,
-        children: [],
-        _originalNode: n,
-        _originalEdges: [],
-      })
-    })
-    edges.forEach((e) => {
-      const src = processedNodes.get(e.sourceNodeId)
-      const tgt = processedNodes.get(e.destinationNodeId)
-      if (src && tgt && !src.children.some((c) => c.id === tgt.id)) {
-        src._originalEdges.push(e)
-        src.children.push(tgt)
-      }
-    })
-
-    const rootNode = processedNodes.get(nodes.find((n) => n.type === 'origin')?.id ?? '')
-    if (!rootNode) {
-      error = 'Origin node not found'
-    } else {
-      error = null
-    }
-
-    if (rootNode) {
-      // Use a global visited set so join nodes (multiple incoming branches converging
-      // to the same node) only appear once in the tree, with reference nodes on
-      // subsequent visits to indicate the convergence point.
-      // eslint-disable-next-line svelte/prefer-svelte-reactivity -- D3 visualization runs imperatively outside Svelte reactivity
-      const globalVisited = new Set<string>()
-      const convertGraphToTree = (node: ProcessedNode): ProcessedNode => {
-        if (globalVisited.has(node.id)) {
-          return {
-            ...node,
-            id: `${node.id}_ref`,
-            name: `↩ ${node.name}`,
-            type: `${node.type}_ref`,
-            children: [],
-            _isReference: true,
-            _referenceTo: node.id,
-          }
-        }
-
-        globalVisited.add(node.id)
-        return { ...node, children: node.children.map((c) => convertGraphToTree(c)) }
-      }
-
-      const treeData = convertGraphToTree(rootNode)
-      const width = svgEl.clientWidth
-      const height = svgEl.clientHeight
-      const margin = { top: 50, right: 120, bottom: 50, left: 120 }
-      const innerWidth = width - margin.left - margin.right
-      const innerHeight = height - margin.top - margin.bottom
-
-      const treeLayout = d3
-        .tree<ProcessedNode>()
-        .size([innerHeight, innerWidth])
-        .nodeSize([80, 200])
-      const root = d3.hierarchy(treeData)
-      const treeRoot = treeLayout(root)
-
-      zoomBehavior = d3
-        .zoom<SVGSVGElement, unknown>()
-        .scaleExtent([0.1, 3])
-        .on('zoom', (event) => {
-          g.attr('transform', event.transform)
-          zoom = event.transform.k
-        })
-
-      const svg = d3.select(svgEl).attr('width', width).attr('height', height).call(zoomBehavior)
-
-      const g = svg.append('g').attr('transform', `translate(${margin.left},${margin.top})`)
-
-      const linkGenerator = d3
-        .linkHorizontal<d3.HierarchyPointLink<ProcessedNode>, d3.HierarchyPointNode<ProcessedNode>>()
-        .x((d) => d.y)
-        .y((d) => d.x)
-
-      g.selectAll('.link')
-        .data(treeRoot.links())
-        .enter()
-        .append('path')
-        .attr('class', 'link')
-        .attr('fill', 'none')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .attr('stroke', (d: any) => {
-          if (d.source.data.type !== 'condition') return '#94a3b8'
-          const targetId = d.target.data._isReference
-            ? d.target.data._referenceTo
-            : d.target.data.id
-          const edge = d.source.data._originalEdges.find(
-            (e: ExperienceEdge) => e.destinationNodeId === targetId,
-          )
-          if (edge?.sourceHandle === 'true') return '#10b981'
-          if (edge?.sourceHandle === 'false') return '#ef4444'
-          return '#94a3b8'
-        })
-        .attr('stroke-width', 2)
-        .attr('d', linkGenerator)
-
-      // Label true/false branches from condition nodes
-      g.selectAll('.edge-label')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .data(treeRoot.links().filter((d: any) => d.source.data.type === 'condition'))
-        .enter()
-        .append('text')
-        .attr('class', 'edge-label')
-        .attr('text-anchor', 'middle')
-        .attr('font-size', '10px')
-        .attr('font-weight', 'bold')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .attr('x', (d: any) => (d.source.y + d.target.y) / 2)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .attr('y', (d: any) => (d.source.x + d.target.x) / 2 - 6)
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .attr('fill', (d: any) => {
-          const targetId = d.target.data._isReference
-            ? d.target.data._referenceTo
-            : d.target.data.id
-          const edge = d.source.data._originalEdges.find(
-            (e: ExperienceEdge) => e.destinationNodeId === targetId,
-          )
-          if (edge?.sourceHandle === 'true') return '#10b981'
-          if (edge?.sourceHandle === 'false') return '#ef4444'
-          return '#64748b'
-        })
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .text((d: any) => {
-          const targetId = d.target.data._isReference
-            ? d.target.data._referenceTo
-            : d.target.data.id
-          const edge = d.source.data._originalEdges.find(
-            (e: ExperienceEdge) => e.destinationNodeId === targetId,
-          )
-          if (edge?.sourceHandle === 'true') return 'Yes'
-          if (edge?.sourceHandle === 'false') return 'No'
-          return ''
-        })
-
-      const nodesSelection = g
-        .selectAll('.node')
-        .data(treeRoot.descendants())
-        .enter()
-        .append('g')
-        .attr('class', 'node')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .attr('transform', (d: any) => `translate(${d.y},${d.x})`)
-
-      const circles = nodesSelection
-        .append('circle')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .attr('r', (d: any) => (d.data.type === 'origin' ? 15 : 10))
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .attr('fill', (d: any) => {
-          if (d.data._isReference) return '#38bdf8'
-          if (d.data.type === 'origin') return '#6b7280'
-          if (d.data.type === 'condition') return '#f59e0b'
-          if (d.data.type === 'action') return '#22c55e'
-          return '#3b82f6'
-        })
-        .attr('stroke', '#fff')
-        .attr('stroke-width', 2)
-
-      tooltipEl?.remove()
-      tooltipEl = d3
-        .select(svgEl.parentElement)
-        .append('div')
-
-      const tooltip = tooltipEl
-        .style('position', 'absolute')
-        .style('pointer-events', 'none')
-        .style('background', '#1e293b')
-        .style('color', '#f8fafc')
-        .style('padding', '6px 10px')
-        .style('border-radius', '6px')
-        .style('font-size', '11px')
-        .style('max-width', '260px')
-        .style('white-space', 'pre-wrap')
-        .style('opacity', '0')
-        .style('z-index', '10')
-
-      circles
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .filter((d: any) => d.data.tooltip)
-        .style('cursor', 'default')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .on('mouseenter', function showTooltip(event: MouseEvent, d: any) {
-          const container = svgEl.parentElement
-          if (!container || !d.data.tooltip) return
-          const rect = container.getBoundingClientRect()
-          tooltip
-            .text(d.data.tooltip)
-            .style('left', `${event.clientX - rect.left + 12}px`)
-            .style('top', `${event.clientY - rect.top - 8}px`)
-            .style('opacity', '1')
-        })
-        .on('mouseleave', function hideTooltip() {
-          tooltip.style('opacity', '0')
-        })
-
-      nodesSelection
-        .append('text')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .attr('dy', (d: any) => (d.children ? -15 : 25))
-        .attr('text-anchor', 'middle')
-        .attr('font-size', '12px')
-        .attr('fill', '#1e293b')
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any -- D3 callback types are untyped
-        .text((d: any) =>
-          d.data.name.length > 30 ? `${d.data.name.slice(0, 27)}...` : d.data.name,
-        )
-
-      svg.on('dblclick.zoom', null) // Remove default double click zoom
-      svg.on('dblclick', () => {
-        // Custom double click to reset highlights
-        svg.selectAll('.link').attr('stroke-opacity', 1).attr('stroke-width', 2)
-        svg.selectAll('.node').attr('opacity', 1)
-        selectedNode = null
-        highlightedPath = []
-      })
-
-      if (treeRoot.y !== undefined && treeRoot.x !== undefined) {
-        const originX = treeRoot.y
-        const originY = treeRoot.x
-        const initialTransform = d3.zoomIdentity.translate(
-          width / 2 - originX - margin.left,
-          height / 2 - originY - margin.top,
-        )
-        svg.call(zoomBehavior.transform, initialTransform)
-      }
-    }
-  }
-
-  $: if (svgEl && !treeRenderingDone) {
-    renderGraph()
-    treeRenderingDone = true
-  }
-
-  /**
-   * Zooms the tree visualization in by 20%.
-   *
-   * @example
-   * ```typescript
-   * handleZoomIn() // increases zoom level
-   * ```
-   */
-  function handleZoomIn() {
-    if (!svgEl || !zoomBehavior) return
-    d3.select(svgEl).transition().duration(250).call(zoomBehavior.scaleBy, 1.2)
-  }
-
-  /**
-   * Zooms the tree visualization out by 20%.
-   *
-   * @example
-   * ```typescript
-   * handleZoomOut() // decreases zoom level
-   * ```
-   */
-  function handleZoomOut() {
-    if (!svgEl || !zoomBehavior) return
-    d3.select(svgEl)
-      .transition()
-      .duration(250)
-      .call(zoomBehavior.scaleBy, 1 / 1.2)
-  }
-
-  /**
-   * Resets the tree visualization zoom and position to the default centered view.
-   *
-   * @example
-   * ```typescript
-   * handleReset() // resets zoom to default
-   * ```
-   */
-  function handleReset() {
-    if (!svgEl || !zoomBehavior) return
-    const width = svgEl.clientWidth
-    const height = svgEl.clientHeight
-    const margin = { top: 50, right: 120, bottom: 50, left: 120 }
-
-    const originX = width / 2 - margin.left
-    const originY = height / 2 - margin.top
-    const initialTransform = d3.zoomIdentity.translate(originX, originY)
-
-    d3.select(svgEl).transition().duration(750).call(zoomBehavior.transform, initialTransform)
-  }
-
-  /**
-   * Closes the node details panel and resets all link/node highlights.
-   *
-   * @example
-   * ```typescript
-   * closeNodeDetails() // resets selection and highlighting
-   * ```
-   */
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- reserved for future node details panel
-  function closeNodeDetails() {
-    selectedNode = null
-    if (svgEl) {
-      const svg = d3.select(svgEl)
-      svg.selectAll('.link').attr('stroke-opacity', 1).attr('stroke-width', 2)
-      svg.selectAll('.node').attr('opacity', 1)
-    }
-
-    highlightedPath = []
-  }
-</script>
-
-{#if loading}
-  <Stack direction="horizontal" align="center" justify="center" fill>
-    <Spinner label="Loading visualization" />
-  </Stack>
-{:else if error}
-  <Stack direction="horizontal" align="center" justify="center" fill>
-    <Text color="error">{error}</Text>
-  </Stack>
-{:else}
-  <VisualizationContainer>
-    {#snippet controls()}
-      <Button variant="secondary" size="small" onclick={handleZoomIn}>Zoom in</Button>
-      <Button variant="secondary" size="small" onclick={handleZoomOut}>Zoom out</Button>
-      <Button variant="secondary" size="small" onclick={handleReset}>Reset</Button>
-      <Badge status="default" size="small">{Math.round(zoom * 100)}%</Badge>
-    {/snippet}
-    <svg bind:this={svgEl}></svg>
-  </VisualizationContainer>
-{/if}

package/dist/plugins/devtools/screens/experiences/ExperiencesListScreen.svelte

@@ -1,22 +0,0 @@
-<script lang="ts">
-  /** @file Screen listing all registered experiences as tabs in the devtools panel. */
-  import Tabs from '../../components/Tabs.svelte'
-  import { getPicked } from '../../../../hooks'
-  import ExperienceScreen from './ExperienceScreen.svelte'
-
-  const client = getPicked()
-
-  const experiences = client.experiences.listStore
-  $: tabs = $experiences.map((experience) => {
-    return {
-      id: experience.id,
-      label: experience.name,
-      component: ExperienceScreen,
-      props: {
-        experience,
-      },
-    }
-  })
-</script>
-
-<Tabs {tabs} />