@purview-dev/astroc4 1.0.0-prerelease.3 → 1.0.0-prerelease.5

package/dist/likec4.tmLanguage.json

@@ -0,0 +1,327 @@
+{
+  "$schema": "https://raw.githubusercontent.com/martinring/tmlanguage/master/tmlanguage.json",
+  "$generated": {
+    "repo": "likec4/likec4",
+    "ref": "main",
+    "sha": "da5af77245f9",
+    "by": "astroc4/scripts/sync-grammar.ts"
+  },
+  "name": "likec4",
+  "displayName": "LikeC4",
+  "scopeName": "source.likec4",
+  "fileTypes": [
+    "c4",
+    "likec4"
+  ],
+  "patterns": [
+    {
+      "include": "#everything"
+    }
+  ],
+  "repository": {
+    "everything": {
+      "patterns": [
+        {
+          "include": "#comments"
+        },
+        {
+          "include": "#strings"
+        },
+        {
+          "include": "#urls"
+        },
+        {
+          "include": "#icons"
+        },
+        {
+          "include": "#hex-colors"
+        },
+        {
+          "include": "#tags"
+        },
+        {
+          "include": "#typed-arrow"
+        },
+        {
+          "include": "#declarations"
+        },
+        {
+          "include": "#keywords"
+        },
+        {
+          "include": "#numbers"
+        },
+        {
+          "include": "#operators"
+        },
+        {
+          "include": "#punctuation"
+        }
+      ]
+    },
+    "comments": {
+      "patterns": [
+        {
+          "name": "comment.block.likec4",
+          "begin": "/\\*",
+          "end": "\\*/",
+          "captures": {
+            "0": {
+              "name": "punctuation.definition.comment.likec4"
+            }
+          }
+        },
+        {
+          "name": "comment.line.double-slash.likec4",
+          "match": "//.*$",
+          "captures": {
+            "0": {
+              "name": "punctuation.definition.comment.likec4"
+            }
+          }
+        }
+      ]
+    },
+    "strings": {
+      "patterns": [
+        {
+          "name": "string.quoted.triple.likec4",
+          "begin": "'''",
+          "end": "'''",
+          "beginCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.begin.likec4"
+            }
+          },
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.end.likec4"
+            }
+          }
+        },
+        {
+          "name": "string.quoted.triple.likec4",
+          "begin": "\"\"\"",
+          "end": "\"\"\"",
+          "beginCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.begin.likec4"
+            }
+          },
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.end.likec4"
+            }
+          }
+        },
+        {
+          "name": "string.quoted.single.likec4",
+          "begin": "'",
+          "end": "'|$",
+          "beginCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.begin.likec4"
+            }
+          },
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.end.likec4"
+            }
+          },
+          "patterns": [
+            {
+              "name": "constant.character.escape.likec4",
+              "match": "\\\\."
+            }
+          ]
+        },
+        {
+          "name": "string.quoted.double.likec4",
+          "begin": "\"",
+          "end": "\"|$",
+          "beginCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.begin.likec4"
+            }
+          },
+          "endCaptures": {
+            "0": {
+              "name": "punctuation.definition.string.end.likec4"
+            }
+          },
+          "patterns": [
+            {
+              "name": "constant.character.escape.likec4",
+              "match": "\\\\."
+            }
+          ]
+        }
+      ]
+    },
+    "urls": {
+      "name": "markup.underline.link.likec4",
+      "match": "\\bhttps?://[^\\s'\"]+"
+    },
+    "icons": {
+      "comment": "Bundled icon ids: `tech:nginx`, `aws:…`, `gcp:…`, …",
+      "match": "\\b(aws|azure|bootstrap|gcp|md|tech)(:)([\\w-]+)",
+      "captures": {
+        "1": {
+          "name": "support.constant.icon-pack.likec4"
+        },
+        "2": {
+          "name": "punctuation.separator.likec4"
+        },
+        "3": {
+          "name": "support.constant.icon.likec4"
+        }
+      }
+    },
+    "hex-colors": {
+      "name": "constant.other.color.rgb-value.hex.likec4",
+      "match": "#(?:[0-9A-Fa-f]{8}|[0-9A-Fa-f]{6}|[0-9A-Fa-f]{3})(?![\\w-])"
+    },
+    "tags": {
+      "name": "entity.name.tag.likec4",
+      "match": "#[A-Za-z_][\\w-]*"
+    },
+    "typed-arrow": {
+      "comment": "`a -[https]-> b`",
+      "match": "(-\\[)\\s*([A-Za-z_][\\w-]*)\\s*(\\]->)",
+      "captures": {
+        "1": {
+          "name": "keyword.operator.arrow.likec4"
+        },
+        "2": {
+          "name": "entity.name.type.relationship.likec4"
+        },
+        "3": {
+          "name": "keyword.operator.arrow.likec4"
+        }
+      }
+    },
+    "declarations": {
+      "patterns": [
+        {
+          "comment": "`element system`, `deploymentNode region`, `tag tls`, `relationship https`. Not `where tag is #x`.",
+          "match": "\\b(element|deploymentNode|tag|relationship)\\s+(?!is\\b)([A-Za-z_][\\w-]*)(?=\\s*(?:\\{|$|//))",
+          "captures": {
+            "1": {
+              "name": "storage.type.likec4"
+            },
+            "2": {
+              "name": "entity.name.type.likec4"
+            }
+          }
+        },
+        {
+          "comment": "`color testingBlue #0046BE` declares; `color testingBlue` inside a style block only refers.",
+          "match": "\\b(color)\\s+([A-Za-z_][\\w-]*)(?=\\s+#)",
+          "captures": {
+            "1": {
+              "name": "storage.type.likec4"
+            },
+            "2": {
+              "name": "entity.name.type.likec4"
+            }
+          }
+        },
+        {
+          "comment": "`view index`, `dynamic view firstRequest`, `deployment view prod`, `view internals of site`",
+          "match": "\\b(?:(dynamic|deployment)\\s+)?(view)\\s+([A-Za-z_]\\w*)",
+          "captures": {
+            "1": {
+              "name": "storage.modifier.likec4"
+            },
+            "2": {
+              "name": "storage.type.view.likec4"
+            },
+            "3": {
+              "name": "entity.name.function.view.likec4"
+            }
+          }
+        },
+        {
+          "comment": "`reader = actor 'Engineer'`",
+          "match": "\\b([A-Za-z_]\\w*)\\s*(=)(?!=)\\s*(?!(?:autoLayout|deploymentNode|dynamic|element|exclude|extend|extends|from|icons|import|include|instance|instanceOf|is|metadata|node|not|of|predicate|relationship|rgb|rgba|view|where|with|add|deployment|diff|dynamicPredicateGroup|global|group|likec4lib|model|predicateGroup|rank|remove|specification|style|styleGroup|views|alt|break|catch|else|finally|if|loop|opt|par|parallel|try|when)\\b)([A-Za-z_]\\w*)?",
+          "captures": {
+            "1": {
+              "name": "variable.other.definition.likec4"
+            },
+            "2": {
+              "name": "keyword.operator.assignment.likec4"
+            },
+            "3": {
+              "name": "entity.name.type.likec4"
+            }
+          }
+        }
+      ]
+    },
+    "keywords": {
+      "patterns": [
+        {
+          "comment": "Keywords that open a block: `model { … }`.",
+          "name": "keyword.control.block.likec4",
+          "match": "\\b(?:add|deployment|diff|dynamicPredicateGroup|global|group|likec4lib|model|predicateGroup|rank|remove|specification|style|styleGroup|views)\\b(?=\\s*\\{)"
+        },
+        {
+          "name": "keyword.operator.word.likec4",
+          "match": "\\b(?:and|or|not|is)\\b"
+        },
+        {
+          "name": "keyword.control.likec4",
+          "match": "\\b(?:autoLayout|deploymentNode|dynamic|element|exclude|extend|extends|from|icons|import|include|instance|instanceOf|is|metadata|node|not|of|predicate|relationship|rgb|rgba|view|where|with|alt|break|catch|else|finally|if|loop|opt|par|parallel|try|when|add|deployment|diff|dynamicPredicateGroup|global|group|likec4lib|model|predicateGroup|rank|remove|specification|style|styleGroup|views)\\b"
+        },
+        {
+          "name": "variable.language.likec4",
+          "match": "\\b(?:source|target)\\b"
+        },
+        {
+          "name": "support.type.property-name.likec4",
+          "match": "\\b(?:border|color|description|descriptionFile|head|icon|iconColor|iconPosition|iconSize|includeAncestors|kind|line|link|multiple|navigateTo|notation|notes|opacity|order|padding|routing|shape|size|sizing|style|summary|tag|tail|technology|textSize|title|variant)\\b"
+        },
+        {
+          "name": "constant.language.likec4",
+          "match": "\\b(?:agent|amber|auto|blue|bottom|BottomTop|browser|bucket|component|crow|cylinder|dashed|diagram|diamond|document|dot|dotted|fixed|gray|green|indigo|large|left|LeftRight|lg|max|md|medium|min|mobile|muted|none|normal|odiamond|odot|onormal|open|ortho|person|primary|queue|rectangle|red|right|RightLeft|same|secondary|sequence|sink|sky|slate|sm|small|solid|source|spline|storage|top|TopBottom|vee|xl|xlarge|xs|xsmall)\\b"
+        }
+      ]
+    },
+    "numbers": {
+      "name": "constant.numeric.likec4",
+      "match": "\\b\\d+(?:\\.\\d+)?%?"
+    },
+    "operators": {
+      "patterns": [
+        {
+          "name": "keyword.operator.arrow.likec4",
+          "match": "\\]<->|\\]->|<->|->"
+        },
+        {
+          "name": "keyword.operator.wildcard.likec4",
+          "match": "\\.\\*\\*|\\.\\*|\\*\\*|\\*"
+        }
+      ]
+    },
+    "punctuation": {
+      "patterns": [
+        {
+          "name": "punctuation.section.block.begin.likec4",
+          "match": "\\{"
+        },
+        {
+          "name": "punctuation.section.block.end.likec4",
+          "match": "\\}"
+        },
+        {
+          "name": "punctuation.separator.comma.likec4",
+          "match": ","
+        },
+        {
+          "name": "punctuation.accessor.likec4",
+          "match": "\\."
+        }
+      ]
+    }
+  }
+}

