Diagram component set: future home (own repo vs. nextcloud-vue)

[rubenvdlinde]

Context

We are scaffolding @conduction/diagrams as a subfolder inside this repo (design-system/diagrams/), shipping a set of web components that render brand-strict diagrams: pointy-top hexes, hex prisms, platform overviews, pipelines, side-boxes, honeycomb backgrounds, domain trees.

This is a temporary location so we can ship the design-system today without standing up a new repo. The package needs a long-term home before we publish to npm or use it from production sites.

Decision to make

Pick one of:

Option A, Own repo: ConductionNL/conduction-diagrams

• Pros: clean npm package boundary, independent versioning, can be consumed by any product without pulling in design-system tokens, easy to open-source separately
• Cons: another repo to maintain, design tokens live in design-system so we need a build-time link between the two

Option B, Inside ConductionNL/nextcloud-vue

• Pros: matches the existing shared-Vue-lib pattern, one fewer repo, components ship alongside other shared Nextcloud-app primitives
• Cons: ties the diagrams to Vue 2 and the Nextcloud-app context. Web components are framework-agnostic by design, bundling into a Vue lib defeats the point. Docusaurus consumers would pull in nextcloud-vue just for diagrams.

Option C, Stay in ConductionNL/design-system

• Pros: zero migration; diagrams ship with the kit they belong to
• Cons: design-system is currently HTML-only and GitHub-Pages-deployed; npm publishing from here changes the repo's role

Recommendation

Option A, once the API is stable (~5 components in, probably after cn-platform and cn-pipeline land). Until then, keep it here as a subfolder.

Why diagrams?

Reusable across:

• Design system (this repo), kit demonstrations
• conduction.nl (future Docusaurus build), homepage hero, product overviews
• Per-product Docusaurus sites, architecture diagrams in docs
• OpenCatalogi (CMS), render diagrams from structured content
• Internal apps, any Nextcloud-Vue app needing platform/pipeline visualisations

Component set planned

• cn-hex, pointy-top hex primitive (label + icon)
• cn-hex-prism, 3D isometric prism
• cn-platform, Nextcloud kernel + orbiting apps
• cn-pipeline, horizontal flow with arrows
• cn-side-box, rectangle-feed-prism pattern
• cn-honeycomb-bg, parallax background
• cn-domain-tree, domain/subdomain map (for new identity/domains.html)

Tech stack

• Vanilla customElements initially, Lit (MIT, ~5kb) when reactive-prop complexity demands it
• CSS + Web Animations API initially, Motion One (MIT, ~3kb) for orchestrated sequences
• ES modules, no build step until npm publish
• Brand-strict: every shape a hex, fixed palette, no gradients

When to revisit

After cn-platform ships (probably 5-7 components in) and we have a real consumer outside this repo (the new identity/domains page, then conduction.nl).