@likec4/diagram 1.59.4 → 1.61.0

package/dist/custom/index.mjs

@@ -0,0 +1,36 @@
+import { compoundDeploymentNode, compoundElementNode, defaultNodeRenderer, defineNode, defineNodes, deploymentNode, elementNode, sequenceActorNode, viewGroupNode, wrapNode } from "./customNodes.mjs";
+import { Base } from "../base/Base.mjs";
+import { IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, useEnabledFeatures } from "../context/DiagramFeatures.mjs";
+import { Overlay } from "../overlays/overlay/Overlay.mjs";
+import { PortalToContainer } from "../components/PortalToContainer.mjs";
+import { FramerMotionConfig } from "../context/FramerMotionConfig.mjs";
+import { ErrorBoundary, ErrorFallback } from "../components/ErrorFallback.mjs";
+import { LikeC4MantineProvider } from "../LikeC4MantineProvider.mjs";
+import { CompoundActionButton } from "../base-primitives/compound/CompoundActionButton.mjs";
+import { CompoundDetailsButton } from "../base-primitives/compound/CompoundDetailsButton.mjs";
+import { CompoundNodeContainer } from "../base-primitives/compound/CompoundNodeContainer.mjs";
+import { CompoundTitle } from "../base-primitives/compound/CompoundTitle.mjs";
+import { ElementActionButtons } from "../base-primitives/element/ElementActionButtons.mjs";
+import { Markdown } from "../base-primitives/Markdown.mjs";
+import { ElementData } from "../base-primitives/element/ElementData.mjs";
+import { ElementDetailsButton } from "../base-primitives/element/ElementDetailsButton.mjs";
+import { ElementNodeContainer } from "../base-primitives/element/ElementNodeContainer.mjs";
+import { ElementShape } from "../base-primitives/element/ElementShape.mjs";
+import { ElementTag, ElementTags } from "../base-primitives/element/ElementTags.mjs";
+import { DefaultHandles } from "../base-primitives/NodeHandles.mjs";
+import { CompoundActions } from "../likec4diagram/custom/nodes/CompoundActions.mjs";
+import { DeploymentElementActions, ElementActions } from "../likec4diagram/custom/nodes/ElementActions.mjs";
+import { GraphElementNode } from "../likec4diagram/custom/nodes/GraphElementNode.mjs";
+import { NodeDrifts } from "../likec4diagram/custom/nodes/NodeDrifts.mjs";
+import { Toolbar } from "../likec4diagram/custom/nodes/toolbar/Toolbar.mjs";
+import { CompoundDeploymentToolbar, CompoundElementToolbar } from "../likec4diagram/custom/nodes/toolbar/CompoundToolbar.mjs";
+import { DeploymentElementToolbar, ElementToolbar } from "../likec4diagram/custom/nodes/toolbar/ElementToolbar.mjs";
+import { CompoundDeploymentNode, CompoundDetailsButtonWithHandler, CompoundElementNode, DeploymentNode, ElementDetailsButtonWithHandler, ElementNode, ViewGroupNode } from "../likec4diagram/custom/nodes/nodes.mjs";
+import { SequenceActorNode, SequenceParallelArea } from "../likec4diagram/custom/nodes/SequenceActorNode.mjs";
+import { SequenceSubflowArea } from "../likec4diagram/custom/nodes/SequenceSubFlow.mjs";
+import { LikeC4Styles } from "../LikeC4Styles.mjs";
+import { TagStylesProvider } from "../context/TagStylesContext.mjs";
+import { CustomizationProvider } from "../customization/CustomizationContext.mjs";
+import { defineCustomComponents } from "../customization/customizable.mjs";
+
+export { Base, CompoundActionButton, CompoundActions, CompoundDeploymentNode, CompoundDeploymentToolbar, CompoundDetailsButton, CompoundDetailsButtonWithHandler, CompoundElementNode, CompoundElementToolbar, CompoundNodeContainer, CompoundTitle, CustomizationProvider, DefaultHandles, DeploymentElementActions, DeploymentElementToolbar, DeploymentNode, ElementActionButtons, ElementActions, ElementData, ElementDetailsButton, ElementDetailsButtonWithHandler, ElementNode, ElementNodeContainer, ElementShape, ElementTag, ElementTags, ElementToolbar, ErrorBoundary, ErrorFallback, FramerMotionConfig, GraphElementNode, IfEnabled, IfNotEnabled, IfNotReadOnly, IfReadOnly, LikeC4MantineProvider, LikeC4Styles, Markdown, NodeDrifts, Overlay, PortalToContainer, SequenceActorNode, SequenceParallelArea, SequenceSubflowArea, TagStylesProvider, Toolbar, ViewGroupNode, compoundDeploymentNode, compoundElementNode, defaultNodeRenderer, defineCustomComponents, defineNode, defineNodes, deploymentNode, elementNode, sequenceActorNode, useEnabledFeatures, viewGroupNode, wrapNode };

