@shortlink-org/portolan 0.2.2 → 0.2.4

package/src/likec4/flow-edges.ts

@@ -3,10 +3,9 @@
 // id across, so the two are paired by position.
 //
 // That is sound because it is the same walk twice: the generator emits steps in
-// the order walkSteps visits them — a step, then each branch of a parallel,
-// then each branch of an alt, then the body of a loop — and the view keeps that
-// order in its edge list. If the two lists ever differ in length the pairing is
-// abandoned rather than guessed at, and the diagram simply stops highlighting.
+// catalog order and this module inserts the same contract-response edges in the
+// same places. If the two lists ever differ in length the pairing is abandoned
+// rather than guessed at, and the diagram simply stops highlighting.
 
 import type { Flow } from "../catalog";
 import { walkSteps } from "../catalog";
@@ -15,13 +14,16 @@ import { hiddenStepIds } from "../flow/cross-context";
 export interface EdgeStepPairing {
   /** LikeC4 edge id -> catalog step id */
   stepOf: Map<string, string>;
-  /** catalog step id -> LikeC4 edge id */
+  /** catalog step id -> its primary LikeC4 edge id */
   edgeOf: Map<string, string>;
+  /** catalog step id -> every edge it draws, including a contract response */
+  edgesOf: Map<string, string[]>;
 }
 
 export const EMPTY_PAIRING: EdgeStepPairing = {
   stepOf: new Map(),
   edgeOf: new Map(),
+  edgesOf: new Map(),
 };
 
 export function pairEdgesToSteps(
@@ -31,13 +33,17 @@ export function pairEdgesToSteps(
   if (edgeIds.length !== stepIds.length) return EMPTY_PAIRING;
   const stepOf = new Map<string, string>();
   const edgeOf = new Map<string, string>();
+  const edgesOf = new Map<string, string[]>();
   edgeIds.forEach((edgeId, i) => {
     const stepId = stepIds[i];
     if (stepId === undefined) return;
     stepOf.set(edgeId, stepId);
-    edgeOf.set(stepId, edgeId);
+    if (!edgeOf.has(stepId)) edgeOf.set(stepId, edgeId);
+    const edges = edgesOf.get(stepId) ?? [];
+    edges.push(edgeId);
+    edgesOf.set(stepId, edges);
   });
-  return { stepOf, edgeOf };
+  return { stepOf, edgeOf, edgesOf };
 }
 
 /**
@@ -87,3 +93,33 @@ export function drawnStepIds(flow: Flow, crossOnly: boolean): string[] {
   const hidden = hiddenStepIds(flow);
   return steps.filter((s) => !hidden.has(s.id)).map((s) => s.id);
 }
+
+/**
+ * One step id per generated edge, including contract responses synthesized by
+ * the LikeC4 generator. Nested RPCs return immediately; the actor request that
+ * opened the flow returns after its final step.
+ */
+export function drawnEdgeStepIds(
+  flow: Flow,
+  crossOnly: boolean,
+  responseStepIds: ReadonlySet<string>,
+): string[] {
+  const steps = walkSteps(flow.steps);
+  const actorIds = new Set(
+    flow.participants.filter((p) => p.kind === "actor").map((p) => p.id),
+  );
+  const deferred = steps.find(
+    (step) =>
+      step.kind === "rpc" &&
+      actorIds.has(step.from) &&
+      responseStepIds.has(step.id),
+  )?.id;
+  const drawn = drawnStepIds(flow, crossOnly);
+  const out: string[] = [];
+  for (const stepId of drawn) {
+    out.push(stepId);
+    if (stepId !== deferred && responseStepIds.has(stepId)) out.push(stepId);
+  }
+  if (deferred && drawn.includes(deferred)) out.push(deferred);
+  return out;
+}

package/src/likec4/view-index.ts

@@ -8,7 +8,9 @@
 import { pickViewBounds } from "likec4/react";
 import { likec4model } from "./generated";
 import type { Flow } from "../catalog";
-import { drawnStepIds, pairEdgesToSteps } from "./flow-edges";
+import { index } from "../data";
+import { flowAnswers } from "../flow/answers";
+import { drawnEdgeStepIds, pairEdgesToSteps } from "./flow-edges";
 import type { EdgeStepPairing } from "./flow-edges";
 import { EMPTY_PAIRING } from "./flow-edges";
 import { flowCrossViewId, flowViewId } from "./ids";
@@ -70,8 +72,12 @@ export function flowPairing(flow: Flow, crossOnly: boolean): EdgeStepPairing {
   const viewId = crossOnly ? flowCrossViewId(flow) : flowViewId(flow);
   const cached = pairings.get(viewId);
   if (cached) return cached;
+  const responseStepIds = new Set(flowAnswers(index, flow).keys());
   const pairing = shapeOf(viewId).edgeIds.length
-    ? pairEdgesToSteps(shapeOf(viewId).edgeIds, drawnStepIds(flow, crossOnly))
+    ? pairEdgesToSteps(
+        shapeOf(viewId).edgeIds,
+        drawnEdgeStepIds(flow, crossOnly, responseStepIds),
+      )
     : EMPTY_PAIRING;
   pairings.set(viewId, pairing);
   return pairing;

package/src/merge.test.ts

@@ -181,6 +181,52 @@ describe("mergeCatalogs", () => {
     expect(service?.provides.map((p) => p.id)).toEqual(["auth.v1.Users"]);
   });
 
+  it("retains and unions vendored proto descriptors across service fragments", () => {
+    const first = context("shop", ["shop.oms"]);
+    first.services[0]!.copies = [
+      {
+        id: "pricing.v1.Pricing",
+        source: "pricing.proto",
+        methods: [{ name: "GetQuote" }],
+        enums: [
+          {
+            name: "Status",
+            values: [{ name: "STATUS_UNSPECIFIED", number: 0 }],
+          },
+        ],
+      },
+    ];
+    const second = context("shop", ["shop.oms"]);
+    second.services[0]!.copies = [
+      {
+        id: "pricing.v1.Pricing",
+        source: "pricing.proto",
+        methods: [{ name: "WatchPrices" }],
+        enums: [
+          {
+            name: "Status",
+            values: [{ name: "STATUS_READY", number: 1 }],
+          },
+        ],
+      },
+    ];
+
+    const merged = mergeCatalogs([
+      source("a.json", { contexts: [first] }),
+      source("b.json", { contexts: [second] }),
+    ]);
+    const copy = merged.catalog.contexts[0]?.services[0]?.copies?.[0];
+
+    expect(copy?.methods.map((method) => method.name)).toEqual([
+      "GetQuote",
+      "WatchPrices",
+    ]);
+    expect(copy?.enums?.[0]?.values.map((value) => value.name)).toEqual([
+      "STATUS_UNSPECIFIED",
+      "STATUS_READY",
+    ]);
+  });
+
   it("unions a service's commands by the line to type", () => {
     const domain = context("shop", ["shop.cart"]);
     domain.services = domain.services.map((s) => ({
@@ -711,6 +757,29 @@ describe("mergeCatalogs: schema modules", () => {
     // came from.
     expect(channels?.[0]?.source).toBe("bus/asyncapi.yaml");
   });
+
+  it("keeps a message encoding and reports sources that disagree about it", () => {
+    const first = context("shop", ["shop.cart"]);
+    first.services[0]!.channels = [{
+      address: "shop.cart.basket",
+      messages: [{ name: "cart.BasketCreated", direction: "send", encoding: "msgpack", contentType: "application/msgpack" }],
+    }];
+    const second = context("shop", ["shop.cart"]);
+    second.services[0]!.channels = [{
+      address: "shop.cart.basket",
+      messages: [{ name: "cart.BasketCreated", direction: "send", encoding: "json", contentType: "application/json" }],
+    }];
+
+    const merged = mergeCatalogs([
+      source("a-msgpack.json", { contexts: [first] }),
+      source("b-json.json", { contexts: [second] }),
+    ]);
+    const message = merged.catalog.contexts[0]!.services[0]!.channels![0]!.messages[0]!;
+    expect(message.encoding).toBe("msgpack");
+    expect(message.contentType).toBe("application/msgpack");
+    expect(merged.conflicts.map((conflict) => conflict.message).join(" ")).toMatch(/encoding json.*msgpack/);
+    expect(merged.conflicts.map((conflict) => conflict.message).join(" ")).toMatch(/contentType application\/json.*application\/msgpack/);
+  });
 });
 
 describe("a second source that has seen the flow run", () => {

package/src/merge.ts

@@ -442,6 +442,7 @@ function foldMaps(catalog: Catalog, stores: Store[]): Store[] {
       if (!aggregate) return table;
       return {
         ...table,
+        ...(table.accesses ? { accesses: table.accesses.map((access) => ({ ...access })) } : {}),
         columns: table.columns.map((column) => {
           if (!column.maps) return column;
           const maps = fold(aggregate, column.maps);
@@ -473,8 +474,11 @@ function mergeService(
   if (!existing) {
     services.set(incoming.id, {
       ...incoming,
-      provides: [...incoming.provides],
+      provides: incoming.provides.map(copyInterface),
       consumes: [...incoming.consumes],
+      ...(incoming.copies
+        ? { copies: incoming.copies.map(copyInterface) }
+        : {}),
       aggregates: incoming.aggregates.map(copyAggregate),
       ...(incoming.stores ? { stores: [...incoming.stores] } : {}),
       ...(incoming.modules ? { modules: [...incoming.modules] } : {}),
@@ -534,6 +538,11 @@ function mergeService(
 
   mergeInterfaces(existing.provides, incoming.provides);
   appendNew(existing.consumes, incoming.consumes, (c) => c.id, raise);
+  if (incoming.copies?.length) {
+    const copies = existing.copies ?? [];
+    mergeInterfaces(copies, incoming.copies);
+    existing.copies = copies;
+  }
   mergeAggregates(existing.aggregates, incoming.aggregates);
 
   if (incoming.stores?.length) {
@@ -600,6 +609,21 @@ function mergeService(
           mine.messages,
           theirs.messages,
           (m) => `${m.direction} ${m.name}`,
+          (held, offered) => {
+            for (const field of ["encoding", "contentType"] as const) {
+              if (!held[field] && offered[field]) {
+                held[field] = offered[field];
+              } else if (held[field] && offered[field] && held[field] !== offered[field]) {
+                conflicts.push({
+                  path,
+                  where: incoming.id,
+                  message: `message "${held.name}" on channel "${mine.address}" of service "${incoming.id}" has ${field} ${offered[field]} here and ${held[field]} in ${owner}; the first one is used`,
+                });
+              }
+            }
+
+            return undefined;
+          },
         );
 
         // Mutated in place: the channel that was here keeps its prose and its
@@ -612,7 +636,7 @@ function mergeService(
 }
 
 function copyChannel(channel: Channel): Channel {
-  return { ...channel, messages: [...channel.messages] };
+  return { ...channel, messages: channel.messages.map((message) => ({ ...message })) };
 }
 
 /**
@@ -713,6 +737,24 @@ function mergeInterfaces(target: RpcService[], incoming: RpcService[]): void {
       }
     }
     if (messages.length > 0) mine.messages = messages;
+
+    const enums = mine.enums ?? [];
+    for (const item of theirs.enums ?? []) {
+      const existing = enums.find((candidate) => candidate.name === item.name);
+      if (!existing) {
+        enums.push({
+          ...item,
+          values: item.values.map((value) => ({ ...value })),
+        });
+        continue;
+      }
+      appendNew(
+        existing.values,
+        item.values.map((value) => ({ ...value })),
+        (value) => value.name,
+      );
+    }
+    if (enums.length > 0) mine.enums = enums;
   }
 }
 
@@ -736,6 +778,14 @@ function copyInterface(provided: RpcService): RpcService {
           })),
         }
       : {}),
+    ...(provided.enums
+      ? {
+          enums: provided.enums.map((item) => ({
+            ...item,
+            values: item.values.map((value) => ({ ...value })),
+          })),
+        }
+      : {}),
   };
 }
 

package/src/pages/CatalogFailure.tsx

@@ -26,8 +26,8 @@ const HINTS: { test: RegExp; hint: string }[] = [
     hint: "A step names a lane the flow never declared. Add the service to the flow's `participants`, or point the step at one that is already there.",
   },
   {
-    test: /resolves to neither an Event nor an RpcCall/,
-    hint: "Either the ref is stale — the event was renamed or removed — or the step really does point at something outside the catalog, in which case its status belongs as `unresolved`.",
+    test: /resolves to neither an Event, an RpcCall nor a method/,
+    hint: "Either the ref is stale — the event or RPC method was renamed or removed — or the step really does point at something outside the catalog, in which case its status belongs as `unresolved`.",
   },
   {
     test: /must have id/,

package/src/pages/Settings.tsx

@@ -3,13 +3,10 @@ import { createContext, useCallback, useContext, useEffect, useState } from "rea
 import { Link, Navigate, NavLink, Route, Routes, useLocation } from "react-router";
 import {
   ArrowLeft,
-  ArrowRight,
-  BookOpen,
   Box,
   Check,
   ChevronDown,
   CircleAlert,
-  CircleDot,
   FolderGit2,
   GitBranch,
   KeyRound,
@@ -21,7 +18,6 @@ import {
   Trash2,
   X,
 } from "lucide-react";
-import type { Variants } from "motion/react";
 import { catalog, catalogSources } from "../data";
 import { useToastStore } from "../app/toast";
 import { absoluteTime, plural, relativeTime } from "../lib/format";
@@ -59,15 +55,10 @@ import { Modal } from "../components/Overlay";
 import { MachineDocs } from "../components/MachineDocs";
 import { DeliverySettings } from "./settings/DeliverySettings";
 import { PreferencesSettings } from "./settings/PreferencesSettings";
+import { AboutSettings } from "./settings/AboutSettings";
+import { IntegrationsSettings } from "./settings/IntegrationsSettings";
 import { CatEmptyState, CatIllustration } from "../components/CatIllustration";
 import { CommitLink } from "../components/CommitLink";
-import { m, transitions } from "../lib/motion";
-import {
-  PRODUCT_ISSUES,
-  PRODUCT_LICENSE,
-  PRODUCT_README,
-  PRODUCT_REPOSITORY,
-} from "../lib/product";
 
 type Health = "healthy" | "changed" | "failed" | "unchecked";
 type ProjectSource = ProjectDraft["source"];
@@ -964,6 +955,7 @@ const SETTINGS_LINKS = [
   ["Projects", paths.settingsProjects()],
   ["Pipeline", paths.settingsPipeline()],
   ["Delivery", paths.settingsDelivery()],
+  ["Integrations", paths.settingsIntegrations()],
   ["Preferences", paths.settingsPreferences()],
   ["About", paths.settingsAbout()],
 ] as const;
@@ -1056,6 +1048,10 @@ function OverviewSettings({ local, onGenerate }: { local: boolean; onGenerate: (
           <div className="font-semibold text-ink">Delivery</div>
           <p className="mt-1 text-muted">Install review checks and static catalog publishing for GitHub or GitLab.</p>
         </Link>
+        <Link to={paths.settingsIntegrations()} className="card">
+          <div className="font-semibold text-ink">Integrations</div>
+          <p className="mt-1 text-muted">Connect operational tools such as Kafka UI to the catalog.</p>
+        </Link>
         <Link to={paths.settingsPreferences()} className="card">
           <div className="font-semibold text-ink">Preferences</div>
           <p className="mt-1 text-muted">Theme, row density, source editor and Ask the catalog.</p>
@@ -1117,135 +1113,21 @@ function PipelineSettings() {
   );
 }
 
-const ABOUT_CARD_MOTION: Variants = {
-  hidden: { opacity: 0, y: 8 },
-  shown: {
-    opacity: 1,
-    y: 0,
-    transition: { ...transitions.page, staggerChildren: 0.05 },
-  },
-  hover: {},
-};
-
-const ABOUT_COPY_MOTION: Variants = {
-  hidden: { opacity: 0, y: 6 },
-  shown: { opacity: 1, y: 0, transition: transitions.panel },
-};
-
-const ABOUT_CAT_MOTION: Variants = {
-  hidden: { opacity: 0, x: 18, rotate: 3 },
-  shown: {
-    opacity: 1,
-    x: 0,
-    rotate: 0,
-    transition: transitions.narrative,
-  },
-  hover: {
-    y: -7,
-    rotate: -2,
-    scale: 1.035,
-    transition: transitions.settle,
-  },
-};
-
-function AboutSettings() {
-  return (
-    <section>
-      <div className="grid gap-grid lg:grid-cols-[minmax(0,1.25fr)_minmax(17rem,0.75fr)]">
-        <m.div
-          data-about-card
-          className="card grid items-center gap-4 sm:grid-cols-[minmax(0,1fr)_180px]"
-          variants={ABOUT_CARD_MOTION}
-          initial="hidden"
-          animate="shown"
-          whileHover="hover"
-        >
-          <m.div
-            className="flex flex-col items-start"
-            variants={ABOUT_COPY_MOTION}
-          >
-            <p className="max-w-prose text-muted">
-              Architecture from code and evidence. Product source,
-              documentation, releases and issue tracking live in the public
-              GitHub repository.
-            </p>
-            <div className="mt-5 flex flex-wrap gap-2">
-              <Link to={paths.landing()} className="product-primary">
-                Product page <ArrowRight size={15} aria-hidden />
-              </Link>
-              <a
-                href={PRODUCT_REPOSITORY}
-                target="_blank"
-                rel="noreferrer"
-                className="tbtn text-ink"
-              >
-                <GitBranch size={15} aria-hidden /> View product on GitHub
-              </a>
-            </div>
-          </m.div>
-          <m.div
-            data-about-cat
-            className="h-44 w-full justify-self-center sm:h-52"
-            variants={ABOUT_CAT_MOTION}
-          >
-            <CatIllustration scene="about" className="h-full w-full" />
-          </m.div>
-        </m.div>
-        <m.div
-          className="card"
-          initial={{ opacity: 0, y: 8 }}
-          animate={{ opacity: 1, y: 0 }}
-          transition={{ ...transitions.page, delay: 0.06 }}
-        >
-          <div className="label mb-2">resources</div>
-          <div className="divide-y divide-line">
-            <a
-              href={PRODUCT_README}
-              target="_blank"
-              rel="noreferrer"
-              className="flex items-center gap-2 py-2.5 text-muted transition-colors hover:text-ink"
-            >
-              <BookOpen size={15} aria-hidden className="shrink-0" />
-              Documentation
-            </a>
-            <a
-              href={PRODUCT_ISSUES}
-              target="_blank"
-              rel="noreferrer"
-              className="flex items-center gap-2 py-2.5 text-muted transition-colors hover:text-ink"
-            >
-              <CircleDot size={15} aria-hidden className="shrink-0" />
-              Issues and feedback
-            </a>
-            <a
-              href={PRODUCT_LICENSE}
-              target="_blank"
-              rel="noreferrer"
-              className="flex items-center gap-2 py-2.5 text-muted transition-colors hover:text-ink"
-            >
-              <ShieldCheck size={15} aria-hidden className="shrink-0" />
-              MIT License
-            </a>
-          </div>
-        </m.div>
-      </div>
-    </section>
-  );
-}
 
 function SettingsContent({ local, onAdd, onRemove, onGenerate }: { local: boolean; onAdd: (source: ProjectSource) => void; onRemove: (project: SetupProject) => void; onGenerate: () => void }) {
   const pathname = useLocation().pathname.replace(/\/$/, "");
   const overview = pathname === paths.settings();
   const about = pathname === paths.settingsAbout();
+  const browserIntegration = pathname === paths.settingsIntegrations();
   return (
     <div className="h-full overflow-y-auto p-gutter">
       <div className="max-w-table">
         <div className="flex flex-wrap items-start justify-between gap-3">
           <div>
             <div className="flex items-center gap-2"><h1 className="text-lg font-semibold">Settings</h1>{local ? <span className="chip status-verified">local mode</span> : null}</div>
-            <p className="mt-1 max-w-prose text-muted">Configure projects, extraction, delivery automation and local preferences. {local ? "This local session can write reviewed changes." : "Build configuration is read-only here."}</p>
+            <p className="mt-1 max-w-prose text-muted">Configure projects, extraction, delivery automation, integrations and local preferences. {local ? "This local session can write reviewed changes." : "Build configuration is read-only here."}</p>
           </div>
-          {local && !overview && !about ? <button type="button" className="product-primary" onClick={onGenerate}><Play size={15} /> Preview generated diff</button> : null}
+          {local && !overview && !about && !browserIntegration ? <button type="button" className="product-primary" onClick={onGenerate}><Play size={15} /> Preview generated diff</button> : null}
         </div>
         <SettingsNav />
         <div className="mt-section">
@@ -1254,12 +1136,13 @@ function SettingsContent({ local, onAdd, onRemove, onGenerate }: { local: boolea
             <Route path="projects" element={<ProjectsSettings local={local} onAdd={onAdd} onRemove={onRemove} />} />
             <Route path="pipeline" element={<PipelineSettings />} />
             <Route path="delivery" element={<section><SectionTitle right={local ? "preview before writing" : "local mode required"}>Delivery presets</SectionTitle><DeliverySettings local={local} /></section>} />
+            <Route path="integrations" element={<IntegrationsSettings />} />
             <Route path="preferences" element={<PreferencesSettings />} />
             <Route path="about" element={<AboutSettings />} />
             <Route path="*" element={<Navigate to={paths.settings()} replace />} />
           </Routes>
         </div>
-        {!about ? <div className="mono mt-section flex items-center gap-2 pb-section text-muted"><Box size={14} aria-hidden />{local ? "Changes are written only after preview; generated files remain reviewable in git." : "Configuration is embedded at build time; changing it requires a new catalog build."}</div> : null}
+        {!about ? <div className="mono mt-section flex items-center gap-2 pb-section text-muted"><Box size={14} aria-hidden />{browserIntegration ? "Integration settings stay in this browser and do not change the generated catalog." : local ? "Changes are written only after preview; generated files remain reviewable in git." : "Configuration is embedded at build time; changing it requires a new catalog build."}</div> : null}
       </div>
     </div>
   );

package/src/pages/settings/AboutSettings.tsx

@@ -0,0 +1,129 @@
+import { ArrowRight, BookOpen, CircleDot, GitBranch, ShieldCheck } from "lucide-react";
+import type { Variants } from "motion/react";
+import { Link } from "react-router";
+
+import { CatIllustration } from "../../components/CatIllustration";
+import { m, transitions } from "../../lib/motion";
+import {
+  PRODUCT_ISSUES,
+  PRODUCT_LICENSE,
+  PRODUCT_README,
+  PRODUCT_REPOSITORY,
+} from "../../lib/product";
+import { paths } from "../../routes";
+
+const ABOUT_CARD_MOTION: Variants = {
+  hidden: { opacity: 0, y: 8 },
+  shown: {
+    opacity: 1,
+    y: 0,
+    transition: { ...transitions.page, staggerChildren: 0.05 },
+  },
+  hover: {},
+};
+
+const ABOUT_COPY_MOTION: Variants = {
+  hidden: { opacity: 0, y: 6 },
+  shown: { opacity: 1, y: 0, transition: transitions.panel },
+};
+
+const ABOUT_CAT_MOTION: Variants = {
+  hidden: { opacity: 0, x: 18, rotate: 3 },
+  shown: {
+    opacity: 1,
+    x: 0,
+    rotate: 0,
+    transition: transitions.narrative,
+  },
+  hover: {
+    y: -7,
+    rotate: -2,
+    scale: 1.035,
+    transition: transitions.settle,
+  },
+};
+
+export function AboutSettings() {
+  return (
+    <section>
+      <div className="grid gap-grid lg:grid-cols-[minmax(0,1.25fr)_minmax(17rem,0.75fr)]">
+        <m.div
+          data-about-card
+          className="card grid items-center gap-4 sm:grid-cols-[minmax(0,1fr)_180px]"
+          variants={ABOUT_CARD_MOTION}
+          initial="hidden"
+          animate="shown"
+          whileHover="hover"
+        >
+          <m.div
+            className="flex flex-col items-start"
+            variants={ABOUT_COPY_MOTION}
+          >
+            <p className="max-w-prose text-muted">
+              Architecture from code and evidence. Product source,
+              documentation, releases and issue tracking live in the public
+              GitHub repository.
+            </p>
+            <div className="mt-5 flex flex-wrap gap-2">
+              <Link to={paths.landing()} className="product-primary">
+                Product page <ArrowRight size={15} aria-hidden />
+              </Link>
+              <a
+                href={PRODUCT_REPOSITORY}
+                target="_blank"
+                rel="noreferrer"
+                className="tbtn text-ink"
+              >
+                <GitBranch size={15} aria-hidden /> View product on GitHub
+              </a>
+            </div>
+          </m.div>
+          <m.div
+            data-about-cat
+            className="h-44 w-full justify-self-center sm:h-52"
+            variants={ABOUT_CAT_MOTION}
+          >
+            <CatIllustration scene="about" className="h-full w-full" />
+          </m.div>
+        </m.div>
+        <m.div
+          className="card"
+          initial={{ opacity: 0, y: 8 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ ...transitions.page, delay: 0.06 }}
+        >
+          <div className="label mb-2">resources</div>
+          <div className="divide-y divide-line">
+            <a
+              href={PRODUCT_README}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-2 py-2.5 text-muted transition-colors hover:text-ink"
+            >
+              <BookOpen size={15} aria-hidden className="shrink-0" />
+              Documentation
+            </a>
+            <a
+              href={PRODUCT_ISSUES}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-2 py-2.5 text-muted transition-colors hover:text-ink"
+            >
+              <CircleDot size={15} aria-hidden className="shrink-0" />
+              Issues and feedback
+            </a>
+            <a
+              href={PRODUCT_LICENSE}
+              target="_blank"
+              rel="noreferrer"
+              className="flex items-center gap-2 py-2.5 text-muted transition-colors hover:text-ink"
+            >
+              <ShieldCheck size={15} aria-hidden className="shrink-0" />
+              MIT License
+            </a>
+          </div>
+        </m.div>
+      </div>
+    </section>
+  );
+}