likec4 1.60.0 → 1.61.0

package/skills/likec4-dsl/references/specification.md

@@ -3,6 +3,7 @@
 The `specification` block defines all named vocabularies for the project: element kinds, deployment node kinds, relationship kinds, tags, and custom color tokens. Every kind used in `model` or `deployment` blocks must be declared here first.
 
 **Key rules:**
+
 - Specification is global across all files in the project.
 - Duplicate identifiers (same kind, same tag, etc.) will cause a validation error.
 - Multiple `specification` blocks (in one file or across files) are allowed, but not recommended.
@@ -34,7 +35,10 @@ specification {
   relationship IDENTIFIER {
     technology "default tech for this relationship kind"
     description "default description for this relationship kind"
-    style { ... }          // default style for this relationship kind
+    // default style properties go directly in the body, not in a style block
+    color amber
+    line dashed
+    head diamond
   }
 
   // Define a custom named color token
@@ -67,9 +71,9 @@ specification {
 
 ## Common Mistakes
 
-| Mistake | Fix |
-|---------|-----|
-| Using a kind not defined here | Define `element KIND { }` or `deploymentNode KIND { }` in specification first |
-| Duplicate tag or kind identifier | Each identifier must be unique within its type category |
-| `#tag` in specification argument | Tags are defined without `#`; they are used with `#` elsewhere: `tag critical` → `#critical` |
-| Raw hex color in style | Define a named color token first: `color my-blue #003366`, then use `color my-blue` in styles |
+| Mistake                          | Fix                                                                                           |
+| -------------------------------- | --------------------------------------------------------------------------------------------- |
+| Using a kind not defined here    | Define `element KIND { }` or `deploymentNode KIND { }` in specification first                 |
+| Duplicate tag or kind identifier | Each identifier must be unique within its type category                                       |
+| `#tag` in specification argument | Tags are defined without `#`; they are used with `#` elsewhere: `tag critical` → `#critical`  |
+| Raw hex color in style           | Define a named color token first: `color my-blue #003366`, then use `color my-blue` in styles |

package/skills/likec4-dsl/references/troubleshooting.md

@@ -4,68 +4,73 @@ Load this file when encountering validation errors, unexpected rendering, or whe
 
 ## Syntax Errors
 
-| Error | Cause | Fix |
-|-------|-------|-----|
-| "Identifier PAYMENT.API not found" | Dots in identifier name | Use `payment-api` not `payment.api`; dots are FQN separators only |
-| "Unknown kind SERVICE" | Kind not in specification | Define `element service { ... }` in the specification block |
-| "Duplicate FQN cloud.backend" | Element ID repeated under the same parent | Rename one element; each sibling must have a unique identifier |
-| "Expected property TYPE after include *" | Malformed filter predicate | Use `include * where kind is component`, not `include * component` |
-| "Invalid relationship kind async-cache" | Kind not found in specification | Define `relationship async-cache { ... }` in specification first |
+| Error                                    | Cause                                     | Fix                                                                |
+| ---------------------------------------- | ----------------------------------------- | ------------------------------------------------------------------ |
+| "Identifier PAYMENT.API not found"       | Dots in identifier name                   | Use `payment-api` not `payment.api`; dots are FQN separators only  |
+| "Unknown kind SERVICE"                   | Kind not in specification                 | Define `element service { ... }` in the specification block        |
+| "Duplicate FQN cloud.backend"            | Element ID repeated under the same parent | Rename one element; each sibling must have a unique identifier     |
+| "Expected property TYPE after include *" | Malformed filter predicate                | Use `include * where kind is component`, not `include * component` |
+| "Invalid relationship kind async-cache"  | Kind not found in specification           | Define `relationship async-cache { ... }` in specification first   |
 
 ## Model & Hierarchy
 
-| Error | Cause | Fix |
-|-------|-------|-----|
-| Element shows but relationships don't render | Relationship references FQN incorrectly | Use exact FQN matching the model hierarchy |
-| "Can't define relationship from parent to child" | Direct parent-child relationships are forbidden | Move the relationship outside the parent element or use implicit notation |
-| Child element not visible from other files | Referencing by short name instead of FQN | Import or use full FQN: `cloud.backend.api` |
-| Extend block adds duplicate tags | Tags stack on merge | Use consistent tag names; duplicates are not deduplicated automatically |
+| Error                                            | Cause                                                              | Fix                                                                           |
+| ------------------------------------------------ | ------------------------------------------------------------------ | ----------------------------------------------------------------------------- |
+| Element shows but relationships don't render     | Relationship references FQN incorrectly                            | Use exact FQN matching the model hierarchy                                    |
+| "Can't define relationship from parent to child" | Direct parent-child relationships are forbidden                    | Move the relationship outside the parent element or use implicit notation     |
+| Child element not visible from other files       | Referencing by short name instead of FQN                           | Import or use full FQN: `cloud.backend.api`                                   |
+| Extend block adds duplicate tags                 | Tags stack on merge                                                | Use consistent tag names; duplicates are not deduplicated automatically       |
+| Warning `Element 'api' not found` on `[[api]]`   | Markdown link target is not an absolute FQN of the current project | Use the full FQN: `[[cloud.backend.api]]`; imported elements cannot be linked |
+| Warning `Unknown link namespace 'deployment'`    | Only `view:` is a known prefix in `[[…]]`                          | Use `[[view:id]]` or an element FQN                                           |
+| `[[cloud.api]]` shows as raw text                | Plain `'…'` string, or inside inline/fenced code                   | Use a Markdown value `'''…'''`; move the link out of code                     |
+
+Labelled link breaks a Markdown table cell: a bare pipe splits GFM table cells, so inside tables write the separator as `\\|`, e.g. `[[cloud.api\\|API]]`.
 
 ## View Predicates
 
-| Error | Cause | Fix |
-|-------|-------|-----|
-| `include *` shows grandchildren | Confusing `*` with `**` | `*` = direct children only; use `**` for recursive descent |
-| Relationships disappear in scoped view | Neighbors not explicitly included | Add `include -> scope` or `include <-> scope` to pull in inbound/outbound sources |
-| "WHERE predicate not matching any elements" | Tag or kind name is case-sensitive | Use exact case: `#Critical` ≠ `#critical` |
-| Element included but styled differently | Global vs. local style conflict | Local view styles override global; audit style rules order in the view block |
+| Error                                       | Cause                              | Fix                                                                               |
+| ------------------------------------------- | ---------------------------------- | --------------------------------------------------------------------------------- |
+| `include *` shows grandchildren             | Confusing `*` with `**`            | `*` = direct children only; use `**` for recursive descent                        |
+| Relationships disappear in scoped view      | Neighbors not explicitly included  | Add `include -> scope` or `include <-> scope` to pull in inbound/outbound sources |
+| "WHERE predicate not matching any elements" | Tag or kind name is case-sensitive | Use exact case: `#Critical` ≠ `#critical`                                         |
+| Element included but styled differently     | Global vs. local style conflict    | Local view styles override global; audit style rules order in the view block      |
 
 ## Deployment
 
-| Error | Cause | Fix |
-|-------|-------|-----|
-| `instanceOf` doesn't resolve | Instance refers to wrong FQN | Use the exact logical model FQN, not the deployment node identifier |
-| "Undefined DEPLOYMENT_KIND" | Kind referenced but not in specification | Define `deploymentNode vm { ... }` in specification |
+| Error                                         | Cause                                           | Fix                                                                            |
+| --------------------------------------------- | ----------------------------------------------- | ------------------------------------------------------------------------------ |
+| `instanceOf` doesn't resolve                  | Instance refers to wrong FQN                    | Use the exact logical model FQN, not the deployment node identifier            |
+| "Undefined DEPLOYMENT_KIND"                   | Kind referenced but not in specification        | Define `deploymentNode vm { ... }` in specification                            |
 | Deployment relationship inherits unexpectedly | Logical model edges are inherited automatically | Suppress inherited relationships explicitly in the deployment view if unwanted |
 
 ## Dynamic Views
 
-| Error | Cause | Fix |
-|-------|-------|-----|
-| `Nested parallel blocks are not allowed` | Nested `parallel { parallel { ... } }` (or `par`) | Flatten: put all concurrent steps in a single `parallel { }` block. Other flow blocks (`opt`/`loop`/`try`/`alt`) may nest freely |
-| `"loop" can not be used as an alternative branch` | Non-branch block (`loop`/`opt`/`parallel`/`try`) placed directly inside `alt` | `alt` accepts only `when`/`if`/`else` branches; nest the block inside a branch |
-| `"when" alternative branch must be inside "alt"` | `when`/`if`/`else` used at top level or inside a non-`alt` block | Wrap the branches in an `alt { ... }` block |
-| `catch`/`finally` rejected | `catch` without a preceding `try`, or `catch` after `finally` | Keep order `try` → `catch?` → `finally?` |
-| Response arrows (`<-`) show wrong direction | Chained `<-` steps are not supported | After `a -> b -> c`, write one `<-` step per hop: `b <- c`, then `a <- b`. `<-` cannot be chained (`a <- b <- c` is a parse error) |
-| `navigateTo` link doesn't work | Target view name does not exist | Ensure the target view name exists in the same project; from a dynamic step it must be another `dynamic view` |
-| `variant sequence` is ignored | Wrong keyword or spelling | Use exact: `variant sequence` (not `type`, `mode`, or `sequence` alone) |
+| Error                                             | Cause                                                                         | Fix                                                                                                                                |
+| ------------------------------------------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
+| `Nested parallel blocks are not allowed`          | Nested `parallel { parallel { ... } }` (or `par`)                             | Flatten: put all concurrent steps in a single `parallel { }` block. Other flow blocks (`opt`/`loop`/`try`/`alt`) may nest freely   |
+| `"loop" can not be used as an alternative branch` | Non-branch block (`loop`/`opt`/`parallel`/`try`) placed directly inside `alt` | `alt` accepts only `when`/`if`/`else` branches; nest the block inside a branch                                                     |
+| `"when" alternative branch must be inside "alt"`  | `when`/`if`/`else` used at top level or inside a non-`alt` block              | Wrap the branches in an `alt { ... }` block                                                                                        |
+| `catch`/`finally` rejected                        | `catch` without a preceding `try`, or `catch` after `finally`                 | Keep order `try` → `catch?` → `finally?`                                                                                           |
+| Response arrows (`<-`) show wrong direction       | Chained `<-` steps are not supported                                          | After `a -> b -> c`, write one `<-` step per hop: `b <- c`, then `a <- b`. `<-` cannot be chained (`a <- b <- c` is a parse error) |
+| `navigateTo` link doesn't work                    | Target view name does not exist                                               | Ensure the target view name exists in the same project; from a dynamic step it must be another `dynamic view`                      |
+| `variant sequence` is ignored                     | Wrong keyword or spelling                                                     | Use exact: `variant sequence` (not `type`, `mode`, or `sequence` alone)                                                            |
 
 ## Validation & Import
 
-| Most Common | Solution |
-|---|---|
-| `validate` reports config not found | Ensure `likec4.config.json` exists in the project root directory |
-| `Imported project not found` | `import` takes another project's `name` (from its `likec4.config`), not a file path: `import { x } from 'other-project'`. Files of the same project need no import; reference elements by full FQN |
-| Symbol from import invisible in model | Symbol must be public (defined at top level); nested elements need FQN |
+| Most Common                                         | Solution                                                                                                                                                                                                            |
+| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `validate` reports config not found                 | Ensure `likec4.config.json` exists in the project root directory                                                                                                                                                    |
+| `Imported project not found`                        | `import` takes another project's `name` (from its `likec4.config`), not a file path: `import { x } from 'other-project'`. Files of the same project need no import; reference elements by full FQN                  |
+| Symbol from import invisible in model               | Symbol must be public (defined at top level); nested elements need FQN                                                                                                                                              |
 | Large error count in project but your file is clean | Use `likec4 validate --json --no-layout --file <edited-file> <project-dir>` and check `filteredErrors`/`filteredFiles`; text mode can also print diagnostics from other workspace files before the filtered summary |
 
 ## Performance & Large Models
 
-| Symptom | Cause | Action |
-|---|---|---|
-| Validation takes >30s | Specification changes trigger full project re-parse | Keep specification in a separate file; avoid editing it frequently |
-| Export generates a partial PNG | Layout engine timeout on complex view | Split large views with `navigateTo` or reduce the element count |
-| IDE responsiveness slow | Too many open files or large specification in working file | Split into `spec.c4` + `model.c4` + `views.c4` |
+| Symptom                        | Cause                                                      | Action                                                             |
+| ------------------------------ | ---------------------------------------------------------- | ------------------------------------------------------------------ |
+| Validation takes >30s          | Specification changes trigger full project re-parse        | Keep specification in a separate file; avoid editing it frequently |
+| Export generates a partial PNG | Layout engine timeout on complex view                      | Split large views with `navigateTo` or reduce the element count    |
+| IDE responsiveness slow        | Too many open files or large specification in working file | Split into `spec.c4` + `model.c4` + `views.c4`                     |
 
 ## Debugging Workflow
 

package/skills/likec4-dsl/references/views.md

@@ -216,10 +216,10 @@ customer
   -> frontend "opens"     // Read as "customer opens frontend"
   -> backend "requests"   // Read as "frontend requests backend"
   -> database "queries"   // Read as "backend queries database"
-  <- backend "responds"   // Read as "database responds to backend"
+backend <- database "responds"   // Read as "database responds to backend"
 ```
 
-Each arrow in the chain creates a separate step. The target of the previous step becomes the source of the next.
+Each arrow in the chain creates a separate step. The target of the previous step becomes the source of the next. A chain can continue with `->` or a relationship-kind arrow such as `-[kind]->`. A chain cannot continue with `<-`, so write a response as its own step.
 
 ## Parallel Steps
 

package/vite-plugin-modules.d.ts

@@ -33,25 +33,17 @@ declare module 'likec4:projects-overview' {
 }
 
 declare module 'likec4:icons' {
-  import type { ReactNode } from 'react'
-
-  export type ElementIconRendererProps = {
-    node: {
-      id: string
-      title: string
-      icon?: string | null | undefined
-    }
-  }
+  import type { ElementIconRenderer, ElementIconRendererProps } from 'likec4/react'
 
-  export type ElementIconRenderer = (props: ElementIconRendererProps) => ReactNode
+  export type { ElementIconRenderer, ElementIconRendererProps }
   export function getProjectIcons(projectId: string): ElementIconRenderer
 }
 
 declare module 'likec4:model' {
-  import type { DiagramView, LayoutedLikeC4ModelData, LikeC4Model, UnknownLayouted } from 'likec4/model'
+  import type { DiagramView, LayoutedLikeC4ModelData, LikeC4Model, UnknownLayouted, ViewId } from 'likec4/model'
   import type { Atom } from 'likec4/vite-plugin/internal'
 
-  export type { Atom, DiagramView, LayoutedLikeC4ModelData, LikeC4Model, UnknownLayouted }
+  export type { Atom, DiagramView, LayoutedLikeC4ModelData, LikeC4Model, UnknownLayouted, ViewId }
 
   export function loadModel(projectId: string): Promise<{
     $likec4data: Atom<LayoutedLikeC4ModelData>
@@ -59,6 +51,7 @@ declare module 'likec4:model' {
     useLikeC4Model: () => LikeC4Model<UnknownLayouted>
     useLikeC4Views: () => ReadonlyArray<DiagramView<UnknownLayouted>>
     useLikeC4View: (viewId: string) => DiagramView<UnknownLayouted> | null
+    isLikeC4ViewId: (value: unknown) => value is ViewId
   }>
 }
 
@@ -69,15 +62,19 @@ declare module 'likec4:single-project' {
     LikeC4Model,
     types,
     UnknownLayouted,
+    ViewId,
   } from 'likec4/model'
   import type { Atom } from 'likec4/vite-plugin/internal'
   import type { ElementIconRenderer } from 'likec4:icons'
 
+  export type { Atom, DiagramView, LayoutedLikeC4ModelData, LikeC4Model, UnknownLayouted, ViewId }
+
   export const $likec4data: Atom<LayoutedLikeC4ModelData>
   export const $likec4model: Atom<LikeC4Model<UnknownLayouted>>
   export function useLikeC4Model(): LikeC4Model<UnknownLayouted>
   export function useLikeC4Views(): ReadonlyArray<DiagramView<UnknownLayouted>>
   export function useLikeC4View(viewId: string): DiagramView<UnknownLayouted> | null
+  export function isLikeC4ViewId(value: unknown): value is ViewId
 
   export const IconRenderer: ElementIconRenderer
 
@@ -85,23 +82,39 @@ declare module 'likec4:single-project' {
 }
 
 declare module 'likec4:react' {
-  import type { aux, DiagramView, LikeC4Model, UnknownLayouted } from 'likec4/model'
-  import type { LikeC4ViewProps, ReactLikeC4Props } from 'likec4/react'
+  import type {
+    aux,
+    DiagramView,
+    LayoutedLikeC4ModelData,
+    LayoutedView,
+    LikeC4Model,
+    UnknownLayouted,
+  } from 'likec4/model'
+  import type { ElementIconRendererProps, LikeC4ViewProps, ReactLikeC4Props } from 'likec4/react'
   import type { JSX, PropsWithChildren } from 'react'
+  import type { Atom } from 'likec4/vite-plugin/internal'
 
-  // This will be used later for augmenting the types
-  interface Types extends UnknownLayouted {
+  export type { Atom, DiagramView, LayoutedView, LikeC4Model, UnknownLayouted }
+
+  // This will be used for augmenting the types
+  export interface Register {
   }
+  export type $Types<T = Register> = T extends { aux: infer A extends aux.Any } ? A : UnknownLayouted
 
-  export type LikeC4ViewId = aux.ViewId<Types>
+  export type LikeC4ViewId = aux.ViewId<$Types>
 
-  export function useLikeC4Model(): LikeC4Model<Types>
-  export function useLikeC4Views(): ReadonlyArray<DiagramView<Types>>
-  export function useLikeC4View(viewId: LikeC4ViewId): DiagramView<Types> | null
+  // Re-export from likec4:model
+  export const $likec4data: Atom<LayoutedLikeC4ModelData<$Types>>
+  export const $likec4model: Atom<LikeC4Model<$Types>>
+  export function useLikeC4Model(): LikeC4Model<$Types>
+  export function useLikeC4Views(): ReadonlyArray<LayoutedView<$Types>>
+  export function useLikeC4View(viewId: LikeC4ViewId): LayoutedView<$Types> | null
+  export function isLikeC4ViewId(value: unknown): value is LikeC4ViewId
 
   export function LikeC4ModelProvider(props: PropsWithChildren): JSX.Element
-  export function LikeC4View({ viewId, ...props }: LikeC4ViewProps<Types>): JSX.Element
-  export function ReactLikeC4({ viewId, ...props }: ReactLikeC4Props<Types>): JSX.Element
+  export function LikeC4View({ viewId, ...props }: LikeC4ViewProps<$Types>): JSX.Element
+  export function ReactLikeC4({ viewId, ...props }: ReactLikeC4Props<$Types>): JSX.Element
+  export function IconRenderer(props: ElementIconRendererProps): JSX.Element
 }
 
 declare module 'likec4:dot' {
@@ -130,56 +143,102 @@ declare module 'likec4:drawio' {
     drawioEditUrl(this: void, viewId: string): string
   }>
 }
+declare module 'likec4:diffs' {
+  import type { DiffSummary, LayoutedView } from 'likec4/model'
+  import type { Atom } from 'likec4/vite-plugin/internal'
+
+  /**
+   * Diffs of the project, with the compare views of the views they change (by diff id, then by view id)
+   */
+  export interface ProjectDiffs {
+    diffs: DiffSummary[]
+    views: Record<string, Record<string, LayoutedView>>
+  }
+
+  export function loadDiffs(projectId: string): Promise<{
+    $diffs: Atom<ProjectDiffs>
+  }>
+}
 
 // Per project
 
+declare module 'likec4:diffs/*' {
+  import type { ProjectDiffs } from 'likec4:diffs'
+  import type { Atom } from 'likec4/vite-plugin/internal'
+
+  export const $diffs: Atom<ProjectDiffs>
+}
+
 declare module 'likec4:model/*' {
-  import type { aux, DiagramView, LayoutedLikeC4ModelData, LikeC4Model, UnknownLayouted } from 'likec4/model'
-  import type { Atom } from 'likec4:model'
+  import type {
+    aux,
+    DiagramView,
+    LayoutedLikeC4ModelData,
+    LayoutedView,
+    LikeC4Model,
+    UnknownLayouted,
+  } from 'likec4/model'
+  import type { ElementIconRendererProps, LikeC4ViewProps, ReactLikeC4Props } from 'likec4/react'
+  import type { Atom } from 'likec4/vite-plugin/internal'
+
+  export type { Atom, DiagramView, LayoutedView, LikeC4Model, UnknownLayouted }
 
-  // This will be used later for augmenting the types
-  interface Types extends UnknownLayouted {
+  // This will be used for augmenting the types
+  export interface Register {
   }
+  export type $Types<T = Register> = T extends { aux: infer A extends aux.Any } ? A : UnknownLayouted
 
-  export type LikeC4ViewId = aux.ViewId<Types>
+  export type LikeC4ViewId = aux.ViewId<$Types>
 
-  export const $likec4data: Atom<LayoutedLikeC4ModelData<Types>>
-  export const $likec4model: Atom<LikeC4Model<Types>>
-  export function useLikeC4Model(): LikeC4Model<Types>
-  export function useLikeC4Views(): ReadonlyArray<DiagramView<Types>>
-  export function useLikeC4View(viewId: LikeC4ViewId): DiagramView<Types> | null
+  export const $likec4data: Atom<LayoutedLikeC4ModelData<$Types>>
+  export const $likec4model: Atom<LikeC4Model<$Types>>
+  export function useLikeC4Model(): LikeC4Model<$Types>
+  export function useLikeC4Views(): ReadonlyArray<LayoutedView<$Types>>
+  export function useLikeC4View(viewId: LikeC4ViewId): LayoutedView<$Types> | null
+  export function isLikeC4ViewId(value: unknown): value is LikeC4ViewId
 }
 
 declare module 'likec4:icons/*' {
-  import type { ReactNode } from 'react'
-  type ElementIconRendererProps = {
-    node: {
-      id: string
-      title: string
-      icon?: string | null | undefined
-    }
-  }
-  export function IconRenderer(props: ElementIconRendererProps): ReactNode
+  import type { JSX } from 'react'
+  import type { ElementIconRendererProps } from 'likec4/react'
+
+  export function IconRenderer(props: ElementIconRendererProps): JSX.Element
 }
 
 declare module 'likec4:react/*' {
-  import type { aux, DiagramView, LikeC4Model, UnknownLayouted } from 'likec4/model'
-  import type { LikeC4ViewProps, ReactLikeC4Props } from 'likec4/react'
+  import type {
+    aux,
+    DiagramView,
+    LayoutedLikeC4ModelData,
+    LayoutedView,
+    LikeC4Model,
+    UnknownLayouted,
+  } from 'likec4/model'
+  import type { ElementIconRendererProps, LikeC4ViewProps, ReactLikeC4Props } from 'likec4/react'
   import type { JSX, PropsWithChildren } from 'react'
+  import type { Atom } from 'likec4/vite-plugin/internal'
 
-  // This will be used later for augmenting the types
-  interface Types extends UnknownLayouted {
+  export type { Atom, DiagramView, LayoutedView, LikeC4Model, UnknownLayouted }
+
+  // This will be used for augmenting the types
+  export interface Register {
   }
+  export type $Types<T = Register> = T extends { aux: infer A extends aux.Any } ? A : UnknownLayouted
 
-  export type LikeC4ViewId = aux.ViewId<Types>
+  export type LikeC4ViewId = aux.ViewId<$Types>
 
-  export function useLikeC4Model(): LikeC4Model<Types>
-  export function useLikeC4Views(): ReadonlyArray<DiagramView<Types>>
-  export function useLikeC4View(viewId: LikeC4ViewId): DiagramView<Types> | null
+  // Re-export from likec4:model
+  export const $likec4data: Atom<LayoutedLikeC4ModelData<$Types>>
+  export const $likec4model: Atom<LikeC4Model<$Types>>
+  export function useLikeC4Model(): LikeC4Model<$Types>
+  export function useLikeC4Views(): ReadonlyArray<LayoutedView<$Types>>
+  export function useLikeC4View(viewId: LikeC4ViewId): LayoutedView<$Types> | null
+  export function isLikeC4ViewId(value: unknown): value is LikeC4ViewId
 
   export function LikeC4ModelProvider(props: PropsWithChildren): JSX.Element
-  export function LikeC4View({ viewId, ...props }: LikeC4ViewProps<Types>): JSX.Element
-  export function ReactLikeC4({ viewId, ...props }: ReactLikeC4Props<Types>): JSX.Element
+  export function LikeC4View({ viewId, ...props }: LikeC4ViewProps<$Types>): JSX.Element
+  export function ReactLikeC4({ viewId, ...props }: ReactLikeC4Props<$Types>): JSX.Element
+  export function IconRenderer(props: ElementIconRendererProps): JSX.Element
 }
 
 declare module 'likec4:webcomponents/*' {
@@ -207,6 +266,9 @@ declare module 'likec4:rpc' {
 declare module 'likec4:app-config' {
   export let ComponentName: {
     View: string
+    /**
+     * @deprecated
+     */
     Browser: string
   }
   export let pageTitle: string
@@ -217,3 +279,16 @@ declare module 'likec4:app-config' {
   export let krokiD2SvgUrl: string
   export let krokiPumlSvgUrl: string
 }
+
+declare module 'likec4:customization' {
+  import type { CustomComponents } from 'likec4/react'
+  import type { Atom } from 'likec4/vite-plugin/internal'
+
+  export type { CustomComponents }
+
+  /**
+   * UI overrides from the file set in the `customization` option of the LikeC4 Vite plugin
+   */
+  export const $customComponents: Atom<CustomComponents | undefined>
+  export function useCustomComponents(): CustomComponents | undefined
+}