package/dist/custom/primitives.d.mts

@@ -0,0 +1,14 @@
+import { CompoundActionButton } from "../base-primitives/compound/CompoundActionButton.mjs";
+import { CompoundDetailsButton } from "../base-primitives/compound/CompoundDetailsButton.mjs";
+import { CompoundNodeContainer } from "../base-primitives/compound/CompoundNodeContainer.mjs";
+import { CompoundTitle } from "../base-primitives/compound/CompoundTitle.mjs";
+import { ElementActionButtons } from "../base-primitives/element/ElementActionButtons.mjs";
+import { ElementData } from "../base-primitives/element/ElementData.mjs";
+import { ElementDetailsButton } from "../base-primitives/element/ElementDetailsButton.mjs";
+import { ElementNodeContainer } from "../base-primitives/element/ElementNodeContainer.mjs";
+import { ElementShape, ElementShapeProps } from "../base-primitives/element/ElementShape.mjs";
+import { ElementTag, ElementTagProps, ElementTags, ElementTagsProps } from "../base-primitives/element/ElementTags.mjs";
+import { Markdown } from "../base-primitives/Markdown.mjs";
+import { DefaultHandles } from "../base-primitives/NodeHandles.mjs";
+import "../base-primitives/index.mjs";
+export { CompoundActionButton, CompoundDetailsButton, CompoundNodeContainer, CompoundTitle, DefaultHandles, ElementActionButtons, ElementData, ElementDetailsButton, ElementNodeContainer, ElementShape, type ElementShapeProps, ElementTag, type ElementTagProps, ElementTags, type ElementTagsProps, Markdown };

package/dist/customization/CustomizationContext.d.mts

@@ -0,0 +1,50 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { CustomComponents } from "./customization-types.mjs";
+import { PropsWithChildren } from "react";
+type CustomizationProviderProps = {
+  /**
+   * Slot overrides from {@link defineCustomComponents}.
+   * Prefer a module-scoped constant so the map identity stays stable across HMR.
+   */
+  components?: CustomComponents | undefined;
+};
+/**
+ * Provides UI slot overrides for registered customizable components
+ * (`LikeC4Diagram`, logos, …).
+ *
+ * Place this above the diagram tree (`LikeC4Diagram` / `ReactLikeC4` / `LikeC4View`).
+ * Ordering relative to `LikeC4ModelProvider` does not matter.
+ *
+ * Overrides support two modes:
+ * - **replace** — pass a component that receives the original props
+ * - **wrap** — use `wrap` from {@link defineCustomComponents}; receives `{ Original, ...props }`
+ *
+ * @experimental
+ *
+ * @example
+ * ```tsx
+ * import {
+ *   CustomizationProvider,
+ *   defineCustomComponents,
+ * } from 'likec4/react'
+ *
+ * const components = defineCustomComponents(({ wrap }) => ({
+ *   LogoSvg: () => <span>Brand</span>,
+ *   LikeC4Diagram: wrap(({ Original, ...props }) => (
+ *     <Original {...props} pannable={false} />
+ *   )),
+ * }))
+ *
+ * function App() {
+ *   return (
+ *     <CustomizationProvider components={components}>
+ *       <LikeC4ModelProvider likec4model={model}>
+ *         <LikeC4View viewId="index" />
+ *       </LikeC4ModelProvider>
+ *     </CustomizationProvider>
+ *   )
+ * }
+ * ```
+ */
+export declare function CustomizationProvider({ components, children }: PropsWithChildren<CustomizationProviderProps>): import("react").JSX.Element;
+export {};

package/dist/customization/CustomizationContext.mjs

