likec4 1.41.0 → 1.42.1

package/__app__/src/webcomponent.js

@@ -0,0 +1,68 @@
+import { jsx } from "react/jsx-runtime";
+import { LikeC4View as LikeC4View$1 } from "likec4:react";
+import { createRoot } from "react-dom/client";
+import { ComponentName } from "./const.js";
+import { dv as object, dw as literal, dx as stringbool, dy as string, dz as formatError } from "./vendors.js";
+const propsSchema = object({
+  viewId: string().default("index"),
+  browser: stringbool().default(!0),
+  dynamicViewVariant: literal(["diagram", "sequence"]).optional()
+});
+class LikeC4View extends HTMLElement {
+  shadow;
+  root;
+  hostCss;
+  lastHostCss = "";
+  constructor() {
+    super(), this.shadow = this.attachShadow({ mode: "open", delegatesFocus: !0 });
+  }
+  updateHostCss() {
+    const hostCss = `
+    :host {
+      display: block;
+      position: relative;
+      background-color: transparent;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      overflow: hidden;
+      border: 0px solid transparent;
+      padding: 0;
+    }`;
+    hostCss !== this.lastHostCss && (this.hostCss?.replaceSync(hostCss), this.lastHostCss = hostCss);
+  }
+  connectedCallback() {
+    this.lastHostCss = "", this.hostCss = new CSSStyleSheet(), this.updateHostCss(), this.shadow.adoptedStyleSheets = [
+      this.hostCss
+    ], this.render();
+  }
+  disconnectedCallback() {
+    this.root?.unmount(), this.root = void 0, this.shadow.adoptedStyleSheets.length = 0, this.hostCss = void 0;
+  }
+  static observedAttributes = ["view-id", "browser", "dynamic-variant"];
+  getProps() {
+    const props = propsSchema.safeParse(
+      {
+        viewId: this.getAttribute("view-id"),
+        browser: this.getAttribute("browser") ?? void 0,
+        dynamicViewVariant: this.getAttribute("dynamic-variant") ?? void 0
+      }
+    );
+    return props.success ? props.data : (console.error("Invalid props", formatError(props.error)), {
+      viewId: "index"
+    });
+  }
+  render() {
+    const props = this.getProps();
+    this.updateHostCss(), this.root ??= createRoot(this.shadow), this.root.render(
+      /* @__PURE__ */ jsx(LikeC4View$1, { ...props })
+    );
+  }
+  attributeChangedCallback(_name) {
+    this.root && this.render();
+  }
+}
+customElements.define(ComponentName.View, LikeC4View);
+export {
+  LikeC4View
+};

package/config/package.json

@@ -1,4 +1,4 @@
 {
-  "module": "../dist/config/index.mjs",
-  "types": "../dist/config/index.d.mts"
+  "types": "../dist/config/index.d.mts",
+  "module": "../dist/config/index.mjs"
 }

package/config/schema.json

