@likec4/core 1.21.0 → 1.22.0

package/src/compute-view/utils/view-hash.ts

@@ -11,17 +11,17 @@ export function calcViewLayoutHash<V extends ComputedView>(view: SetOptional<V,
     nodes: pipe(
       view.nodes,
       map(pick(['id', 'title', 'description', 'technology', 'shape', 'icon', 'children'])),
-      mapToObj(({ id, icon, ...node }) => [id, { ...node, icon: isTruthy(icon) ? 'Y' : 'N' }])
+      mapToObj(({ id, icon, ...node }) => [id, { ...node, icon: isTruthy(icon) ? 'Y' : 'N' }]),
     ),
     edges: pipe(
       view.edges,
       map(pick(['source', 'target', 'label', 'description', 'technology', 'dir', 'head', 'tail', 'line'])),
-      mapToObj(({ source, target, ...edge }) => [`${source}:${target}`, edge])
-    )
+      mapToObj(({ source, target, ...edge }) => [`${source}:${target}`, edge]),
+    ),
   }
   view.hash = objectHash(tohash, {
     ignoreUnknown: true,
-    respectType: false
+    respectType: false,
   })
-  return view as V
+  return view as unknown as V
 }

package/src/index.ts

@@ -3,7 +3,7 @@ export {
   defaultTheme,
   ElementColors,
   RelationshipColors,
-} from './colors'
+} from './theme'
 
 export {
   invariant,

package/src/model/LikeC4Model.ts

@@ -357,6 +357,10 @@ export class LikeC4Model<M extends AnyAux = LikeC4Model.Any> {
     }
   }
 
+  public allTags(): ReadonlyArray<C4Tag> {
+    return Array.from(this.#allTags.keys())
+  }
+
   private addElement(element: Element) {
     if (this.#elements.has(element.id)) {
       throw new Error(`Element ${element.id} already exists`)

package/src/{colors → theme}/element.ts

@@ -4,21 +4,21 @@ const blue = {
   fill: '#3b82f6',
   stroke: '#2563eb',
   hiContrast: '#eff6ff',
-  loContrast: '#bfdbfe'
+  loContrast: '#bfdbfe',
 } satisfies ElementThemeColorValues
 
 const sky = {
   fill: '#0284c7',
   stroke: '#0369a1',
   hiContrast: '#f0f9ff',
-  loContrast: '#B6ECF7'
+  loContrast: '#B6ECF7',
 } satisfies ElementThemeColorValues
 
 const slate = {
   fill: '#64748b',
   stroke: '#475569',
   hiContrast: '#f8fafc',
-  loContrast: '#cbd5e1'
+  loContrast: '#cbd5e1',
 } satisfies ElementThemeColorValues
 
 export const ElementColors = {
@@ -36,7 +36,7 @@ export const ElementColors = {
     fill: '#737373',
     stroke: '#525252',
     hiContrast: '#fafafa',
-    loContrast: '#d4d4d4'
+    loContrast: '#d4d4d4',
   },
   red: {
     // fill: colors.red[500],
@@ -53,19 +53,19 @@ export const ElementColors = {
     hiContrast: '#FBD3CB',
     // hiContrast: '#f8fafc',
     // loContrast: '#fdd8d8' // radix black red 12
-    loContrast: '#f5b2a3'
+    loContrast: '#f5b2a3',
   },
   green: {
     fill: '#428a4f',
     stroke: '#2d5d39',
     hiContrast: '#f8fafc',
-    loContrast: '#c2f0c2'
+    loContrast: '#c2f0c2',
   },
   amber: {
     fill: '#A35829',
     stroke: '#7E451D',
     hiContrast: '#FFE0C2',
-    loContrast: '#f9b27c'
+    loContrast: '#f9b27c',
   },
   indigo: {
     // fill: colors.indigo[500],
@@ -75,6 +75,6 @@ export const ElementColors = {
     fill: '#6366f1',
     stroke: '#4f46e5',
     hiContrast: '#eef2ff',
-    loContrast: '#c7d2fe'
-  }
+    loContrast: '#c7d2fe',
+  },
 } as const satisfies ElementThemeColors

package/src/{colors → theme}/index.ts

@@ -10,12 +10,12 @@ export const defaultTheme: LikeC4Theme = {
   shadow: '#0a0a0a',
   sizes: {
     xs: {
-      width: 120,
-      height: 80,
+      width: 180,
+      height: 100,
     },
     sm: {
-      width: 180,
-      height: 110,
+      width: 240,
+      height: 135,
     },
     md: {
       width: 320,
@@ -33,9 +33,9 @@ export const defaultTheme: LikeC4Theme = {
   spacing: {
     xs: 8, // 0.5rem
     sm: 10, // 0.625rem
-    md: 24, // 1.5rem = 16px + 8px
-    lg: 32, // 2rem
-    xl: 48,
+    md: 16, // 1rem
+    lg: 24, // 1.5rem = 16px + 8px
+    xl: 32, // 2rem
   },
   textSizes: {
     xs: 12,

package/src/{colors → theme}/relationships.ts

@@ -3,52 +3,52 @@ import type { RelationshipThemeColors, RelationshipThemeColorValues } from '../t
 const gray = {
   lineColor: '#6E6E6E',
   labelBgColor: '#18191b',
-  labelColor: '#C6C6C6'
+  labelColor: '#C6C6C6',
 } satisfies RelationshipThemeColorValues
 const slate = {
   lineColor: '#64748b', // 500
   labelBgColor: '#0f172a', // 900
-  labelColor: '#cbd5e1' // 300
+  labelColor: '#cbd5e1', // 300
 } satisfies RelationshipThemeColorValues
 
 const blue = {
   lineColor: '#3b82f6', // 500
   labelBgColor: '#172554', // 950
-  labelColor: '#60a5fa' // 400
+  labelColor: '#60a5fa', // 400
 } satisfies RelationshipThemeColorValues
 
 const sky = {
   lineColor: '#0ea5e9', // 500
   labelBgColor: '#082f49', // 950
-  labelColor: '#38bdf8' // 400
+  labelColor: '#38bdf8', // 400
 } satisfies RelationshipThemeColorValues
 
 export const RelationshipColors = {
   amber: {
     lineColor: '#b45309',
     labelBgColor: '#78350f',
-    labelColor: '#FFE0C2'
+    labelColor: '#FFE0C2',
   },
   blue,
   gray,
   green: {
     lineColor: '#15803d', // 700
     labelBgColor: '#052e16', // 950
-    labelColor: '#22c55e' // 500
+    labelColor: '#22c55e', // 500
   },
   indigo: {
     lineColor: '#6366f1', // 500
     labelBgColor: '#1e1b4b', // 950
-    labelColor: '#818cf8' // 400
+    labelColor: '#818cf8', // 400
   },
   muted: slate,
   primary: blue,
   red: {
     lineColor: '#AC4D39',
     labelBgColor: '#b91c1c',
-    labelColor: '#f5b2a3'
+    labelColor: '#f5b2a3',
   },
   secondary: sky,
   sky,
-  slate
+  slate,
 } satisfies RelationshipThemeColors