likec4 1.15.1 → 1.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "likec4",
-  "version": "1.15.1",
+  "version": "1.16.0",
   "license": "MIT",
   "homepage": "https://likec4.dev",
   "author": "Denis Davydkov <denis@davydkov.com>",
@@ -98,7 +98,7 @@
   "dependencies": {
     "@hpcc-js/wasm-graphviz": "1.6.1",
     "@vitejs/plugin-react-swc": "3.7.1",
-    "playwright": "1.47.2",
+    "playwright": "1.48.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "type-fest": "4.26.1",
@@ -106,14 +106,14 @@
   },
   "devDependencies": {
     "@fontsource/ibm-plex-sans": "^5.1.0",
-    "@likec4/core": "1.15.1",
-    "@likec4/diagram": "1.15.1",
-    "@likec4/generators": "1.15.1",
-    "@likec4/icons": "1.15.1",
-    "@likec4/language-server": "1.15.1",
-    "@likec4/layouts": "1.15.1",
-    "@likec4/log": "1.15.1",
-    "@likec4/tsconfig": "1.15.1",
+    "@likec4/core": "1.16.0",
+    "@likec4/diagram": "1.16.0",
+    "@likec4/generators": "1.16.0",
+    "@likec4/icons": "1.16.0",
+    "@likec4/language-server": "1.16.0",
+    "@likec4/layouts": "1.16.0",
+    "@likec4/log": "1.16.0",
+    "@likec4/tsconfig": "1.16.0",
     "@mantine/core": "7.13.4",
     "@mantine/hooks": "7.13.4",
     "@mantine/vanilla-extract": "7.13.4",
@@ -144,7 +144,7 @@
     "execa": "^9.3.1",
     "fast-equals": "^5.0.1",
     "fdir": "^6.4.2",
-    "framer-motion": "^11.11.9",
+    "framer-motion": "^11.11.10",
     "get-port": "^7.1.0",
     "glob": "^11.0.0",
     "html-to-image": "^1.11.11",
@@ -158,8 +158,9 @@
     "postcss": "^8.4.47",
     "postcss-preset-mantine": "^1.17.0",
     "pretty-ms": "^9.1.0",
+    "prop-types": "^15.8.1",
     "react-error-boundary": "^4.1.2",
-    "react-resizable-panels": "^2.1.4",
+    "react-resizable-panels": "^2.1.6",
     "react-shadow": "^20.5.0",
     "remeda": "^2.16.0",
     "std-env": "^3.7.0",
@@ -174,7 +175,7 @@
     "unbuild": "^3.0.0-rc.11",
     "vite-plugin-css-injected-by-js": "^3.5.2",
     "vite-plugin-shadow-style": "^1.1.1",
-    "vitest": "^2.1.3",
+    "vitest": "^2.1.4",
     "yargs": "17.7.2"
   },
   "packageManager": "yarn@4.5.1"

package/react/index.d.ts

@@ -1,7 +1,7 @@
 // Generated by dts-bundle-generator v9.5.1
 
 import { CSSProperties, DependencyList, HTMLAttributes, MouseEvent as ReactMouseEvent, PropsWithChildren, ReactNode } from 'react';
