@purview-dev/astroc4 0.0.0-stage → 1.0.0-prerelease.1

package/LICENSE.md

@@ -0,0 +1,9 @@
+The MIT License (MIT)
+
+Copyright © 2026 Kieron Lanning
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,3 +1,180 @@
-# Temporary Holding Version
+# astroc4
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+A Starlight plugin for interactive [LikeC4](https://likec4.dev) architecture
+diagrams.
+
+- `<LikeC4View viewId="…" />` — render a view from the site's `.c4` model.
+- ` ```likec4 ` fences in `.mdx` — either inline DSL, compiled and laid out at
+  build time, or an empty fence with `view="…"` pointing at the model.
+- LikeC4 syntax highlighting for Expressive Code (`.c4` files, ` ```c4 `),
+  derived at build time from the Langium grammar in
+  [likec4/likec4](https://github.com/likec4/likec4) — no `ec.config.mjs`.
+- Every UI string translatable through Starlight's i18n.
+
+Full documentation lives in [`docs/wiki`](docs/wiki/index.md) (published with
+`mkdocs.yml`).
+
+## Install
+
+```sh
+bun add @purview-dev/astroc4@prerelease      # 1.0.0-prerelease.N
+```
+
+Published to npm under the `prerelease` dist-tag, so `bun add @purview-dev/astroc4` keeps
+resolving the last stable release. Astroc4 declares its peer dependencies, so
+Bun and npm install them with it; under pnpm add them explicitly (`astro`,
+`@astrojs/starlight`, `@astrojs/react`, `@astrojs/markdown-satteri`, `likec4`,
+`@likec4/core`, `react`, `react-dom`, `shiki`).
+
+Working on astroc4 itself? `bun add @purview-dev/astroc4@file:../path/to/astroc4` copies the
+package into `node_modules`, so run `bun install` in the site again after
+changing the plugin.
+
+## Use
+
+```js
+// astro.config.mjs
+import starlight from '@astrojs/starlight';
+import react from '@astrojs/react';
+import astroc4 from '@purview-dev/astroc4';
+
+export default defineConfig({
+ integrations: [starlight({ plugins: [astroc4()] }), react()],
+});
+```
+
+```mdx
+import LikeC4View from '@purview-dev/astroc4/components/LikeC4View.astro';
+
+<LikeC4View viewId="index" height={560} />
+```
+
+The plugin registers `LikeC4VitePlugin`, which compiles every
+`likec4.config.json` project under the site root. Keep exactly the projects you
+mean to render there: the first one found is the default for `<LikeC4View>`
+without a `projectId`, so a stray `.c4` project (a vendored example, say) can
+silently replace your own.
+
+### Options
+
+| Option | Default | |
+| --- | --- | --- |
+| `vitePlugin` | `{}` | Passed to `LikeC4VitePlugin`, e.g. `{ workspace: 'diagrams' }`. |
+| `fences` | `true` | Turn ` ```likec4 ` fences into diagrams. |
+| `highlighting` | `true` | Highlight LikeC4 source. See below. |
+
+### Syntax highlighting
+
+The plugin reads `packages/language-server/src/like-c4.langium` from
+`likec4/likec4`, derives a TextMate grammar from it, and registers that with
+the site's Expressive Code — so ` ```c4 ` fences, ` ```likec4 ` fences and
+`<Code lang="likec4">` all highlight with no configuration. Highlighting
+follows the language: when upstream adds a shape or a keyword, the next build
+picks it up.
+
+```js
+starlight({
+	plugins: [
+		astroc4({
+			highlighting: {
+				ref: 'v1.59.4', // branch, tag or commit SHA; default 'main'
+			},
+		}),
+	],
+});
+```
+
+| Option | Default | |
+| --- | --- | --- |
+| `ref` | `'main'` | Branch, tag or commit SHA. Pin a tag or SHA for reproducible CI. |
+| `repo` | `'likec4/likec4'` | Read the grammar from a fork or mirror. |
+| `offline` | `false` | Use the bundled snapshot, never the network. |
+| `onError` | `'fail'` | `fail`, `warn` or `silent` when the grammar cannot be fetched. |
+| `cacheTtl` | `3600` | Seconds a cached fetch stays fresh. |
+| `refresh` | `false` | Ignore the cache and refetch. |
+| `cacheDir` | `node_modules/.cache/astroc4` | Where to cache. |
+| `baseUrl` | `raw.githubusercontent.com` | Raw host to read from. |
+| `timeout` | `15000` | Request timeout in milliseconds. |
+
+`ASTROC4_REF` and `ASTROC4_OFFLINE=1` override `ref` and `offline`, which keeps
+CI configuration out of the config file.
+
+The grammar is resolved while Astro loads its config, so `astro dev`,
+`astro build`, `astro check` and `astro sync` all fail on a `ref` that does not
+exist, on a repository that cannot be reached, or on a file that is no longer a
+LikeC4 grammar — the same way any other build error does. Air-gapped builds use
+`offline: true`; builds that must not hard-fail use `onError: 'warn'`, which
+falls back to the last fetched grammar and then to the bundled snapshot.
+
+Fetched grammars are cached per `repo@ref`, so switching `ref` never thrashes
+and repeated builds do not touch the network.
+
+A site that already has an `ec.config.mjs` keeps working, and can pin the
+bundled grammar there instead:
+
+```js
+// ec.config.mjs
+import { defineEcConfig } from '@astrojs/starlight/expressive-code';
+import { likec4Language } from '@purview-dev/astroc4/expressive-code';
+
+export default defineEcConfig({ shiki: { langs: [likec4Language] } });
+```
+
+Expressive Code concatenates `shiki.langs` when it merges an `ec.config.mjs`
+with the integration options, so its own languages and the plugin's coexist.
+
+### `<LikeC4View>` props
+
+| Prop | Type | Default |
+| --- | --- | --- |
+| `viewId` | `string` | required |
+| `projectId` | `string` | first project |
+| `title` / `description` | `string` | translated defaults |
+| `height` | `number` | `480` |
+| `collapsible` / `defaultOpen` | `boolean` | `true` |
+
+### Fence options
+
+` ```likec4 view="…" title="…" description="…" height=420 collapsible=false defaultOpen=false `
+
+### Translating
+
+Add any key from `src/translations.mjs` to the site's
+`src/content/i18n/<lang>.json`. Placeholders are `{name}` — single braces,
+because some are filled in by the browser, not by i18next.
+
+## Icons
+
+Use a bundled pack (`azure:`, `aws:`, `gcp:`, `tech:`, `bootstrap:`), an
+absolute URL, or a file under the site's `public/` referenced by a path
+relative to the `.c4` file. Don't use LikeC4's `imageAliases`: the compiler
+bakes a build-machine `file://` path into the client bundle.
+
+## Develop
+
+```sh
+bun install
+bun run dev            # playground at http://localhost:4321 (English + French)
+bun run test           # hermetic unit suite: Langium parsing, grammar, fences, plugin
+bun run test:network   # the same, plus a check against the live likec4/likec4
+bun run test:site      # pack the tarball and build a real Starlight site from it
+bun run check          # astro check over playground/ and src/
+bun run grammar:check  # fail if the committed grammar snapshot is stale
+bun run build && bun run preview
+bun scripts/smoke.mjs http://localhost:4321   # headless: hydration, icons, highlighting, i18n
+```
+
+`Justfile` wraps each of those (`just verify` runs what the PR workflow runs).
+`src/grammar/likec4.tmLanguage.json` and `src/grammar/like-c4.langium` are
+generated — `bun run grammar:sync [--ref <tag>]` refreshes them from upstream,
+and never by hand.
+
+CI lives in `.github/workflows`: `pr.yml` runs the organisation gate plus the
+unit suite, the browser smoke test and the packed-consumer build; `release.yml`
+publishes to npm with **trusted publishing** — an OIDC token, no stored npm
+secret — under the `prerelease` dist-tag for prerelease versions, then tags the
+release. See [`docs/wiki/Repository-CI-CD.md`](docs/wiki/Repository-CI-CD.md).
+
+Open the folder in VS Code and install the recommended **LikeC4** extension
+for the language server: diagnostics, go-to-definition, hover and a live
+preview of `.c4` files.

package/package.json

@@ -1,6 +1,98 @@
 {
   "name": "@purview-dev/astroc4",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0-prerelease.1",
+  "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": {
+    "name": "Kieron Lanning",
+    "url": "https://kieronlanning.dev/"
+  },
+  "homepage": "https://purview.dev/projects/astroc4/",
+  "bugs": {
+    "url": "https://github.com/purview-dev/astroc4/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/purview-dev/astroc4.git"
+  },
+  "keywords": [
+    "likec4",
+    "c4-model",
+    "architecture-as-code",
+    "architecture-diagrams",
+    "diagrams",
+    "astro",
+    "astro-integration",
+    "starlight",
+    "starlight-plugin",
+    "expressive-code",
+    "shiki",
+    "syntax-highlighting",
+    "documentation"
+  ],
+  "type": "module",
+  "exports": {
+    ".": "./src/index.mjs",
+    "./expressive-code": "./src/expressive-code.mjs",
+    "./grammar/likec4.tmLanguage.json": "./src/grammar/likec4.tmLanguage.json",
+    "./components/LikeC4View.astro": "./src/components/LikeC4View.astro",
+    "./components/LikeC4Fence.astro": "./src/components/LikeC4Fence.astro"
+  },
+  "files": [
+    "src",
+    "!src/**/__tests__",
+    "!src/**/__fixtures__"
+  ],
+  "scripts": {
+    "dev": "cd playground && astro dev",
+    "build": "cd playground && astro build",
+    "preview": "cd playground && astro preview",
+    "check": "cd playground && astro check",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:network": "ASTROC4_NETWORK=1 vitest run src/grammar/__tests__/network.test.ts",
+    "test:site": "bun scripts/test-site.mjs",
+    "test:smoke": "node scripts/smoke.mjs",
+    "grammar:sync": "bun scripts/sync-grammar.mjs",
+    "grammar:check": "bun scripts/sync-grammar.mjs --check",
+    "likec4:validate": "likec4 validate playground/src/likec4"
+  },
+  "peerDependencies": {
+    "@astrojs/markdown-satteri": ">=0.4.6",
+    "@astrojs/react": ">=7.1.2",
+    "@astrojs/starlight": ">=0.42.8",
+    "@likec4/core": ">=1.59.4",
+    "astro": ">=7.4.4",
+    "likec4": ">=1.59.4",
+    "react": ">=19.0.0",
+    "react-dom": ">=19.0.0",
+    "shiki": ">=1.0.0"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.12",
+    "@astrojs/markdown-satteri": "^0.4.6",
+    "@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",
+    "likec4": "^1.59.4",
+    "playwright": "^1.63.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "sharp": "^0.35.3",
+    "shiki": "^4.5.0",
+    "typescript": "^6.0.3",
+    "vitest": "^5.0.5"
+  },
+  "engines": {
+    "bun": ">=1.4.4",
+    "node": ">=22.19.0"
+  },
+  "packageManager": "bun@1.4.4",
+  "publishConfig": {
+    "access": "public"
+  }
+}
+

package/src/components/DiagramFrame.astro

@@ -0,0 +1,72 @@
+---
+// DiagramFrame.astro
+// path: src/components/DiagramFrame.astro
+// The sized container a LikeC4 island renders into. Shared by <LikeC4View>
+// (project model) and <LikeC4Fence> (inline DSL) so both size identically.
+
+interface Props {
+	/** Rendered height in pixels. */
+	height?: number;
+}
+
+const { height = 480 } = Astro.props;
+---
+
+<div class="likec4-frame" style={`--likec4-height: ${height}px;`}>
+	<slot />
+</div>
+
+<style>
+	/* 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. */
+	.likec4-frame {
+		min-height: var(--likec4-height);
+	}
+
+	/* :global() because the markup below this point is created at runtime by
+	   LikeC4 (or by the React error boundary) and so carries no scope hash. */
+	.likec4-frame :global(.likec4-view),
+	.likec4-frame :global([data-likec4-view]) {
+		width: 100%;
+		height: var(--likec4-height);
+		overflow: hidden;
+		border-radius: 0.5rem;
+	}
+
+	.likec4-frame :global(.likec4-error) {
+		border: 1px solid var(--sl-color-red);
+		border-radius: 0.5rem;
+		background: var(--sl-color-red-low);
+		padding: 1rem;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		color: var(--sl-color-red-high);
+	}
+
+	.likec4-frame :global(.likec4-error p) {
+		margin: 0.25rem 0 0;
+	}
+
+	.likec4-frame :global(.likec4-error .likec4-error__title) {
+		margin: 0;
+		font-weight: 600;
+	}
+
+	.likec4-frame :global(.likec4-error__retry) {
+		margin-top: 0.75rem;
+		border: 1px solid var(--sl-color-red);
+		border-radius: 0.375rem;
+		background: transparent;
+		padding: 0.375rem 0.75rem;
+		font: inherit;
+		font-size: 0.75rem;
+		font-weight: 500;
+		color: inherit;
+		cursor: pointer;
+	}
+
+	.likec4-frame :global(.likec4-error__retry:hover) {
+		background: var(--sl-color-bg);
+	}
+</style>

package/src/components/DiagramShell.astro

@@ -0,0 +1,121 @@
+---
+// DiagramShell.astro
+// path: src/components/DiagramShell.astro
+// Framed, optionally collapsible container around a diagram so it reads as a
+// deliberate block inside the prose rather than a loose widget.
+//
+// Plain CSS over Starlight's custom properties rather than utility classes: a
+// host site's Tailwind does not scan this package, so any class it did not
+// already generate would silently be unstyled.
+
+interface Props {
+	title: string;
+	description?: string;
+	hint?: string;
+	/** Whether the shell can be collapsed/expanded. */
+	collapsible?: boolean;
+	/** Initial open state when collapsible is enabled. */
+	defaultOpen?: boolean;
+}
+
+const { title, description, hint, collapsible = true, defaultOpen = true } = Astro.props;
+---
+
+<section class="not-content likec4-shell">
+	{
+		collapsible ? (
+			<details open={defaultOpen}>
+				<summary class="likec4-shell__header">
+					<div class="likec4-shell__heading">
+						<h3 class="likec4-shell__title">{title}</h3>
+						{description && <p class="likec4-shell__description">{description}</p>}
+						{hint && <p class="likec4-shell__hint">{hint}</p>}
+					</div>
+				</summary>
+
+				<div class="likec4-shell__body">
+					<slot />
+				</div>
+			</details>
+		) : (
+			<>
+				<header class="likec4-shell__header">
+					<h3 class="likec4-shell__title likec4-shell__title--block">{title}</h3>
+					{description && <p class="likec4-shell__description">{description}</p>}
+					{hint && <p class="likec4-shell__hint">{hint}</p>}
+				</header>
+
+				<div class="likec4-shell__body">
+					<slot />
+				</div>
+			</>
+		)
+	}
+</section>
+
+<style>
+	.likec4-shell {
+		margin-block: 1em;
+		overflow: hidden;
+		border: 1px solid var(--sl-color-gray-5);
+		border-radius: 0.75rem;
+		background: var(--sl-color-bg-nav);
+	}
+
+	.likec4-shell__header {
+		border-bottom: 1px solid var(--sl-color-gray-5);
+		background: var(--sl-color-bg);
+		padding: 1em 1.25rem;
+		line-height: 1.4;
+	}
+
+	/* Use the native details/summary marker so this matches Starlight's own
+	   collapsible blocks instead of inventing a second disclosure style. */
+	summary.likec4-shell__header {
+		cursor: pointer;
+	}
+
+	.likec4-shell__heading {
+		display: inline-block;
+		vertical-align: top;
+	}
+
+	.likec4-shell__title {
+		display: inline;
+		margin: 0;
+		font-size: 1rem;
+		line-height: 1.5rem;
+		font-weight: 600;
+		color: var(--sl-color-white);
+	}
+
+	.likec4-shell__title--block {
+		display: block;
+	}
+
+	.likec4-shell__description {
+		margin: 0.25rem 0 0;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		color: var(--sl-color-gray-2);
+	}
+
+	.likec4-shell__hint {
+		margin: 0.5rem 0 0;
+		font-size: 0.75rem;
+		line-height: 1rem;
+		font-weight: 500;
+		color: var(--sl-color-text-accent);
+	}
+
+	.likec4-shell__body {
+		padding: 1em 1.25rem;
+	}
+
+	@media (min-width: 48rem) {
+		.likec4-shell__header,
+		.likec4-shell__body {
+			padding-inline: 1.5rem;
+		}
+	}
+</style>

package/src/components/ErrorBoundary.tsx

@@ -0,0 +1,52 @@
+// ErrorBoundary.tsx
+// path: src/components/ErrorBoundary.tsx
+// Keeps a crashing LikeC4 island (the renderer depends on browser-only
+// measurement APIs) from blanking the surrounding docs page. Styled by the
+// `.likec4-error` rules in DiagramFrame.astro, which is always its ancestor.
+
+import { Component, type ReactNode } from 'react';
+
+import type { IslandLabels } from './labels';
+
+type Props = {
+	children: ReactNode;
+	labels: Pick<IslandLabels, 'errorTitle' | 'errorBody' | 'errorRetry'>;
+};
+
+type State = {
+	hasError: boolean;
+};
+
+export default class ErrorBoundary extends Component<Props, State> {
+	state: State = { hasError: false };
+
+	static getDerivedStateFromError(): State {
+		return { hasError: true };
+	}
+
+	componentDidCatch(error: unknown) {
+		console.error('[likec4] Diagram render error:', error);
+	}
+
+	handleRetry = () => {
+		this.setState({ hasError: false });
+	};
+
+	render() {
+		if (this.state.hasError) {
+			const { labels } = this.props;
+
+			return (
+				<div role="alert" className="likec4-error">
+					<p className="likec4-error__title">{labels.errorTitle}</p>
+					<p>{labels.errorBody}</p>
+					<button type="button" onClick={this.handleRetry} className="likec4-error__retry">
+						{labels.errorRetry}
+					</button>
+				</div>
+			);
+		}
+
+		return this.props.children;
+	}
+}

package/src/components/LikeC4Fence.astro

@@ -0,0 +1,62 @@
+---
+// LikeC4Fence.astro
+// path: src/components/LikeC4Fence.astro
+// Target of the ```likec4 fence transform. Authors never write this directly —
+// src/fences.mjs rewrites the fence into it, passing the model it compiled at
+// build time as a JSON string.
+
+import DiagramFrame from './DiagramFrame.astro';
+import DiagramShell from './DiagramShell.astro';
+import LikeC4InlineView from './LikeC4InlineView';
+import LoadingPlaceholder from './LoadingPlaceholder.astro';
+import { getIslandLabels, getTranslator } from './labels';
+
+interface Props {
+	/** Layouted model, JSON-encoded by the fence plugin. */
+	model: string;
+	viewId: string;
+	title?: string;
+	description?: string;
+	/** Arrives as a string via the MDX attribute. */
+	height?: string;
+	collapsible?: string;
+	defaultOpen?: string;
+}
+
+const t = getTranslator(Astro.locals.t);
+const labels = getIslandLabels(t, 'likec4.fence.loading');
+
+const {
+	model,
+	viewId,
+	title = t('likec4.fence.title'),
+	description,
+	height = '420',
+	collapsible = 'true',
+	defaultOpen = 'true',
+} = Astro.props;
+
+let parsedModel: unknown;
+
+try {
+	parsedModel = JSON.parse(model);
+} catch (cause) {
+	throw new Error('<LikeC4Fence> received a model that is not valid JSON.', { cause });
+}
+
+const parsedHeight = Number.parseInt(height, 10);
+---
+
+<DiagramShell
+	title={title}
+	description={description}
+	hint={t('likec4.fence.hint')}
+	collapsible={collapsible !== 'false'}
+	defaultOpen={defaultOpen !== 'false'}
+>
+	<DiagramFrame height={Number.isFinite(parsedHeight) ? parsedHeight : 420}>
+		<LikeC4InlineView model={parsedModel} viewId={viewId} labels={labels} client:only="react">
+			<LoadingPlaceholder slot="fallback" label={labels.loading} />
+		</LikeC4InlineView>
+	</DiagramFrame>
+</DiagramShell>

package/src/components/LikeC4InlineView.tsx

@@ -0,0 +1,67 @@
+// LikeC4InlineView.tsx
+// path: src/components/LikeC4InlineView.tsx
+// Renders a LikeC4 model that was compiled at build time from a ```likec4
+// fence, rather than loaded from the workspace project.
+//
+// The DSL is parsed and laid out by the fence plugin during the build (layout
+// needs a WASM graph engine, so it cannot happen in the browser); this island
+// only rehydrates the resulting plain-JSON model.
+
+import { getProjectIcons } from 'likec4:icons';
+import { projects } from 'likec4:projects';
+// `@likec4/core/model`, not `likec4/model`: the latter is the Node entry point
+// and pulls `node:module`'s createRequire into the browser bundle, which fails
+// at hydration with "createRequire is not a function". This is the same module
+// `likec4/react` itself imports.
+import { LikeC4Model } from '@likec4/core/model';
+import type { aux, UnknownLayouted } from 'likec4/model';
+import { LikeC4View as GenericLikeC4View, LikeC4ModelProvider } from 'likec4/react';
+import { useMemo } from 'react';
+
+import ErrorBoundary from './ErrorBoundary';
+import { DEFAULT_LABELS, type IslandLabels } from './labels';
+import { withImageIcons } from './render-icon';
+
+type Props = {
+	/** Layouted model dump produced at build time. */
+	model: unknown;
+	viewId: string;
+	/** Translated on the server; defaults to English. */
+	labels?: IslandLabels;
+};
+
+function LikeC4InlineViewContent({ model, viewId }: Props) {
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any -- dump is plain JSON
+	const likec4model = useMemo(() => LikeC4Model.create(model as any), [model]);
+
+	// Inline models are not workspace projects, so they have no icon bundle of
+	// their own. The icon ids (`tech:…`, `aws:…`) are global, so borrow the
+	// renderer from the first project rather than shipping a second copy.
+	const iconRenderer = useMemo(() => {
+		const first = projects[0];
+
+		return first ? withImageIcons(getProjectIcons(String(first.id))) : undefined;
+	}, []);
+
+	return (
+		<LikeC4ModelProvider likec4model={likec4model}>
+			<GenericLikeC4View
+				viewId={viewId as aux.ViewId<UnknownLayouted>}
+				controls={false}
+				renderIcon={iconRenderer}
+				browser={{
+					enableFocusMode: false,
+					enableSearch: false,
+				}}
+			/>
+		</LikeC4ModelProvider>
+	);
+}
+
+export default function LikeC4InlineView({ labels = DEFAULT_LABELS, ...props }: Props) {
+	return (
+		<ErrorBoundary labels={labels}>
+			<LikeC4InlineViewContent {...props} />
+		</ErrorBoundary>
+	);
+}