package/dist/translations.d.ts

@@ -0,0 +1,21 @@
+export declare const translations: {
+    en: {
+        'likec4.view.title': string;
+        'likec4.view.description': string;
+        'likec4.view.hint': string;
+        'likec4.view.badge': string;
+        'likec4.view.loading': string;
+        'likec4.fence.title': string;
+        'likec4.fence.hint': string;
+        'likec4.fence.loading': string;
+        'likec4.error.title': string;
+        'likec4.error.body': string;
+        'likec4.error.retry': string;
+        'likec4.error.viewIdRequired': string;
+        'likec4.error.noProjects': string;
+        'likec4.error.unknownProject': string;
+        'likec4.error.unresolvedProject': string;
+        'likec4.error.loadFailed': string;
+    };
+};
+export default translations;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@purview-dev/astroc4",
-  "version": "1.0.0-prerelease.3",
+  "version": "1.0.0-prerelease.5",
   "description": "Interactive LikeC4 architecture diagrams for Astro and Starlight: <LikeC4View>, ```likec4 fences, and LikeC4 syntax highlighting derived from the live Langium grammar.",
   "license": "MIT",
   "author": {
@@ -21,8 +21,10 @@
     "architecture-as-code",
     "architecture-diagrams",
     "diagrams",
+    "ui",
     "astro",
     "astro-integration",
+    "withastro",
     "starlight",
     "starlight-plugin",
     "expressive-code",
@@ -36,6 +38,10 @@
       "types": "./dist/index.d.ts",
       "import": "./dist/index.js"
     },
