@likec4/core 1.34.2 → 1.36.0

package/src/theme/__test__/theme-index.ts

@@ -0,0 +1,29 @@
+import type { HexColor } from "../../types";
+
+export const lightValue = {
+      elements: {
+        fill: "#2ec2fb" as HexColor,
+        stroke: "#1fabe1" as HexColor,
+        hiContrast: "#00002d" as HexColor,
+        loContrast: "#00153d" as HexColor,
+      },
+      relationships: {
+        lineColor: "#4ccdfb" as HexColor,
+        labelColor: "#6fd8fc" as HexColor,
+        labelBgColor: "#0084b2" as HexColor,
+      },
+    }
+
+export const darkValue = {
+      elements: {
+        fill: "#2c40dc" as HexColor,
+        stroke: "#1f32c4" as HexColor,
+        hiContrast: "#ffffff" as HexColor,
+        loContrast: "#fffeff" as HexColor,
+      },
+      relationships: {
+        lineColor: "#5362e1" as HexColor,
+        labelColor: "#7a87e9" as HexColor,
+        labelBgColor: "#0a259c" as HexColor,
+      },
+    }

package/src/theme/element.ts

@@ -29,30 +29,15 @@ export const ElementColors = {
   muted: slate,
   slate,
   gray: {
-    // fill: colors.neutral[500],
-    // stroke: colors.neutral[600],
-    // hiContrast: colors.neutral[50],
-    // loContrast: colors.neutral[200],
     fill: '#737373',
     stroke: '#525252',
     hiContrast: '#fafafa',
     loContrast: '#d4d4d4',
   },
   red: {
-    // fill: colors.red[500],
-    // stroke: colors.red[600],
-    // hiContrast: colors.red[50],
-    // loContrast: colors.red[200],
     fill: '#AC4D39',
-    // fill: '#b54548',
     stroke: '#853A2D',
-    // hiContrast: '#fef2f2',
-    // loContrast: '#fecaca',
-    // hiContrast: '#191111', // colors.gray[900],
-    // loContrast: '#3b1219' // colors.gray[800],
     hiContrast: '#FBD3CB',
-    // hiContrast: '#f8fafc',
-    // loContrast: '#fdd8d8' // radix black red 12
     loContrast: '#f5b2a3',
   },
   green: {
@@ -68,10 +53,6 @@ export const ElementColors = {
     loContrast: '#f9b27c',
   },
   indigo: {
-    // fill: colors.indigo[500],
-    // stroke: colors.indigo[600],
-    // hiContrast: colors.indigo[50],
-    // loContrast: colors.indigo[200],
     fill: '#6366f1',
     stroke: '#4f46e5',
     hiContrast: '#eef2ff',

package/src/theme/index.ts

@@ -1,7 +1,13 @@
 import { generateColors } from '@mantine/colors-generator'
+import chroma from 'chroma-js';
 import type { ColorLiteral, HexColor, LikeC4Theme, ThemeColorValues } from '../types'
 import { ElementColors } from './element'
 import { RelationshipColors } from './relationships'
+import { isDeepEqual } from 'remeda'
+
+const CONTRAST_MIN_WITH_FOREGROUND = 60
+const CONTRAST_START_TONE_DIFFERENCE = 2
+const CONTRAST_STEP_TONE_DIFFERENCE = 1
 
 export const defaultTheme: LikeC4Theme = {
   elements: ElementColors,
@@ -57,12 +63,15 @@ export function computeColorValues(color: ColorLiteral): ThemeColorValues {
   if (color.match(/^#([0-9a-f]{3}){1,2}$/i)) {
     const colors = generateColors(color)
 
+    const fillColor = colors[6]
+    const contrastedColors = getContrastedColorsAPCA(fillColor)
+    
     return {
       elements: {
-        fill: colors[6] as HexColor,
+        fill: fillColor as HexColor,
         stroke: colors[7] as HexColor,
-        hiContrast: colors[0] as HexColor,
-        loContrast: colors[1] as HexColor,
+        hiContrast: contrastedColors[0] as HexColor,
+        loContrast: contrastedColors[1] as HexColor,
       },
       relationships: {
         lineColor: colors[4] as HexColor,
@@ -78,4 +87,41 @@ export function computeColorValues(color: ColorLiteral): ThemeColorValues {
   }
 }
 
+function getContrastedColorsAPCA(refColor: string): [string, string] {
+  const refColorChroma = chroma(refColor)
+
+  // Start with 2 steps tone difference in the CIELAB color space from reference
+  let lightColorRgb = refColorChroma.brighten(CONTRAST_START_TONE_DIFFERENCE);
+  let darkColorRgb = refColorChroma.darken(CONTRAST_START_TONE_DIFFERENCE);
+
+  let previousLight
+  let previousDark
+  let contrastWithLight
+  let contrastWithDark
+  do {
+    // Store previous colors for loop condition
+    previousLight = lightColorRgb
+    previousDark = darkColorRgb
+
+    // Change tone by 1 step each loop
+    lightColorRgb = lightColorRgb.brighten(CONTRAST_STEP_TONE_DIFFERENCE)
+    darkColorRgb = darkColorRgb.darken(CONTRAST_STEP_TONE_DIFFERENCE)
+
+    // Calculate contrast of each color with the reference color
+    contrastWithLight = chroma.contrastAPCA(refColorChroma, lightColorRgb);
+    contrastWithDark = chroma.contrastAPCA(refColorChroma, darkColorRgb);
+  }
+  // Stop if one of the contrast is high enough or if we reach max value for each (aka when they are equal between two rounds)
+  while (Math.abs(contrastWithLight) < CONTRAST_MIN_WITH_FOREGROUND
+    && Math.abs(contrastWithDark) < CONTRAST_MIN_WITH_FOREGROUND
+    && (!isDeepEqual(lightColorRgb, previousLight) || !isDeepEqual(darkColorRgb, previousDark)))
+
+  // Choose the max contrast between the two
+  if (Math.abs(contrastWithLight) > Math.abs(contrastWithDark)) {
+    return [lightColorRgb.brighten(0.4).hex(), lightColorRgb.hex()]
+  } else {
+    return [darkColorRgb.darken(0.4).hex(), darkColorRgb.hex()]
+  }
+}
+
 export { ElementColors, RelationshipColors }

package/src/types/_aux.ts

@@ -149,6 +149,12 @@ export type toLayouted<A> = A extends Aux<any, infer E, infer D, infer V, infer
  */
 export type ProjectId<A> = A extends infer T extends Any ? Coalesce<T['ProjectId']> : never
 
+export type setProject<A, P extends string> =
+  // dprint-ignore
+  A extends Aux<infer S, infer E, infer D, infer V, any, infer Spec>
+      ? Aux<S, E, D, V, P, Spec>
+      : never
+
 /**
  * Element FQN from Aux as branded type
  */

package/src/types/index.ts

@@ -25,6 +25,7 @@ export * from './model-dump'
 export * from './model-logical'
 export * from './model-spec'
 export * from './operators'
+export * from './project'
 export * from './scalar'
 export * from './styles'
 export * from './view'

package/src/types/model-data.ts

@@ -7,11 +7,13 @@ import type { ModelGlobals } from './global'
 import type { DeploymentElement, DeploymentRelationship } from './model-deployment'
 import type { Element, Relationship } from './model-logical'
 import type { Specification } from './model-spec'
+import type { LikeC4Project } from './project'
 import type * as scalar from './scalar'
 import type { ComputedView, LayoutedView, ParsedView } from './view'
 
 interface BaseLikeC4ModelData<A extends aux.Any> {
   projectId: aux.ProjectId<A>
+  project: LikeC4Project
   specification: Specification<A>
   elements: Record<aux.ElementId<A>, Element<A>>
   deployments: {

package/src/types/model-dump.ts

@@ -39,6 +39,7 @@ export type SpecTypesFromDump<J> = J extends SpecificationDump ? aux.SpecAux<
 export type LikeC4ModelDump = {
   [_stage]?: 'computed' | 'layouted'
   projectId?: string
+  project?: ProjectDump
   specification: SpecificationDump
   elements?: {
     [kind: string]: object
@@ -61,12 +62,18 @@ export type LikeC4ModelDump = {
   imports?: {}
 }
 
+export type ProjectDump = {
+  id: string
+  name?: string
+  title?: string | undefined
+}
+
 export type AuxFromDump<D> = D extends LikeC4ModelDump ? aux.Aux<
     D[_stage] extends infer S extends string & 'computed' | 'layouted' ? S : 'computed' | 'layouted' | 'parsed',
     KeysOf<D['elements']>,
     KeysOf<D['deployments']['elements']>,
     KeysOf<D['views']>,
-    D['projectId'] extends infer P extends string ? P : never,
+    D['projectId'] extends infer PID extends string ? PID : never,
     SpecTypesFromDump<D['specification']>
   >
   : aux.Never

package/src/types/model-spec.ts

@@ -1,6 +1,7 @@
 import type { IsNever } from 'type-fest'
 import type * as aux from './_aux'
 import type { Any } from './_aux'
+import type { Link, NonEmptyArray } from './_common'
 import type * as scalar from './scalar'
 import type {
   Icon,
@@ -24,8 +25,11 @@ import type {
  */
 export interface ElementSpecification {
   tags?: scalar.Tag[]
+  title?: string
+  description?: scalar.MarkdownOrString
   technology?: string
   notation?: string
+  links?: NonEmptyArray<Link>
   style: {
     shape?: ElementShape
     icon?: Icon

package/src/types/project.ts

@@ -0,0 +1,9 @@
+import * as scalar from './scalar'
+
+/**
+ * LikeC4 projects encapsulate model, and can import from each other
+ */
+export interface LikeC4Project {
+  id: scalar.ProjectId
+  title?: string
+}

package/src/types/view-computed.ts

@@ -66,7 +66,7 @@ export interface ComputedEdge<A extends Any = Any> extends aux.WithOptionalTags<
   kind?: aux.RelationKind<A> | typeof scalar.StepEdgeKind
   notation?: string
   // Notes for walkthrough
-  notes?: string
+  notes?: scalar.MarkdownOrString
   color?: Color
   line?: RelationshipLineType
   head?: RelationshipArrowType

package/src/types/view-parsed.dynamic.ts

@@ -5,7 +5,7 @@ import type { AnyAux } from './_aux'
 import type { ExclusiveUnion } from './_common'
 import type { _type } from './const'
 import type { ModelFqnExpr } from './expression-model'
-import { isStepEdgeId } from './scalar'
+import { type MarkdownOrString, isStepEdgeId } from './scalar'
 import type { Color, RelationshipArrowType, RelationshipLineType } from './styles'
 import type {
   BaseParsedViewProperties,
@@ -23,7 +23,7 @@ export interface DynamicViewStep<A extends AnyAux = AnyAux> {
   readonly technology?: string
   readonly notation?: string
   // Notes for walkthrough
-  readonly notes?: string
+  readonly notes?: MarkdownOrString
   readonly color?: Color
   readonly line?: RelationshipLineType
   readonly head?: RelationshipArrowType

package/src/utils/compare-natural.ts

@@ -13,22 +13,20 @@ export function compareNatural(a: string | undefined, b: string | undefined): -1
 }
 
 /**
- * Compares two strings hierarchically based on their depth.
+ * Compares two strings lexicographically first, then hierarchically based on their depth.\
  * From parent nodes to leaves
  *
  * @example
  * const lines = [
+ *   'b.c',
+ *   'b',
  *   'a.b.c',
- *   'a',
- *   'a.b',
- *   'a.c.c',
  * ]
  * lines.sort(compareNaturalHierarchically('.'))
  * // [
- * //   'a',
- * //   'a.b',
  * //   'a.b.c',
- * //   'a.c.c',
+ * //   'b',
+ * //   'b.c',
  * // ]
  */
 export function compareNaturalHierarchically(
@@ -40,10 +38,12 @@ export function compareNaturalHierarchically(
     if (!b) return 1
     const aParts = a.split(separator)
     const bParts = b.split(separator)
-    if (aParts.length !== bParts.length) {
-      return aParts.length - bParts.length
-    }
-    for (let i = 0; i < aParts.length; i++) {
+
+    // Find the minimum length to avoid out-of-bounds access
+    const minLength = Math.min(aParts.length, bParts.length)
+
+    // Compare segments until we find a difference
+    for (let i = 0; i < minLength; i++) {
       const aPart = aParts[i]!
       const bPart = bParts[i]!
       const comparison = compare(aPart, bPart)
@@ -51,6 +51,8 @@ export function compareNaturalHierarchically(
         return comparison
       }
     }
-    return 0
+
+    // If all common segments are equal, shorter paths come first
+    return aParts.length - bParts.length
   }
 }

package/src/utils/index.ts

@@ -41,6 +41,7 @@ export {
 export {
   ifilter,
   ifind,
+  ifirst,
   iflat,
   ihead,
   imap,

package/src/utils/iterable/first.ts

@@ -0,0 +1,48 @@
+import type { IteratorLike } from '../../types'
+import { invariant } from '../../utils/invariant'
+
+/**
+ * Takes the first N elements from an iterable.
+ * Composable first version of `ifirst`.
+ * @signature
+ *   ifirst(count)(data)
+ */
+export function ifirst<T>(count: number): (iterable: Iterable<T>) => IteratorLike<T>
+
+/**
+ * Takes the first N elements from an iterable.
+ * Data first version of `ifirst`.
+ * @signature
+ *   ifirst(data, count)
+ * @example
+ *   ifirst([1, 2, 3, 4, 5], 3) // => Iterable<[1, 2, 3]>
+ */
+export function ifirst<T>(iterable: Iterable<T>, count: number): IteratorLike<T>
+
+export function ifirst(
+  arg1: unknown,
+  arg2?: unknown,
+): IteratorLike<unknown> | ((it: Iterable<unknown>) => IteratorLike<unknown>) {
+  const count = (arg2 ?? arg1) as number
+  invariant(typeof count === 'number' && count >= 0, 'Count must be a non-negative number')
+
+  function* _first(iter: Iterable<unknown>): IteratorLike<unknown> {
+    let taken = 0
+    for (const value of iter) {
+      if (taken >= count) {
+        break
+      }
+      yield value
+      taken++
+    }
+    return
+  }
+
+  if (arg2 === undefined) {
+    // Composable version: ifirst(count)(iterable)
+    return (iterable: Iterable<unknown>) => _first(iterable)
+  }
+
+  // Data-first version: ifirst(iterable, count)
+  return _first(arg1 as Iterable<unknown>)
+}

package/src/utils/iterable/index.ts

@@ -5,6 +5,7 @@ export { isIterable } from './_types'
  */
 export { ifilter } from './filter'
 export { ifind } from './find'
+export { ifirst } from './first'
 export { iflat } from './flat'
 export { ihead } from './head'
 export { imap } from './map'