@@ -0,0 +1,575 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "description": "LikeC4 project configuration",
+  "type": "object",
+  "properties": {
+    "name": {
+      "description": "Project name, must be unique in the workspace",
+      "type": "string",
+      "minLength": 1
+    },
+    "title": {
+      "description": "A human readable title for the project",
+      "type": "string",
+      "minLength": 1
+    },
+    "contactPerson": {
+      "description": "A person who has been involved in creating or maintaining this project",
+      "type": "string",
+      "minLength": 1
+    },
+    "imageAliases": {
+      "description": "Map of image alias prefixes to relative paths (keys must match /^@\\w+$/; values must be relative paths without protocol or leading slash).",
+      "type": "object",
+      "propertyNames": {
+        "type": "string"
+      },
+      "additionalProperties": {
+        "type": "string",
+        "minLength": 1,
+        "pattern": "^(?!\\/|[A-Za-z]:[\\\\\\/])(?!.*:\\/\\/).*$"
+      }
+    },
+    "styles": {
+      "allOf": [
+        {
+          "$ref": "#/definitions/StylesConfiguration"
+        }
+      ]
+    },
+    "exclude": {
+      "description": "List of file patterns to exclude from the project, default is [\"**/node_modules/**\"]",
+      "type": "array",
+      "items": {
+        "type": "string"
+      }
+    }
+  },
+  "required": [
+    "name"
+  ],
+  "definitions": {
+    "StylesConfiguration": {
+      "id": "StylesConfiguration",
+      "description": "Project styles customization",
+      "type": "object",
+      "properties": {
+        "theme": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/ThemeCustomization"
+            }
+          ]
+        },
+        "defaults": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/DefaultStyleValues"
+            }
+          ]
+        }
+      }
+    },
+    "ThemeCustomization": {
+      "id": "ThemeCustomization",
+      "description": "Theme customization",
+      "type": "object",
+      "properties": {
+        "colors": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/ThemeColors"
+            }
+          ]
+        },
+        "sizes": {
+          "description": "Map of theme sizes.",
+          "type": "object",
+          "properties": {
+            "xs": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/Dimensions"
+                }
+              ]
+            },
+            "sm": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/Dimensions"
+                }
+              ]
+            },
+            "md": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/Dimensions"
+                }
+              ]
+            },
+            "lg": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/Dimensions"
+                }
+              ]
+            },
+            "xl": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/Dimensions"
+                }
+              ]
+            }
+          }
+        }
+      }
+    },
+    "ThemeColors": {
+      "id": "ThemeColors",
+      "description": "Override of theme colors",
+      "anyOf": [
+        {
+          "type": "object",
+          "propertyNames": {
+            "$ref": "#/definitions/ColorName"
+          },
+          "additionalProperties": {
+            "allOf": [
+              {
+                "$ref": "#/definitions/ThemeColorValues"
+              }
+            ]
+          }
+        },
+        {
+          "type": "object",
+          "properties": {
+            "amber": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "blue": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "gray": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "slate": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "green": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "indigo": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "muted": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "primary": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "red": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "secondary": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            },
+            "sky": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ThemeColorValues"
+                }
+              ]
+            }
+          }
+        }
+      ]
+    },
+    "ColorName": {
+      "id": "ColorName",
+      "description": "Color name (Theme color name or custom color name)",
+      "anyOf": [
+        {
+          "$ref": "#/definitions/ThemeColor"
+        },
+        {
+          "type": "string",
+          "minLength": 1
+        }
+      ]
+    },
+    "ThemeColor": {
+      "id": "ThemeColor",
+      "description": "Reserved theme color name",
+      "type": "string",
+      "enum": [
+        "amber",
+        "blue",
+        "gray",
+        "slate",
+        "green",
+        "indigo",
+        "muted",
+        "primary",
+        "red",
+        "secondary",
+        "sky"
+      ]
+    },
+    "ThemeColorValues": {
+      "id": "ThemeColorValues",
+      "description": "Exact value (hex, rgb, rgba, hsl, hsla ...) or break down of specific color values",
+      "anyOf": [
+        {
+          "$ref": "#/definitions/ColorLiteral"
+        },
+        {
+          "type": "object",
+          "properties": {
+            "elements": {
+              "anyOf": [
+                {
+                  "$ref": "#/definitions/ColorLiteral"
+                },
+                {
+                  "allOf": [
+                    {
+                      "$ref": "#/definitions/ElementColorValues"
+                    }
+                  ]
+                }
+              ]
+            },
+            "relationships": {
+              "anyOf": [
+                {
+                  "$ref": "#/definitions/ColorLiteral"
+                },
+                {
+                  "allOf": [
+                    {
+                      "$ref": "#/definitions/RelationshipColorValues"
+                    }
+                  ]
+                }
+              ]
+            }
+          },
+          "required": [
+            "elements",
+            "relationships"
+          ]
+        }
+      ]
+    },
+    "ColorLiteral": {
+      "id": "ColorLiteral",
+      "description": "Color value in any valid CSS format: hex, rgb, rgba, hsl, hsla ...",
+      "type": "string",
+      "minLength": 1
+    },
+    "ElementColorValues": {
+      "id": "ElementColorValues",
+      "description": "Specific element colors",
+      "type": "object",
+      "properties": {
+        "fill": {
+          "description": "Background color",
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorLiteral"
+            }
+          ]
+        },
+        "stroke": {
+          "description": "Stroke color (border, paths above background)",
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorLiteral"
+            }
+          ]
+        },
+        "hiContrast": {
+          "description": "High contrast text color (title)",
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorLiteral"
+            }
+          ]
+        },
+        "loContrast": {
+          "description": "Low contrast text color (description)",
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorLiteral"
+            }
+          ]
+        }
+      },
+      "required": [
+        "fill",
+        "stroke",
+        "hiContrast",
+        "loContrast"
+      ]
+    },
+    "RelationshipColorValues": {
+      "id": "RelationshipColorValues",
+      "description": "Specefic relationship colors",
+      "type": "object",
+      "properties": {
+        "line": {
+          "description": "Line color",
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorLiteral"
+            }
+          ]
+        },
+        "label": {
+          "description": "Label text color",
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorLiteral"
+            }
+          ]
+        },
+        "labelBg": {
+          "description": "Label background color",
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorLiteral"
+            }
+          ]
+        }
+      },
+      "required": [
+        "line",
+        "label"
+      ]
+    },
+    "Dimensions": {
+      "id": "Dimensions",
+      "description": "Dimensions",
+      "type": "object",
+      "properties": {
+        "width": {
+          "type": "number"
+        },
+        "height": {
+          "type": "number"
+        }
+      },
+      "required": [
+        "width",
+        "height"
+      ]
+    },
+    "DefaultStyleValues": {
+      "id": "DefaultStyleValues",
+      "description": "Override default values for style properties\nThese values will be used if such property is not defined",
+      "type": "object",
+      "properties": {
+        "color": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/ColorName"
+            }
+          ]
+        },
+        "opacity": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/Opacity"
+            }
+          ]
+        },
+        "border": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/BorderStyle"
+            }
+          ]
+        },
+        "size": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/ElementSize"
+            }
+          ]
+        },
+        "shape": {
+          "allOf": [
+            {
+              "$ref": "#/definitions/ElementShape"
+            }
+          ]
+        },
+        "group": {
+          "type": "object",
+          "properties": {
+            "color": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ColorName"
+                }
+              ]
+            },
+            "opacity": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/Opacity"
+                }
+              ]
+            },
+            "border": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/BorderStyle"
+                }
+              ]
+            }
+          }
+        },
+        "relationship": {
+          "type": "object",
+          "properties": {
+            "color": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ColorName"
+                }
+              ]
+            },
+            "line": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/LineType"
+                }
+              ]
+            },
+            "arrow": {
+              "allOf": [
+                {
+                  "$ref": "#/definitions/ArrowType"
+                }
+              ]
+            }
+          }
+        }
+      }
+    },
+    "Opacity": {
+      "id": "Opacity",
+      "description": "Opacity 0%-100%",
+      "type": "number",
+      "minimum": 0,
+      "maximum": 100
+    },
+    "BorderStyle": {
+      "id": "BorderStyle",
+      "description": "Border style",
+      "type": "string",
+      "enum": [
+        "solid",
+        "dashed",
+        "dotted",
+        "none"
+      ]
+    },
+    "ElementSize": {
+      "id": "ElementSize",
+      "description": "Element size",
+      "type": "string",
+      "enum": [
+        "xs",
+        "sm",
+        "md",
+        "lg",
+        "xl"
+      ]
+    },
+    "ElementShape": {
+      "id": "ElementShape",
+      "description": "Element shape",
+      "type": "string",
+      "enum": [
+        "rectangle",
+        "person",
+        "browser",
+        "mobile",
+        "cylinder",
+        "storage",
+        "queue"
+      ]
+    },
+    "LineType": {
+      "id": "LineType",
+      "description": "Default line type for relationships",
+      "type": "string",
+      "enum": [
+        "dashed",
+        "solid",
+        "dotted"
+      ]
+    },
+    "ArrowType": {
+      "id": "ArrowType",
+      "description": "Relationship arrow type",
+      "type": "string",
+      "enum": [
+        "none",
+        "normal",
+        "onormal",
+        "dot",
+        "odot",
+        "diamond",
+        "odiamond",
+        "crow",
+        "open",
+        "vee"
+      ]
+    }
+  }
+}