+    "./integration": {
+      "types": "./dist/integration.d.ts",
+      "import": "./dist/integration.js"
+    },
     "./expressive-code": {
       "types": "./dist/expressive-code.d.ts",
       "import": "./dist/expressive-code.js"
@@ -52,10 +58,13 @@
   ],
   "scripts": {
     "build:lib": "bun scripts/build.ts",
+    "prepublishOnly": "bun scripts/check-dist.ts",
     "dev": "bun run build:lib && cd playground && astro dev",
     "build": "bun run build:lib && cd playground && astro build",
     "preview": "cd playground && astro preview",
-    "check": "bun run build:lib && cd playground && astro check && cd .. && bunx tsc -p tsconfig.scripts.json --noEmit",
+    "dev:astro": "bun run build:lib && cd examples/astro && astro dev",
+    "build:astro": "bun run build:lib && cd examples/astro && astro build",
+    "check": "bun run build:lib && cd playground && astro check && cd ../examples/astro && astro check && cd ../.. && bunx tsc -p tsconfig.scripts.json --noEmit",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:network": "ASTROC4_NETWORK=1 vitest run src/grammar/__tests__/network.test.ts",
@@ -76,15 +85,22 @@
     "react-dom": ">=19.0.0",
     "shiki": ">=1.0.0"
   },