-import { Class, LiteralUnion, OverrideProperties, PartialDeep, Tagged, TupleToUnion } from 'type-fest';
+import { Class, LiteralUnion, NonEmptyTuple, OverrideProperties, PartialDeep, Tagged, TupleToUnion } from 'type-fest';
 
 type NonEmptyArray<T> = [
 	T,
@@ -139,10 +139,15 @@ type OrOperator<Tag, Kind> = Omit<AllNever, "or"> & {
 	or: NonEmptyArray<WhereOperator<Tag, Kind>>;
 };
 type WhereOperator<Tag, Kind> = TagEqual<Tag> | KindEqual<Kind> | NotOperator<Tag, Kind> | AndOperator<Tag, Kind> | OrOperator<Tag, Kind>;
+type GlobalPredicateId = Tagged<string, "GlobalPredicateId">;
+type GlobalPredicates = NonEmptyArray<ViewRulePredicate>;
+type GlobalDynamicPredicates = NonEmptyArray<DynamicViewIncludeRule>;
 type GlobalStyleID = Tagged<string, "GlobalStyleID">;
-interface GlobalStyle {
-	readonly id: GlobalStyleID;
-	readonly styles: NonEmptyArray<ViewRuleStyle>;
+type GlobalStyles = NonEmptyTuple<ViewRuleStyle>;
+interface ModelGlobals {
+	predicates: Record<GlobalPredicateId, GlobalPredicates>;
+	dynamicPredicates: Record<GlobalPredicateId, GlobalDynamicPredicates>;
+	styles: Record<GlobalStyleID, GlobalStyles>;
 }
 type ElementNotation = {
 	kinds: ElementKind[];
@@ -158,6 +163,9 @@ type ViewRulePredicate = {
 	include?: never;
 	exclude: Expression[];
 };
+interface ViewRuleGlobalPredicateRef {
+	predicateId: GlobalPredicateId;
+}
 interface ViewRuleStyle {
 	targets: ElementExpression[];
 	notation?: string;
@@ -183,7 +191,7 @@ interface ViewRuleGroup {
 	border?: BorderStyle;
 	opacity?: number;
 }
-type ViewRule = ViewRulePredicate | ViewRuleGroup | ViewRuleStyle | ViewRuleGlobalStyle | ViewRuleAutoLayout;
+type ViewRule = ViewRulePredicate | ViewRuleGlobalPredicateRef | ViewRuleGroup | ViewRuleStyle | ViewRuleGlobalStyle | ViewRuleAutoLayout;
 interface BasicView<ViewType extends "element" | "dynamic", ViewIDs extends string, Tags extends string> {
 	readonly __?: ViewType;
 	readonly id: ViewID<ViewIDs>;
@@ -245,7 +253,7 @@ type DynamicViewStepOrParallel = DynamicViewStep | DynamicViewParallelSteps;
 type DynamicViewIncludeRule = {
 	include: ElementPredicateExpression[];
 };
-type DynamicViewRule = DynamicViewIncludeRule | ViewRuleStyle | ViewRuleGlobalStyle | ViewRuleAutoLayout;
+type DynamicViewRule = DynamicViewIncludeRule | ViewRuleGlobalPredicateRef | ViewRuleStyle | ViewRuleGlobalStyle | ViewRuleAutoLayout;
 interface DynamicView<ViewIDs extends string = string, Tags extends string = string> extends BasicView<"dynamic", ViewIDs, Tags> {
 	readonly __: "dynamic";
 	readonly steps: DynamicViewStepOrParallel[];
@@ -547,9 +555,7 @@ interface ParsedLikeC4Model<ElementKinds extends string = string, RelationKinds
 	};
 	elements: Record<Fqns, TypedElement<Fqns, ElementKinds, Tags>>;
 	relations: Record<RelationID, Relation>;
-	globals: {
-		styles: Record<GlobalStyleID, GlobalStyle>;
-	};
+	globals: ModelGlobals;
 	views: Record<Views, LikeC4View<Views, Tags>>;
 }
 interface ComputedLikeC4Model extends Omit<ParsedLikeC4Model, "views"> {

package/react/index.mjs

@@ -7937,7 +7937,7 @@ class MotionValue {
    * @internal
    */
   constructor(init2, options = {}) {
-    this.version = "11.11.9", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v2, render = !0) => {
+    this.version = "11.11.10", this.canTrackVelocity = null, this.events = {}, this.updateAndNotify = (v2, render = !0) => {
       const currentTime = time$1.now();
       this.updatedAt !== currentTime && this.setPrevFrameValue(), this.prev = this.current, this.setCurrent(v2), this.current !== this.prev && this.events.change && this.events.change.notify(this.current), render && this.events.renderRequest && this.events.renderRequest.notify(this.current);
     }, this.hasAnimated = !1, this.setCurrent(init2), this.owner = options.owner;
@@ -8145,8 +8145,6 @@ function isWillChangeMotionValue(value) {
   return !!(isMotionValue(value) && value.add);
 }
 function addValueToWillChange(visualElement, key) {
-  if (!visualElement.applyWillChange)
-    return;
   const willChange = visualElement.getValue("willChange");
   if (isWillChangeMotionValue(willChange))
     return willChange.add(key);
@@ -10320,7 +10318,7 @@ function scrapeMotionValuesFromProps$1(props, prevProps, visualElement) {
   const { style: style2 } = props, newValues = {};
   for (const key in style2)
     (isMotionValue(style2[key]) || prevProps.style && isMotionValue(prevProps.style[key]) || isForcedMotionValue(key, props) || ((_a3 = visualElement == null ? void 0 : visualElement.getValue(key)) === null || _a3 === void 0 ? void 0 : _a3.liveStyle) !== void 0) && (newValues[key] = style2[key]);
-  return visualElement && style2 && typeof style2.willChange == "string" && (visualElement.applyWillChange = !1), newValues;
+  return newValues;
 }
 function scrapeMotionValuesFromProps(props, prevProps, visualElement) {
   const newValues = scrapeMotionValuesFromProps$1(props, prevProps, visualElement);
@@ -10335,36 +10333,19 @@ function useConstant(init2) {
   const ref = useRef(null);
   return ref.current === null && (ref.current = init2()), ref.current;
 }
-function getWillChangeName(name) {
-  if (transformProps.has(name))
-    return "transform";
-  if (acceleratedValues.has(name))
-    return camelToDash(name);
-}
-function makeState({ applyWillChange = !1, scrapeMotionValuesFromProps: scrapeMotionValuesFromProps2, createRenderState, onMount: onMount2 }, props, context, presenceContext, isStatic) {
+function makeState({ scrapeMotionValuesFromProps: scrapeMotionValuesFromProps2, createRenderState, onMount: onMount2 }, props, context, presenceContext) {
   const state = {
-    latestValues: makeLatestValues(props, context, presenceContext, isStatic ? !1 : applyWillChange, scrapeMotionValuesFromProps2),
+    latestValues: makeLatestValues(props, context, presenceContext, scrapeMotionValuesFromProps2),
     renderState: createRenderState()
   };
   return onMount2 && (state.mount = (instance) => onMount2(props, instance, state)), state;
 }
 const makeUseVisualState = (config) => (props, isStatic) => {
-  const context = useContext(MotionContext), presenceContext = useContext(PresenceContext), make = () => makeState(config, props, context, presenceContext, isStatic);
+  const context = useContext(MotionContext), presenceContext = useContext(PresenceContext), make = () => makeState(config, props, context, presenceContext);
   return isStatic ? make() : useConstant(make);
 };
-function forEachDefinition(props, definition, callback) {
-  const list2 = Array.isArray(definition) ? definition : [definition];
-  for (let i2 = 0; i2 < list2.length; i2++) {
-    const resolved = resolveVariantFromProps(props, list2[i2]);
-    if (resolved) {
-      const { transitionEnd, transition, ...target } = resolved;
-      callback(target, transitionEnd);
-    }
-  }
-}
-function makeLatestValues(props, context, presenceContext, shouldApplyWillChange, scrapeMotionValues) {
-  var _a3;
-  const values2 = {}, willChange = /* @__PURE__ */ new Set(), applyWillChange = shouldApplyWillChange && ((_a3 = props.style) === null || _a3 === void 0 ? void 0 : _a3.willChange) === void 0, motionValues = scrapeMotionValues(props, {});
+function makeLatestValues(props, context, presenceContext, scrapeMotionValues) {
+  const values2 = {}, motionValues = scrapeMotionValues(props, {});
   for (const key in motionValues)
     values2[key] = resolveMotionValue(motionValues[key]);
   let { initial, animate } = props;
@@ -10373,23 +10354,26 @@ function makeLatestValues(props, context, presenceContext, shouldApplyWillChange
   let isInitialAnimationBlocked = presenceContext ? presenceContext.initial === !1 : !1;
   isInitialAnimationBlocked = isInitialAnimationBlocked || initial === !1;
   const variantToSet = isInitialAnimationBlocked ? animate : initial;
-  return variantToSet && typeof variantToSet != "boolean" && !isAnimationControls(variantToSet) && forEachDefinition(props, variantToSet, (target, transitionEnd) => {
-    for (const key in target) {
-      let valueTarget = target[key];
-      if (Array.isArray(valueTarget)) {
-        const index2 = isInitialAnimationBlocked ? valueTarget.length - 1 : 0;
-        valueTarget = valueTarget[index2];
+  if (variantToSet && typeof variantToSet != "boolean" && !isAnimationControls(variantToSet)) {
+    const list2 = Array.isArray(variantToSet) ? variantToSet : [variantToSet];
+    for (let i2 = 0; i2 < list2.length; i2++) {
+      const resolved = resolveVariantFromProps(props, list2[i2]);
+      if (resolved) {
+        const { transitionEnd, transition, ...target } = resolved;
+        for (const key in target) {
+          let valueTarget = target[key];
+          if (Array.isArray(valueTarget)) {
+            const index2 = isInitialAnimationBlocked ? valueTarget.length - 1 : 0;
+            valueTarget = valueTarget[index2];
+          }
+          valueTarget !== null && (values2[key] = valueTarget);
+        }
+        for (const key in transitionEnd)
+          values2[key] = transitionEnd[key];
       }
-      valueTarget !== null && (values2[key] = valueTarget);
-    }
-    for (const key in transitionEnd)
-      values2[key] = transitionEnd[key];
-  }), applyWillChange && (animate && initial !== !1 && !isAnimationControls(animate) && forEachDefinition(props, animate, (target) => {
-    for (const name in target) {
-      const memberName = getWillChangeName(name);
-      memberName && willChange.add(memberName);
     }
-  }), willChange.size && (values2.willChange = Array.from(willChange).join(","))), values2;
+  }
+  return values2;
 }
 const createHtmlRenderState = () => ({
   style: {},
@@ -10509,7 +10493,6 @@ const isSVGTag = (tag) => typeof tag == "string" && tag.toLowerCase() === "svg",
   })
 }, htmlMotionConfig = {
   useVisualState: makeUseVisualState({
-    applyWillChange: !0,
     scrapeMotionValuesFromProps: scrapeMotionValuesFromProps$1,
     createRenderState: createHtmlRenderState
   })
@@ -10664,7 +10647,7 @@ class VisualElement {
     return {};
   }
   constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState }, options = {}) {
-    this.applyWillChange = !1, this.current = null, this.children = /* @__PURE__ */ new Set(), this.isVariantNode = !1, this.isControllingVariants = !1, this.shouldReduceMotion = null, this.values = /* @__PURE__ */ new Map(), this.KeyframeResolver = KeyframeResolver, this.features = {}, this.valueSubscriptions = /* @__PURE__ */ new Map(), this.prevMotionValues = {}, this.events = {}, this.propEventSubscriptions = {}, this.notifyUpdate = () => this.notify("Update", this.latestValues), this.render = () => {
+    this.current = null, this.children = /* @__PURE__ */ new Set(), this.isVariantNode = !1, this.isControllingVariants = !1, this.shouldReduceMotion = null, this.values = /* @__PURE__ */ new Map(), this.KeyframeResolver = KeyframeResolver, this.features = {}, this.valueSubscriptions = /* @__PURE__ */ new Map(), this.prevMotionValues = {}, this.events = {}, this.propEventSubscriptions = {}, this.notifyUpdate = () => this.notify("Update", this.latestValues), this.render = () => {
       this.current && (this.triggerBuild(), this.renderInstance(this.current, this.renderState, this.props.style, this.projection));
     }, this.renderScheduledAt = 0, this.scheduleRender = () => {
       const now2 = time$1.now();
@@ -10864,7 +10847,7 @@ function getComputedStyle$2(element) {
 }
 class HTMLVisualElement extends DOMVisualElement {
   constructor() {
-    super(...arguments), this.type = "html", this.applyWillChange = !0, this.renderInstance = renderHTML;
+    super(...arguments), this.type = "html", this.renderInstance = renderHTML;
   }
   readValueFromInstance(instance, key) {
     if (transformProps.has(key)) {