@@ -0,0 +1,64 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { applyStableCustomComponents } from "./stableComponents.mjs";
+import { createContext, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+// src/customization/CustomizationContext.tsx
+const CustomizationContext = createContext(null);
+CustomizationContext.displayName = "CustomizationContext";
+/**
+* Provides UI slot overrides for registered customizable components
+* (`LikeC4Diagram`, logos, …).
+*
+* Place this above the diagram tree (`LikeC4Diagram` / `ReactLikeC4` / `LikeC4View`).
+* Ordering relative to `LikeC4ModelProvider` does not matter.
+*
+* Overrides support two modes:
+* - **replace** — pass a component that receives the original props
+* - **wrap** — use `wrap` from {@link defineCustomComponents}; receives `{ Original, ...props }`
+*
+* @experimental
+*
+* @example
+* ```tsx
+* import {
+*   CustomizationProvider,
+*   defineCustomComponents,
+* } from 'likec4/react'
+*
+* const components = defineCustomComponents(({ wrap }) => ({
+*   LogoSvg: () => <span>Brand</span>,
+*   LikeC4Diagram: wrap(({ Original, ...props }) => (
+*     <Original {...props} pannable={false} />
+*   )),
+* }))
+*
+* function App() {
+*   return (
+*     <CustomizationProvider components={components}>
+*       <LikeC4ModelProvider likec4model={model}>
+*         <LikeC4View viewId="index" />
+*       </LikeC4ModelProvider>
+*     </CustomizationProvider>
+*   )
+* }
+* ```
+*/
+function CustomizationProvider({ components, children }) {
+	const stable = useStableComponents(components);
+	return /* @__PURE__ */ jsx(CustomizationContext.Provider, {
+		value: useMemo(() => stable ? { components: stable } : null, [stable]),
+		children
+	});
+}
+/**
+* Keeps a stable function identity per slot while swapping the underlying
+* implementation. That makes override maps HMR-friendly: dependents keep the
+* same component reference while the latest replace/wrap body is used.
+*/
+function useStableComponents(input) {
+	const instancesRef = useRef({});
+	return useMemo(() => applyStableCustomComponents(instancesRef.current, input), [input]);
+}
+
+export { CustomizationContext, CustomizationProvider };

package/dist/customization/customizable.d.mts

@@ -0,0 +1,32 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { CustomComponents, Customizables, Wrapper } from "./customization-types.mjs";
+import { FC } from "react";
+/**
+ * Marks a component as a wrap override. The registered shell injects `Original`
+ * (the built-in implementation) into the props.
+ *
+ * @experimental
+ */
+declare function wrapOriginal<P>(wrapper: Wrapper<P>): (props: P) => any;
+/**
+ * Defines overrides for registered customizable slots.
+ *
+ * Prefer keeping the returned object referentially stable (module scope) so
+ * HMR and re-renders keep override identities stable via {@link CustomizationProvider}.
+ *
+ * @example
+ * ```tsx
+ * const components = defineCustomComponents(({ wrap }) => ({
+ *   LogoSvg: () => <span>My logo</span>, // replace
+ *   LogoIconSvg: wrap(({ Original, ...props }) => (
+ *     <Original {...props} onClick={() => console.log('logo')} />
+ *   )),
+ * }))
+ * ```
+ *
+ * @experimental
+ */
+export declare function defineCustomComponents(value: Partial<Customizables> | ((ctx: {
+  wrap: typeof wrapOriginal;
+}) => Partial<Customizables>)): CustomComponents;
+export {};

package/dist/customization/customizable.mjs

@@ -0,0 +1,75 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { WrappedMarker } from "./customization-types.mjs";
+import { CustomizationContext } from "./CustomizationContext.mjs";
+import { use } from "react";
+import { jsx } from "react/jsx-runtime";
+
+// src/customization/customizable.tsx
+/**
+* Marks a component as a wrap override. The registered shell injects `Original`
+* (the built-in implementation) into the props.
+*
+* @experimental
+*/
+function wrapOriginal(wrapper) {
+	return Object.assign(wrapper, { [WrappedMarker]: true });
+}
+/**
+* Defines overrides for registered customizable slots.
+*
+* Prefer keeping the returned object referentially stable (module scope) so
+* HMR and re-renders keep override identities stable via {@link CustomizationProvider}.
+*
+* @example
+* ```tsx
+* const components = defineCustomComponents(({ wrap }) => ({
+*   LogoSvg: () => <span>My logo</span>, // replace
+*   LogoIconSvg: wrap(({ Original, ...props }) => (
+*     <Original {...props} onClick={() => console.log('logo')} />
+*   )),
+* }))
+* ```
+*
+* @experimental
+*/
+function defineCustomComponents(value) {
+	if (typeof value === "function") return value({ wrap: wrapOriginal });
+	return value;
+}
+function useCustomization(name) {
+	return use(CustomizationContext)?.components?.[name];
+}
+const registry = /* @__PURE__ */ new Map();
+function register(displayName, original) {
+	const name = displayName;
+	const existing = registry.get(name);
+	if (existing) {
+		existing.Original = original;
+		return existing.HMRBoundary;
+	}
+	const ref = {
+		Original: original,
+		HMRBoundary: ((props) => {
+			const Cmp = useCustomization(name);
+			if (!Cmp) return /* @__PURE__ */ jsx(ref.Original, { ...props });
+			if (Cmp[WrappedMarker]) return /* @__PURE__ */ jsx(Cmp, {
+				Original: ref.Original,
+				...props
+			});
+			return /* @__PURE__ */ jsx(Cmp, { ...props });
+		})
+	};
+	ref.HMRBoundary.displayName = displayName;
+	registry.set(name, ref);
+	return ref.HMRBoundary;
+}
+/**
+* Registers a LikeC4 UI slot that consumers can override via {@link CustomizationProvider}.
+*
+* @internal Prefer not to call from user code — slot names are owned by LikeC4.
+*/
+function customizable(displayName) {
+	return (Component) => register(displayName, Component);
+}
+
+export { customizable, defineCustomComponents };

package/dist/customization/customization-types.d.mts

@@ -0,0 +1,40 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { ElementShape } from "../base-primitives/element/ElementShape.mjs";
+import { Logo, LogoIcon } from "../components/Logo.mjs";
+import { LikeC4Diagram } from "../LikeC4Diagram.mjs";
+import { LikeC4View } from "../LikeC4View.mjs";
+import { ReactLikeC4 } from "../ReactLikeC4.mjs";
+import { FC } from "react";
+import { JSX as JSX$1 } from "react/jsx-runtime";
+type RegisteredCustomizables = typeof LikeC4Diagram | typeof LikeC4View | typeof ReactLikeC4 | typeof Logo | typeof LogoIcon | typeof ElementShape;
+export type Customizable<TComponent extends FC<any>, Name extends string> = TComponent & {
+  readonly displayName: Name;
+};
+export type CustomizableName = RegisteredCustomizables['displayName'];
+export type Customizables = { [K in CustomizableName]: Extract<RegisteredCustomizables, {
+  displayName: K;
+}> extends Customizable<infer Component, K> ? Component : never; };
+export type PropsOf<FC> = FC extends ((props: infer P) => any) ? P : never;
+export type Wrapper<P> = (props: P & {
+  Original: FC<P>;
+}) => JSX$1.Element;
+/**
+ * Marker copied onto wrap overrides so the registered shell can inject `Original`.
+ * @internal
+ */
+export declare const WrappedMarker: unique symbol;
+/**
+ * A replacement or wrap override for a registered slot.
+ */
+export type CustomComponent<Original extends FC<any>> = Original & {
+  [WrappedMarker]?: never;
+} | Wrapper<PropsOf<Original>> & {
+  [WrappedMarker]: true;
+};
+/**
+ * Partial map of slot overrides for {@link CustomizationProvider}.
+ *
+ * @experimental
+ */
+export type CustomComponents = { [K in CustomizableName]?: CustomComponent<Customizables[K]>; };
+export {};

package/dist/customization/customization-types.mjs

@@ -0,0 +1,8 @@
+// src/customization/customization-types.ts
+/**
+* Marker copied onto wrap overrides so the registered shell can inject `Original`.
+* @internal
+*/
+const WrappedMarker = Symbol.for("likec4.customizable.wrapped");
+
+export { WrappedMarker };

package/dist/customization/stableComponents.mjs

@@ -0,0 +1,35 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { WrappedMarker } from "./customization-types.mjs";
+import { isEmptyish } from "remeda";
+
+// src/customization/stableComponents.ts
+/**
+* Builds a components map with stable function identities per slot.
+* Mutates `instances` so later calls with new override bodies reuse the same shells.
+*
+* @internal
+*/
+function applyStableCustomComponents(instances, input) {
+	if (input === void 0) return;
+	const next = {};
+	for (const [key, value] of Object.entries(input)) {
+		if (value == null) continue;
+		let ref = instances[key];
+		if (!ref) {
+			const entry = {
+				component: value,
+				instance: ((props) => entry.component(props))
+			};
+			ref = entry;
+			instances[key] = entry;
+		}
+		ref.component = value;
+		if (value[WrappedMarker]) ref.instance[WrappedMarker] = true;
+		else delete ref.instance[WrappedMarker];
+		next[key] = ref.instance;
+	}
+	if (isEmptyish(next)) return;
+	return next;
+}
+
+export { applyStableCustomComponents };

package/dist/editor/LikeC4EditorCallbacks.d.mts

@@ -0,0 +1,42 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import * as t from "@likec4/core/types";
+/**
+ * Result of applying a change from the LikeC4 Editor.
+ */
+export interface LikeC4EditorChangeResult {
+  /**
+   * Whether applying the change will publish a refreshed view to the diagram
+   * that the editor should wait for.
+   *
+   * Returning no result from `handleChange` defaults this to `true`,
+   * preserving the existing behavior for integrations that persist changes
+   * through an external model service.
+   */
+  waitForViewSync: boolean;
+}
+/**
+ * Callbacks from LikeC4 Editor.
+ */
+export interface LikeC4EditorCallbacks {
+  /**
+   * Apply semantic layout to a view (if AI is available)
+   * See vite-plugin settings for more details
+   */
+  applySemanticLayout?: undefined | ((viewId: t.ViewId) => Promise<void>);
+  /**
+   * Fetch a view by its ID and layout type.
+   *
+   * @param viewId - The ID of the view to fetch.
+   * @param layout - The layout type to use when fetching the view.
+   */
+  fetchView(viewId: t.ViewId, layout?: t.LayoutType): t.LayoutedView | Promise<t.LayoutedView>;
+  /**
+   * Callback invoked when the view changes.
+   *
+   * Return `{ waitForViewSync: false }` when the integration applies the
+   * change locally and will not publish a refreshed view. When changes are
+   * batched, the editor waits if any callback invocation expects a refresh.
+   */
+  handleChange(viewId: t.ViewId, change: t.ViewChange): void | LikeC4EditorChangeResult | Promise<void | LikeC4EditorChangeResult>;
+}
+export declare function createLikeC4Editor(callbacks: LikeC4EditorCallbacks): LikeC4EditorCallbacks;

package/dist/editor/LikeC4EditorCallbacks.mjs

@@ -0,0 +1,11 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+
+// src/editor/LikeC4EditorCallbacks.tsx
+function shouldWaitForViewSync(result) {
+	return result?.waitForViewSync ?? true;
+}
+function createLikeC4Editor(callbacks) {
+	return callbacks;
+}
+
+export { createLikeC4Editor, shouldWaitForViewSync };

package/dist/editor/LikeC4EditorProvider.d.mts

@@ -0,0 +1,28 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { LikeC4EditorCallbacks } from "./LikeC4EditorCallbacks.mjs";
+import { PropsWithChildren } from "react";
+export type LikeC4EditorProviderProps = PropsWithChildren<{
+  editor: LikeC4EditorCallbacks;
+}>;
+/**
+ * Provider for the LikeC4 Editor.
+ * @example
+ * ```tsx
+ *
+ * // Not required to use memo for editor callbacks
+ * const editor = createLikeC4Editor({
+ *   fetchView: async (viewId, layout) => {
+ *     // fetch view logic
+ *   },
+ *   handleChange: (viewId, change) => {
+ *     // handle change logic
+ *   }
+ * })
+ *
+ * <LikeC4EditorProvider
+ *  editor={editor}>
+ *   <App />
+ * </LikeC4EditorProvider>
+ * ```
+ */
+export declare function LikeC4EditorProvider({ children, editor }: LikeC4EditorProviderProps): import("react").JSX.Element;

package/dist/editor/LikeC4EditorProvider.mjs

@@ -0,0 +1,38 @@
+import { __name } from "../_virtual/_rolldown/runtime.mjs";
+import { createContext, useContext } from "react";
+import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
+
+// src/editor/LikeC4EditorProvider.tsx
+const LikeC4EditorReactContext = createContext(null);
+/**
+* Provider for the LikeC4 Editor.
+* @example
+* ```tsx
+*
+* // Not required to use memo for editor callbacks
+* const editor = createLikeC4Editor({
+*   fetchView: async (viewId, layout) => {
+*     // fetch view logic
+*   },
+*   handleChange: (viewId, change) => {
+*     // handle change logic
+*   }
+* })
+*
+* <LikeC4EditorProvider
+*  editor={editor}>
+*   <App />
+* </LikeC4EditorProvider>
+* ```
+*/
+function LikeC4EditorProvider({ children, editor }) {
+	return /* @__PURE__ */ jsx(LikeC4EditorReactContext.Provider, {
+		value: editor,
+		children
+	});
+}
+function useOptionalLikeC4Editor() {
+	return useContext(LikeC4EditorReactContext);
+}
+
+export { LikeC4EditorProvider, useOptionalLikeC4Editor };