+  "peerDependenciesMeta": {
+    "@astrojs/starlight": {
+      "optional": true
+    }
+  },
   "devDependencies": {
     "@astrojs/check": "^0.9.12",
     "@astrojs/markdown-satteri": "^0.4.6",
+    "@astrojs/mdx": "^8.1.2",
     "@astrojs/react": "^7.1.2",
     "@astrojs/starlight": "^0.42.8",
     "@likec4/core": "^1.59.4",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "astro": "^7.4.4",
+    "astro-expressive-code": "^0.44.3",
     "likec4": "^1.59.4",
     "playwright": "^1.63.0",
     "react": "^19.3.0",

package/src/components/DiagramFrame.astro

@@ -20,7 +20,15 @@ const { height = 480 } = Astro.props;
 	/* LikeC4's renderer measures its container, so it needs a concrete height
 	   rather than collapsing to the intrinsic size of an absolutely-positioned
 	   canvas. The per-instance value arrives as an inline custom property. */
+	/* Same token contract as DiagramShell: Starlight's palette when present,
+	   scheme-neutral fallbacks when not (see the note there). */
 	.likec4-frame {
+		--likec4-border: var(--sl-color-gray-5, rgba(128, 128, 128, 0.35));
+		--likec4-surface: var(--sl-color-bg, transparent);
+		--likec4-danger: var(--sl-color-red, #c0392b);
+		--likec4-danger-soft: var(--sl-color-red-low, rgba(192, 57, 43, 0.12));
+		--likec4-danger-text: var(--sl-color-red-high, #8b1d1d);
+
 		min-height: var(--likec4-height);
 	}
 
@@ -35,13 +43,13 @@ const { height = 480 } = Astro.props;
 	}
 
 	.likec4-frame :global(.likec4-error) {
-		border: 1px solid var(--sl-color-red);
+		border: 1px solid var(--likec4-danger);
 		border-radius: 0.5rem;
-		background: var(--sl-color-red-low);
+		background: var(--likec4-danger-soft);
 		padding: 1rem;
 		font-size: 0.875rem;
 		line-height: 1.25rem;
-		color: var(--sl-color-red-high);
+		color: var(--likec4-danger-text);
 	}
 
 	.likec4-frame :global(.likec4-error p) {
@@ -55,7 +63,7 @@ const { height = 480 } = Astro.props;
 
 	.likec4-frame :global(.likec4-error__retry) {
 		margin-top: 0.75rem;
-		border: 1px solid var(--sl-color-red);
+		border: 1px solid var(--likec4-danger);
 		border-radius: 0.375rem;
 		background: transparent;
 		padding: 0.375rem 0.75rem;
@@ -67,6 +75,6 @@ const { height = 480 } = Astro.props;
 	}
 
 	.likec4-frame :global(.likec4-error__retry:hover) {
-		background: var(--sl-color-bg);
+		background: var(--likec4-surface);
 	}
 </style>

package/src/components/DiagramShell.astro

@@ -54,17 +54,28 @@ const { title, description, hint, collapsible = true, defaultOpen = true } = Ast
 </section>
 
 <style>
+	/* Starlight's palette when the site has it; scheme-neutral fallbacks when it
+	   does not, so the same components frame a diagram on a plain Astro page.
+	   Every fallback is a translucent grey or `inherit`, which stays legible on
+	   light and dark backgrounds alike. */
 	.likec4-shell {
+		--likec4-border: var(--sl-color-gray-5, rgba(128, 128, 128, 0.35));
+		--likec4-surface: var(--sl-color-bg, transparent);
+		--likec4-surface-alt: var(--sl-color-bg-nav, rgba(128, 128, 128, 0.06));
+		--likec4-text: var(--sl-color-white, inherit);
+		--likec4-text-muted: var(--sl-color-gray-2, rgba(128, 128, 128, 0.95));
+		--likec4-accent: var(--sl-color-text-accent, inherit);
+
 		margin-block: 1em;
 		overflow: hidden;
-		border: 1px solid var(--sl-color-gray-5);
+		border: 1px solid var(--likec4-border);
 		border-radius: 0.75rem;
-		background: var(--sl-color-bg-nav);
+		background: var(--likec4-surface-alt);
 	}
 
 	.likec4-shell__header {
-		border-bottom: 1px solid var(--sl-color-gray-5);
-		background: var(--sl-color-bg);
+		border-bottom: 1px solid var(--likec4-border);
+		background: var(--likec4-surface);
 		padding: 1em 1.25rem;
 		line-height: 1.4;
 	}
@@ -86,7 +97,7 @@ const { title, description, hint, collapsible = true, defaultOpen = true } = Ast
 		font-size: 1rem;
 		line-height: 1.5rem;
 		font-weight: 600;
-		color: var(--sl-color-white);
+		color: var(--likec4-text);
 	}
 
 	.likec4-shell__title--block {
@@ -97,7 +108,7 @@ const { title, description, hint, collapsible = true, defaultOpen = true } = Ast
 		margin: 0.25rem 0 0;
 		font-size: 0.875rem;
 		line-height: 1.25rem;
-		color: var(--sl-color-gray-2);
+		color: var(--likec4-text-muted);
 	}
 
 	.likec4-shell__hint {
@@ -105,7 +116,7 @@ const { title, description, hint, collapsible = true, defaultOpen = true } = Ast
 		font-size: 0.75rem;
 		line-height: 1rem;
 		font-weight: 500;
-		color: var(--sl-color-text-accent);
+		color: var(--likec4-accent);
 	}
 
 	.likec4-shell__body {

package/src/components/LikeC4Fence.astro

@@ -23,7 +23,8 @@ interface Props {
 	defaultOpen?: string;
 }
 
-const t = getTranslator(Astro.locals.t);
+// See `LikeC4View.astro`: `t` is Starlight's, and absent on a plain Astro page.
+const t = getTranslator((Astro.locals as { t?: unknown }).t);
 const labels = getIslandLabels(t, 'likec4.fence.loading');
 
 const {

package/src/components/LikeC4View.astro

@@ -26,7 +26,11 @@ interface Props {
 	defaultOpen?: boolean;
 }
 
-const t = getTranslator(Astro.locals.t);
+// Starlight augments `App.Locals` with `t`; a plain Astro page has no such
+// property (and an empty `Locals` interface, so naming it would not type-check),
+// which is why this is read as `unknown` and `getTranslator` falls back to
+// English when it is absent.
+const t = getTranslator((Astro.locals as { t?: unknown }).t);
 const labels = getIslandLabels(t, 'likec4.view.loading');
 
 const {
@@ -64,17 +68,22 @@ const {
 </DiagramShell>
 
 <style>
+	/* Same token contract as DiagramShell (see the note there). */
 	.likec4-badge {
+		--likec4-border: var(--sl-color-gray-5, rgba(128, 128, 128, 0.35));
+		--likec4-surface: var(--sl-color-bg, transparent);
+		--likec4-text-muted: var(--sl-color-gray-2, rgba(128, 128, 128, 0.95));
+
 		display: inline-flex;
 		align-items: center;
 		gap: 0.5rem;
 		margin-bottom: 0.75rem;
-		border: 1px solid var(--sl-color-gray-5);
+		border: 1px solid var(--likec4-border);
 		border-radius: 9999px;
-		background: var(--sl-color-bg);
+		background: var(--likec4-surface);
 		padding: 0.25rem 0.75rem;
 		font-size: 0.75rem;
 		line-height: 1rem;
-		color: var(--sl-color-gray-2);
+		color: var(--likec4-text-muted);
 	}
 </style>

package/src/components/LoadingPlaceholder.astro

@@ -22,10 +22,16 @@ const { label } = Astro.props;
 </div>
 
 <style>
+	/* Same token contract as DiagramShell/DiagramFrame (see the note there). */
 	.likec4-loading {
-		border: 1px dashed var(--sl-color-gray-5);
+		--likec4-border: var(--sl-color-gray-5, rgba(128, 128, 128, 0.35));
+		--likec4-surface: var(--sl-color-bg, transparent);
+		--likec4-text-muted: var(--sl-color-gray-2, rgba(128, 128, 128, 0.95));
+		--likec4-skeleton: var(--sl-color-gray-6, rgba(128, 128, 128, 0.18));
+
+		border: 1px dashed var(--likec4-border);
 		border-radius: 0.5rem;
-		background: var(--sl-color-bg);
+		background: var(--likec4-surface);
 		padding: 1.25rem;
 	}
 
@@ -34,7 +40,7 @@ const { label } = Astro.props;
 		font-size: 0.875rem;
 		line-height: 1.25rem;
 		font-weight: 500;
-		color: var(--sl-color-gray-2);
+		color: var(--likec4-text-muted);
 	}
 
 	.likec4-loading__lines {
@@ -45,7 +51,7 @@ const { label } = Astro.props;
 	.likec4-loading__line {
 		height: 1rem;
 		border-radius: 0.25rem;
-		background: var(--sl-color-gray-6);
+		background: var(--likec4-skeleton);
 		animation: likec4-pulse 1.6s ease-in-out infinite;
 	}