@k-4u/resource-mapper-core 0.0.1

package/src/lib/components/ServiceDetailSidebar.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+    import TeamContactCard from '$lib/components/TeamContactCard.svelte'
+    import {useNodes, useOnSelectionChange} from "@xyflow/svelte";
+    import type {GroupInfo, ServiceDefinition} from "$shared/types";
+    import {getAwsIconPath} from "$lib/utils/awsIcons";
+    import {GenericSidebarCard} from "$lib/components";
+    import {getGroup} from "$lib/data/groups";
+
+    const nodes = useNodes();
+    let selectedNode = $derived(nodes.current.find((node) => node.selected));
+
+    useOnSelectionChange(({nodes: n, edges}) => {
+        selectedNodes = n.map((node) => node.id);
+        selectedEdges = edges.map((edge) => edge.id);
+    });
+
+    const {group, serviceNodeLookup, externalServiceLookup} = $props<{
+        group: GroupInfo | null;
+        serviceNodeLookup: Record<string, ServiceDefinition>;
+        externalServiceLookup: Record<string, { service: ServiceDefinition; group: GroupInfo }>;
+    }>();
+
+    let isExternal = $derived(!!selectedNode && selectedNode.id in externalServiceLookup);
+
+    let serviceInfo = $derived.by<ServiceDefinition | null>(() => {
+        if (!selectedNode) return null;
+
+        // Use the boolean to pick the source
+        return isExternal
+            ? externalServiceLookup[selectedNode.id]?.service
+            : serviceNodeLookup[selectedNode.id];
+    });
+
+    let activeGroup = $state<GroupInfo | null>(group);
+
+    $effect(() => {
+        // If it's external and we have a groupId, go fetch it
+        if (isExternal && serviceInfo?.groupId) {
+            getGroup(serviceInfo.groupId).then(res => {
+                activeGroup = res;
+            });
+        } else {
+            // Otherwise, reset back to the group passed in via props
+            activeGroup = group;
+        }
+    });
+
+    let displayGroup = $derived(activeGroup);
+    let displayTeamId = $derived(displayGroup?.teamId);
+
+    let iconPath = $derived(serviceInfo ? getAwsIconPath(serviceInfo.serviceType) : null);
+    let initials = $derived(
+        serviceInfo?.friendlyName
+            ? serviceInfo.friendlyName.split(' ').map(n => n[0]).join('').slice(0,3).toUpperCase()
+            : 'Svc'
+    );
+</script>
+
+<aside class="flex h-full w-96 flex-col border-l border-gray-200 dark:border-gray-700 bg-gray-100 dark:bg-slate-800 text-gray-900 dark:text-gray-100">
+    <div class="flex-1 overflow-y-auto p-4 space-y-4">
+
+        {#if !displayGroup}
+            <div class="rounded-xl border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-slate-700 p-4 text-sm text-gray-500 dark:text-gray-300">
+                Select a group to view details.
+            </div>
+        {:else}
+            <GenericSidebarCard
+                    title={isExternal ? "Group" : "Current Group"}
+                    subtitle={displayGroup.name}
+                    description={displayGroup.description}
+                    classes={isExternal ? "external" : ""}
+            />
+
+            {#if displayTeamId}
+                <TeamContactCard teamId={displayTeamId} classes={isExternal ? "external" : ""} />
+            {/if}
+
+            {#if serviceInfo}
+                <GenericSidebarCard
+                        title="Service"
+                        subtitle={serviceInfo.friendlyName}
+                        description={serviceInfo.description}
+                        iconPath={iconPath ?? undefined}
+                        iconAlt={initials}
+                        classes={isExternal ? "external" : ""}
+                />
+            {/if}
+        {/if}
+    </div>
+</aside>

package/src/lib/components/TeamContactCard.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+    import type {Team} from '$shared/types'
+    import Icon from '@iconify/svelte'
+    import {getTeam} from "$lib/data/teams";
+    import {LoadingSpinner, GenericSidebarCard} from "$lib/components";
+    import { slide } from 'svelte/transition';
+    import { quintOut } from 'svelte/easing';
+
+    const {teamId, classes} = $props<{ teamId: string, classes?: string }>();
+
+    const iconMap: Record<string, string> = {
+        email: 'mailto:',
+        phone: 'tel:',
+        sms: 'sms:',
+        web: '',
+        slack: '',
+        teams: '',
+        pigeon: '',
+        pagerduty: ''
+    }
+
+    const channelIcons: Record<string, string> = {
+        email: 'mdi:email-outline',
+        phone: 'mdi:phone-outline',
+        sms: 'mdi:message-text-outline',
+        web: 'mdi:web',
+        slack: 'mdi:slack',
+        teams: 'mdi:microsoft-teams',
+        pigeon: 'mdi:owl',
+        pagerduty: 'mdi:bell-ring-outline'
+    }
+
+    let team = $state<Team | null>(null);
+    let isLoading = $state(false);
+
+    $effect(() => {
+        if (!teamId) {
+            team = null
+            return
+        }
+        isLoading = true
+        getTeam(teamId)
+            .then((data) => {
+                team = data
+            })
+            .catch((error) => {
+                console.error('Error loading team data:', error)
+                team = null
+            })
+            .finally(() => {
+                isLoading = false
+            })
+    })
+
+
+    const defaultChannelIcon = 'mdi:link-variant'
+
+    function getChannelIcon(channel: string): string {
+        return channelIcons[channel.toLowerCase()] ?? defaultChannelIcon
+    }
+
+    function formatChannel(channel: string) {
+        return channel.replace(/[-_]/g, ' ').replace(/^\w|\s\w/g, (c) => c.toUpperCase())
+    }
+
+    function buildLink(channel: string, detail: string) {
+        const prefix = iconMap[channel.toLowerCase()]
+        if (prefix === undefined) {
+            return null
+        }
+        if (!prefix) {
+            return detail.startsWith('http') ? detail : detail.startsWith('//') ? detail : `https://${detail}`
+        }
+        return `${prefix}${detail}`
+    }
+
+    let activeChannel = $state<string | null>(null);
+    let copied = $state(false);
+
+    function toggleChannel(channelId: string) {
+        activeChannel = activeChannel === channelId ? null : channelId;
+        copied = false; // Reset feedback when switching
+    }
+
+    async function copyToClipboard(text: string) {
+        try {
+            await navigator.clipboard.writeText(text);
+            copied = true;
+            setTimeout(() => (copied = false), 2000);
+        } catch (err) {
+            console.error('Failed to copy: ', err);
+        }
+    }
+</script>
+
+{#if isLoading}
+    <LoadingSpinner message="Loading team information..."/>
+{/if}
+
+{#if team}
+    <GenericSidebarCard title="Team" subtitle={team.name} description={team.description} classes={classes}>
+        <div class="mt-4 w-full">
+            {#if team.reachability?.length}
+                <div class="flex flex-col overflow-hidden rounded-xl border border-gray-300 bg-white shadow-sm dark:border-slate-700 dark:bg-slate-800/50">
+
+                    <div class="flex items-center divide-x divide-gray-200 dark:divide-slate-700">
+                        {#each team.reachability as entry}
+                            {@const isExpanded = activeChannel === entry.channel}
+                            <button
+                                    onclick={() => toggleChannel(entry.channel)}
+                                    class="flex h-12 flex-1 items-center justify-center transition-all
+                               {isExpanded ? 'bg-blue-50 text-blue-600 dark:bg-blue-500/20 dark:text-blue-400' : 'text-gray-500 hover:bg-gray-50 dark:text-gray-400 dark:hover:bg-slate-700/50'}"
+                            >
+                                <Icon icon={getChannelIcon(entry.channel)} class="h-5 w-5" />
+                            </button>
+                        {/each}
+                    </div>
+
+                    {#each team.reachability as entry}
+                        {#if activeChannel === entry.channel}
+                            <div
+                                    transition:slide={{ duration: 300, easing: quintOut }}
+                                    class="relative border-t border-gray-200 bg-gray-50/50 px-4 py-3 dark:border-slate-700 dark:bg-slate-900/30"
+                            >
+                                <button
+                                        onclick={() => copyToClipboard(entry.detail)}
+                                        class="absolute right-2 top-2 rounded-md p-1.5 transition-colors hover:bg-gray-200 dark:hover:bg-slate-700"
+                                        aria-label="Copy to clipboard"
+                                >
+                                    {#if copied}
+                                        <Icon icon="mdi:check-bold" class="h-4 w-4 text-green-500" />
+                                    {:else}
+                                        <Icon icon="mdi:content-copy" class="h-4 w-4 text-gray-400 hover:text-gray-600 dark:text-slate-500 dark:hover:text-slate-300" />
+                                    {/if}
+                                </button>
+
+                                <div class="flex flex-col gap-1 pr-8">
+                            <span class="text-[10px] font-black uppercase tracking-widest text-gray-400 dark:text-slate-500">
+                                {formatChannel(entry.channel)}
+                            </span>
+
+                                    {#if buildLink(entry.channel, entry.detail)}
+                                        <a
+                                                href={buildLink(entry.channel, entry.detail)}
+                                                target={entry.channel === 'web' ? '_blank' : undefined}
+                                                rel="noreferrer"
+                                                class="text-sm font-semibold text-blue-600 hover:underline dark:text-blue-400 break-all"
+                                        >
+                                            {entry.detail}
+                                        </a>
+                                    {:else}
+                                <span class="text-sm font-medium text-gray-700 dark:text-gray-200 leading-relaxed">
+                                    {entry.detail}
+                                </span>
+                                    {/if}
+                                </div>
+                            </div>
+                        {/if}
+                    {/each}
+                </div>
+            {:else}
+                <p class="text-sm italic text-gray-500 dark:text-gray-400">No contact methods provided.</p>
+            {/if}
+        </div>
+    </GenericSidebarCard>
+{/if}

package/src/lib/components/flow/ExternalNode.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import type {FlowNodeData} from '$shared/flow-types'
+    import {Handle, type NodeProps, Position, type Node} from '@xyflow/svelte'
+    import {getAwsIconPath} from '$lib/utils/awsIcons'
+    import {goto} from '$app/navigation'
+
+    let {
+        data,
+    }: NodeProps<Node<FlowNodeData>> = $props()
+
+    let initials = $derived(data.label
+        ? data.label
+            .split(' ')
+            .map(part => part[0])
+            .join('')
+            .slice(0, 3)
+            .toUpperCase()
+        : 'Svc')
+
+    //Todo: Figure out if we just want to hard-link the data format to the nodes
+    //@ts-ignore
+    let iconPath = $derived(getAwsIconPath(data.serviceType))
+
+    function navigateToExternalGroupPage() {
+        goto(`/group/${data.groupId}`);
+    }
+
+</script>
+
+<Handle type="target" position={Position.Left} id="input" />
+<Handle type="source" position={Position.Right} id="output"/>
+
+<div class="flex items-center gap-3" ondblclick={() => navigateToExternalGroupPage()} role="navigation">
+    {#if iconPath}
+        <img src={iconPath} alt={data.label} class="h-10 w-10 rounded-lg bg-white/5 object-contain"
+             loading="lazy"/>
+    {:else}
+        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-800 text-xs font-semibold">
+            {initials}
+        </div>
+    {/if}
+    <div class="flex-1">
+        <div class="text-sm font-semibold">{data.label}</div>
+    </div>
+</div>

package/src/lib/components/flow/MainGroupNode.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    import type {FlowNodeData} from '$shared/flow-types'
+    import {Handle, type Node, type NodeProps, Position} from '@xyflow/svelte'
+    import {goto} from '$app/navigation'
+
+    let {
+        data,
+        selected = false,
+    }: NodeProps<Node<FlowNodeData>> = $props()
+
+    //On double click, navigate to the group page.
+    const navigateToGroupPage = () => {
+        goto(`/group/${data.groupId}`);
+    }
+
+</script>
+
+
+<Handle type="target" position={Position.Left} id="input" />
+<Handle type="source" position={Position.Right} id="output" />
+<div class="relative" ondblclick={() => navigateToGroupPage()} aria-label="Group node" aria-roledescription="Group node">
+    {data.label}
+</div>
+

package/src/lib/components/flow/ServiceGroupNode.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+
+    import type {FlowNodeData} from '$shared/flow-types'
+    import {type Node, type NodeProps} from '@xyflow/svelte'
+
+    let {
+        data,
+        width,
+        height,
+        selected = false,
+    }: NodeProps<Node<FlowNodeData>> = $props()
+</script>
+
+<!--Todo: Add custom styling depending on what kind of group it is -->
+<div class="custom-group-node" style:width="{width}px" style:height="{height}px">
+    <div class="big-title">{data.label}</div>
+</div>

package/src/lib/components/flow/ServiceNode.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+    import type {FlowNodeData} from '$shared/flow-types'
+    import {Handle, type NodeProps, Position, type Node} from '@xyflow/svelte'
+    import {getAwsIconPath} from '$lib/utils/awsIcons'
+
+
+    let {
+        data,
+    }: NodeProps<Node<FlowNodeData>> = $props()
+
+    let initials = $derived(data.label
+        ? data.label
+            .split(' ')
+            .map(part => part[0])
+            .join('')
+            .slice(0, 3)
+            .toUpperCase()
+        : 'Svc')
+
+    //Todo: Figure out if we just want to hard-link the data format to the nodes
+    //@ts-ignore
+    let iconPath = $derived(getAwsIconPath(data.serviceType))
+</script>
+
+<Handle type="target" position={Position.Left} id="input" />
+<Handle type="source" position={Position.Right} id="output"/>
+
+<div class="flex items-center gap-3">
+    {#if iconPath}
+        <img src={iconPath} alt={data.label} class="h-10 w-10 rounded-lg bg-white/5 object-contain"
+             loading="lazy"/>
+    {:else}
+        <div class="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-800 text-xs font-semibold">
+            {initials}
+        </div>
+    {/if}
+    <div class="flex-1">
+        <div class="text-sm font-semibold">{data.label}</div>
+    </div>
+</div>

package/src/lib/components/flow/SnakeEdge.svelte

@@ -0,0 +1,206 @@
+<script lang="ts">
+    import {BaseEdge, EdgeLabel, type EdgeProps, Position, useEdges, useNodes} from '@xyflow/svelte';
+    import {calculateEdgeOffset, getAbsolutePosition, getNodeDimensions} from '$lib/utils/flow/layout';
+    import {page} from '$app/state';
+    import {routingStore} from '$lib/stores/routingStore';
+    import {onDestroy} from 'svelte';
+
+    let {
+        id,
+        data,
+        source,
+        target,
+        sourceHandleId,
+        targetHandleId,
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+        label,
+        style,
+        selected
+    }: EdgeProps = $props();
+
+    const nodes = useNodes();
+    const edges = useEdges();
+
+    let isConnectedNodeSelected = $derived.by(() => {
+        const sourceNode = nodes.current.find((n) => n.id === source);
+        const targetNode = nodes.current.find((n) => n.id === target);
+        return sourceNode?.selected || targetNode?.selected;
+    });
+
+    let isEffectivelySelected = $derived(selected || isConnectedNodeSelected);
+
+    let sourceOffset = $derived(calculateEdgeOffset(id, nodes.current, edges.current, true));
+    let targetOffset = $derived(calculateEdgeOffset(id, nodes.current, edges.current, false));
+
+    // Register nodes and edges with the routing store
+    $effect(() => {
+        const sourceNode = nodes.current.find(n => n.id === source);
+        const targetNode = nodes.current.find(n => n.id === target);
+        
+        if (sourceNode) {
+            const absPos = getAbsolutePosition(sourceNode.id, nodes.current);
+            const { w, h } = getNodeDimensions(sourceNode);
+            routingStore.registerNode({
+                nodeId: sourceNode.id,
+                absPos,
+                width: w,
+                height: h,
+                isGroup: sourceNode.type === 'serviceGroup'
+            });
+        }
+        
+        if (targetNode) {
+            const absPos = getAbsolutePosition(targetNode.id, nodes.current);
+            const { w, h } = getNodeDimensions(targetNode);
+            routingStore.registerNode({
+                nodeId: targetNode.id,
+                absPos,
+                width: w,
+                height: h,
+                isGroup: targetNode.type === 'serviceGroup'
+            });
+        }
+    });
+
+    $effect(() => {
+        // We rely on XYFlow props for positions, but we apply our calculated offsets
+        let sX = sourceX;
+        let sY = sourceY;
+        let tX = targetX;
+        let tY = targetY;
+
+        if (sourcePosition === Position.Left || sourcePosition === Position.Right) {
+            sY += sourceOffset;
+        } else {
+            sX += sourceOffset;
+        }
+
+        if (targetPosition === Position.Left || targetPosition === Position.Right) {
+            tY += targetOffset;
+        } else {
+            tX += targetOffset;
+        }
+
+        routingStore.registerEdge({
+            edgeId: id,
+            sourceNodeId: source,
+            targetNodeId: target,
+            sourcePos: { x: sX, y: sY },
+            sourceSide: sourcePosition ?? 'right',
+            targetPos: { x: tX, y: tY },
+            targetSide: targetPosition ?? 'left'
+        });
+    });
+
+    onDestroy(() => {
+        routingStore.unregisterEdge(id);
+    });
+
+    // 1. Derive the path and label position
+    let pts = $derived($routingStore[id] || []);
+    
+    let edgePathData = $derived.by(() => {
+        if (!pts || pts.length === 0) {
+            // Fallback if not routed yet
+            return { path: `M ${sourceX} ${sourceY} L ${targetX} ${targetY}`, labelX: (sourceX + targetX) / 2, labelY: (sourceY + targetY) / 2 };
+        }
+
+        // Generate rounded SVG path from points
+        let d = `M ${pts[0].x} ${pts[0].y}`;
+        const radius = 8;
+
+        for (let i = 0; i < pts.length - 1; i++) {
+            const p = pts[i];
+            const next = pts[i + 1];
+            const prev = i > 0 ? pts[i - 1] : null;
+
+            if (prev && next) {
+                // Round this corner
+                const dPrev = { x: p.x - prev.x, y: p.y - prev.y };
+                const dNext = { x: next.x - p.x, y: next.y - p.y };
+                const lenPrev = Math.hypot(dPrev.x, dPrev.y);
+                const lenNext = Math.hypot(dNext.x, dNext.y);
+                const actualRadius = Math.min(radius, lenPrev / 2, lenNext / 2);
+
+                const startPoint = {
+                    x: p.x - (dPrev.x / lenPrev) * actualRadius,
+                    y: p.y - (dPrev.y / lenPrev) * actualRadius
+                };
+                const endPoint = {
+                    x: p.x + (dNext.x / lenNext) * actualRadius,
+                    y: p.y + (dNext.y / lenNext) * actualRadius
+                };
+
+                d += ` L ${startPoint.x} ${startPoint.y} Q ${p.x} ${p.y} ${endPoint.x} ${endPoint.y}`;
+            } else if (i > 0) {
+                d += ` L ${p.x} ${p.y}`;
+            }
+        }
+        d += ` L ${pts[pts.length - 1].x} ${pts[pts.length - 1].y}`;
+
+        // Label position: midpoint of the longest segment
+        let longestLen = -1;
+        let labelPos = { x: (sourceX + targetX) / 2, y: (sourceY + targetY) / 2 };
+        for (let i = 0; i < pts.length - 1; i++) {
+            const dx = pts[i + 1].x - pts[i].x;
+            const dy = pts[i + 1].y - pts[i].y;
+            const len = Math.hypot(dx, dy);
+            if (len > longestLen) {
+                longestLen = len;
+                labelPos = { x: pts[i].x + dx / 2, y: pts[i].y + dy / 2 };
+            }
+        }
+        return { path: d, labelX: labelPos.x, labelY: labelPos.y };
+    });
+
+    let path = $derived(edgePathData.path);
+    let labelPos = $derived({ x: edgePathData.labelX, y: edgePathData.labelY });
+
+    let incomingOrOutgoingOrInternal = $derived.by(() => {
+        const urlGroupId = page.params.groupId;
+
+        if (!urlGroupId) {
+            return null;
+        }
+
+        // Determine if the edge is incoming, outgoing, or internal based on the handle ids, and if the group is the same.
+        //Assume that a node id is in the format of "svc::<group>::<service>".
+        const sourceGroup = source.split('::')[1];
+        const targetGroup = target.split('::')[1];
+
+        if (sourceGroup === targetGroup) {
+            return 'internal';
+        } else if (sourceHandleId === 'output' && sourceGroup === urlGroupId) {
+            return 'outgoing';
+        } else if (targetHandleId === 'input' && targetGroup === urlGroupId) {
+            return 'incoming';
+        } else {
+            return 'internal';
+        }
+    });
+
+</script>
+
+<BaseEdge
+        class={`${isEffectivelySelected ? 'snake-edge-path selected' : 'snake-edge-path'} ${incomingOrOutgoingOrInternal ?? ''}`}
+        {id}
+        {path}
+        {style}
+/>
+
+{#if label}
+    <EdgeLabel>
+        <div
+                style:transform="translate(-50%, -50%) translate({labelPos.x}px, {labelPos.y}px)"
+                class="edge-label"
+                class:selected={isEffectivelySelected}
+        >
+            {label}
+        </div>
+    </EdgeLabel>
+{/if}

package/src/lib/components/flow/index.ts

@@ -0,0 +1,6 @@
+//Export all
+export {default as ExternalNode} from './ExternalNode.svelte';
+export {default as MainGroupNode} from './MainGroupNode.svelte';
+export {default as ServiceNode} from './ServiceNode.svelte';
+export {default as ServiceGroupNode} from './ServiceGroupNode.svelte';
+export {default as SnakeEdge} from './SnakeEdge.svelte';

package/src/lib/components/index.ts

@@ -0,0 +1,12 @@
+export * from './flow';
+export {default as EmptyState} from './EmptyState.svelte';
+export {default as ErrorDisplay} from './ErrorDisplay.svelte';
+export {default as FlowCanvas} from './FlowCanvas.svelte';
+export {default as GenericSidebarCard} from './GenericSidebarCard.svelte';
+export {default as GroupDetailSidebar} from './GroupDetailSidebar.svelte';
+export {default as Header} from './Header.svelte';
+export {default as Legend} from './Legend.svelte';
+export {default as LoadingOverlay} from './LoadingOverlay.svelte';
+export {default as LoadingSpinner} from './LoadingSpinner.svelte';
+export {default as ServiceDetailSidebar} from './ServiceDetailSidebar.svelte';
+export {default as TeamContactCard} from './TeamContactCard.svelte';

package/src/lib/data/connections.ts

@@ -0,0 +1,26 @@
+import type { GroupConnection } from '$shared/types'
+import bakedData from 'virtual:mapper-data'
+
+export async function getConnectionsFromGroup(groupId: string | null | undefined): Promise<GroupConnection[]> {
+  if (!groupId) return []
+  // Not pre-baked, so filter from all groupConnections
+  return (bakedData.groupConnections as GroupConnection[]).filter(c => c.sourceGroup === groupId)
+}
+
+export async function getConnectionsToGroup(groupId: string | null | undefined): Promise<GroupConnection[]> {
+  if (!groupId) return []
+  // Not pre-baked, so filter from all groupConnections
+  return (bakedData.groupConnections as GroupConnection[]).filter(c => c.targetGroup === groupId)
+}
+
+export async function getAllGroupConnections(): Promise<GroupConnection[]> {
+  // Returns all group connections except self connections
+  return (bakedData.groupConnections as GroupConnection[]).filter(
+    c => c.sourceGroup !== c.targetGroup
+  )
+}
+
+export async function getAllGroupConnectionsWithSelf(): Promise<GroupConnection[]> {
+  // Returns all group connections including self connections
+  return bakedData.groupConnections as GroupConnection[]
+}

package/src/lib/data/groups.ts

@@ -0,0 +1,11 @@
+import type { GroupInfo } from '$shared/types'
+import bakedData from 'virtual:mapper-data'
+
+export async function getAllGroups(): Promise<Record<string, GroupInfo>> {
+  return bakedData.groups as Record<string, GroupInfo>;
+}
+
+export async function getGroup(groupId: string | null | undefined): Promise<GroupInfo | null> {
+  if (!groupId) return null;
+  return ((bakedData.groups as Record<string, GroupInfo>)[groupId]) ?? null;
+}

package/src/lib/data/services.ts

@@ -0,0 +1,12 @@
+import type { ExternalGroupServices, ServiceDefinition } from '$shared/types'
+import bakedData from 'virtual:mapper-data'
+
+export async function getServicesByGroup(groupId: string | null | undefined): Promise<ServiceDefinition[]> {
+  if (!groupId) return []
+  return (bakedData.servicesByGroup[groupId] as ServiceDefinition[]) || []
+}
+
+export async function getExternalServicesForGroup(groupId: string | null | undefined): Promise<ExternalGroupServices[]> {
+  if (!groupId) return []
+  return (bakedData.externalServices[groupId] as ExternalGroupServices[]) || []
+}

package/src/lib/data/teams.ts

@@ -0,0 +1,11 @@
+import type { Team } from '$shared/types'
+import bakedData from 'virtual:mapper-data'
+
+export async function getAllTeams(): Promise<Record<string, Team>> {
+  return bakedData.teams as Record<string, Team>;
+}
+
+export async function getTeam(teamId: string | null | undefined): Promise<Team | null> {
+  if (!teamId) return null;
+  return (bakedData.teams[teamId] as Team) ?? null;
+}