@likec4/diagram 1.48.0 → 1.50.0

package/bundle/package.json

@@ -1,4 +0,0 @@
-{
-  "types": "../dist/index.d.ts",
-  "module": "index.js"
-}

package/dist/adhoc-editor/EditorNavigationPanel.d.ts

@@ -1 +0,0 @@
-export declare const EditorNavigationPanel: () => import("react/jsx-runtime").JSX.Element;

package/dist/adhoc-editor/EditorNavigationPanel.js

@@ -1,32 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useSelector } from '@xstate/react';
-import { prop } from 'remeda';
-import { NavigationPanel } from '../components/NavigationPanel.js';
-import { useAdhocEditorActor, selectFromContext } from './hooks.js';
-import { ViewRulesPanel } from './viewrules/ViewRulesPanel.js';
-
-const selectRules = selectFromContext(prop("rules"));
-const EditorNavigationPanel = () => {
-  const actorRef = useAdhocEditorActor();
-  const rules = useSelector(actorRef, selectRules);
-  return /* @__PURE__ */ jsxs(NavigationPanel.Root, { children: [
-    /* @__PURE__ */ jsxs(NavigationPanel.Body, { children: [
-      /* @__PURE__ */ jsx(NavigationPanel.Logo, {}),
-      /* @__PURE__ */ jsx(NavigationPanel.Label, { children: "View Editor" })
-    ] }),
-    rules.length > 0 && /* @__PURE__ */ jsx(NavigationPanel.Dropdown, { css: { maxW: "250px" }, children: /* @__PURE__ */ jsx(
-      ViewRulesPanel,
-      {
-        rules,
-        onToggle: (rule) => {
-          actorRef.send({ type: "toggle.rule", ruleId: rule.id });
-        },
-        onDelete: (rule) => {
-          actorRef.send({ type: "delete.rule", ruleId: rule.id });
-        }
-      }
-    ) })
-  ] });
-};
-
-export { EditorNavigationPanel };

package/dist/adhoc-editor/SelectElementOverlay.d.ts

@@ -1 +0,0 @@
-export declare function SelectElementOverlay(): import("react/jsx-runtime").JSX.Element;

package/dist/adhoc-editor/SelectElementOverlay.js

@@ -1,124 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { cx, css } from '@likec4/styles/css';
-import { VStack, styled } from '@likec4/styles/jsx';
-import { flex, center, vstack } from '@likec4/styles/patterns';
-import { Button, Input, ScrollAreaAutosize } from '@mantine/core';
-import { useInputState } from '@mantine/hooks';
-import { AnimatePresence, m } from 'motion/react';
-import { useLikeC4Model } from '../hooks/useLikeC4Model.js';
-import { Overlay } from '../overlays/overlay/Overlay.js';
-import { useAdhocEditor, useAdhocEditorSnapshot, selectFromSnapshot, selectFromContext } from './hooks.js';
-
-const selectIfEmpty = selectFromContext((c) => !c.view || c.view.nodes.length === 0);
-function SelectElementsButton({ onClick }) {
-  const isEmpty = useAdhocEditorSnapshot(selectIfEmpty);
-  return /* @__PURE__ */ jsx(
-    m.div,
-    {
-      layout: "position",
-      layoutId: "select-button-container",
-      className: cx(
-        flex({
-          pointerEvents: "none",
-          position: "absolute",
-          justifyContent: "center"
-        }),
-        isEmpty && center({ inset: "0" }),
-        !isEmpty && css({
-          top: "3",
-          width: "100%"
-        })
-      ),
-      children: /* @__PURE__ */ jsx(
-        Button,
-        {
-          component: m.button,
-          layout: "position",
-          layoutId: "select-button",
-          className: css({
-            pointerEvents: "all"
-          }),
-          size: isEmpty ? "xl" : "lg",
-          variant: "default",
-          radius: isEmpty ? "xl" : "lg",
-          onClick,
-          children: "Add elements"
-        }
-      )
-    }
-  );
-}
-const isSelecting = selectFromSnapshot((s) => s.value.editor === "selecting");
-function SelectElementOverlay() {
-  const editor = useAdhocEditor();
-  const isOpened = useAdhocEditorSnapshot(isSelecting);
-  return /* @__PURE__ */ jsxs(AnimatePresence, { mode: "popLayout", children: [
-    /* @__PURE__ */ jsx(SelectElementsButton, { onClick: () => editor.open() }, "select-button"),
-    isOpened && /* @__PURE__ */ jsx(Overlay, { onClose: () => editor.close(), children: /* @__PURE__ */ jsx(SelectElementOverlayBody, {}) }, "select-overlay")
-  ] });
-}
-function SelectElementOverlayBody() {
-  const editor = useAdhocEditor();
-  const [input, setInput] = useInputState("");
-  const elements = useLikeC4Model().elements().toArray();
-  return /* @__PURE__ */ jsxs(VStack, { h: "100%", flex: "1", alignItems: "stretch", children: [
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        size: "lg",
-        variant: "unstyled",
-        placeholder: "Search by title, description or start with # or kind:",
-        autoFocus: true,
-        "data-autofocus": true,
-        value: input,
-        onChange: setInput,
-        "data-likec4-search-input": true,
-        onKeyDownCapture: (e) => {
-          switch (e.key) {
-            case "Escape": {
-              e.stopPropagation();
-              e.preventDefault();
-              editor.close();
-              break;
-            }
-            case "Enter": {
-              e.stopPropagation();
-              e.preventDefault();
-              editor.close();
-              break;
-            }
-            default: {
-              return;
-            }
-          }
-        }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ScrollAreaAutosize,
-      {
-        scrollbars: "y",
-        type: "scroll",
-        classNames: {
-          content: vstack({
-            alignItems: "stretch"
-          })
-        },
-        children: elements.map((el) => /* @__PURE__ */ jsx(
-          styled.button,
-          {
-            onClick: (e) => {
-              e.stopPropagation();
-              editor.include(el);
-              editor.close();
-            },
-            children: el.title
-          },
-          el.id
-        ))
-      }
-    )
-  ] });
-}
-
-export { SelectElementOverlay };

package/dist/adhoc-editor/actor.d.ts

@@ -1,131 +0,0 @@
-import { ActorRef, SnapshotFrom, StateMachine, ActorRefFromLogic, NonReducibleUnknown, MetaObject, LogAction, MachineSnapshot, AnyActorRef, StateValue, AnyEventObject, ActionFunction, DoneActorEvent, ErrorActorEvent } from 'xstate';
-import { EmittedEvents, Events, Context, AdhocViewServiceActor } from './actor.types';
-import { AdhocViewPredicate } from '@likec4/core/compute-view';
-import { LayoutedElementView } from '@likec4/core';
-declare const _adhocEditorLogic: StateMachine<Context, Events, {
-    [x: string]: ActorRefFromLogic<AdhocViewServiceActor> | undefined;
-}, {
-    src: "service";
-    logic: AdhocViewServiceActor;
-    id: string | undefined;
-}, never, {
-    type: "hasView";
-    params: unknown;
-}, never, {
-    editor: "idle" | "selecting" | "layouting";
-    layouter: "idle" | "call";
-}, "hasView", NonReducibleUnknown, NonReducibleUnknown, EmittedEvents, MetaObject, {
-    readonly id: "adhoc-editor";
-    readonly context: () => {
-        view: null;
-        error: undefined;
-        rules: never[];
-    };
-    readonly type: "parallel";
-    readonly states: {
-        readonly layouter: {
-            initial: string;
-            states: {
-                idle: {
-                    id: string;
-                    entry: LogAction<Context, Events, undefined, Events>;
-                    exit: LogAction<Context, Events, undefined, Events>;
-                    on: {
-                        layout: {
-                            target: "#layouter-call";
-                        };
-                    };
-                };
-                call: {
-                    id: string;
-                    entry: LogAction<Context, Events, undefined, Events>;
-                    exit: LogAction<Context, Events, undefined, Events>;
-                    invoke: {
-                        src: "service";
-                        input: ({ context }: {
-                            context: Context;
-                            event: Events;
-                            self: ActorRef< MachineSnapshot<Context, Events, Record<string, AnyActorRef>, StateValue, string, unknown, any, any>, Events, AnyEventObject>;
-                        }) => {
-                            predicates: AdhocViewPredicate[];
-                        };
-                        onDone: {
-                            target: "#layouter-idle";
-                            actions: ActionFunction<Context, DoneActorEvent<{
-                                view: LayoutedElementView;
-                            }, string>, Events, undefined, {
-                                src: "service";
-                                logic: AdhocViewServiceActor;
-                                id: string | undefined;
-                            }, never, never, never, never>;
-                        };
-                        onError: {
-                            target: "#layouter-idle";
-                            actions: LogAction<Context, ErrorActorEvent<unknown, string>, undefined, Events>[];
-                        };
-                    };
-                };
-            };
-        };
-        readonly editor: {
-            initial: string;
-            states: {
-                idle: {
-                    id: string;
-                    on: {
-                        'select.open': {
-                            target: "#selecting";
-                        };
-                        'toggle.rule': {
-                            target: "#layouting";
-                            actions: ActionFunction<Context, Events, Events, undefined, {
-                                src: "service";
-                                logic: AdhocViewServiceActor;
-                                id: string | undefined;
-                            }, never, never, never, never>;
-                        };
-                        'delete.rule': {
-                            target: "#layouting";
-                            actions: ActionFunction<Context, Events, Events, undefined, {
-                                src: "service";
-                                logic: AdhocViewServiceActor;
-                                id: string | undefined;
-                            }, never, never, never, never>;
-                        };
-                    };
-                };
-                selecting: {
-                    id: string;
-                    on: {
-                        'include.element': {
-                            target: "#layouting";
-                            actions: ActionFunction<Context, Events, Events, undefined, {
-                                src: "service";
-                                logic: AdhocViewServiceActor;
-                                id: string | undefined;
-                            }, never, never, never, never>;
-                        };
-                        'select.close': {
-                            target: "#idle";
-                        };
-                    };
-                };
-                layouting: {
-                    id: string;
-                    always: {
-                        target: "#idle";
-                        actions: ActionFunction<Context, Events, Events, undefined, never, never, never, never, never>;
-                    };
-                };
-            };
-        };
-    };
-}>;
-type Infer = typeof _adhocEditorLogic;
-export interface AdhocEditorLogic extends Infer {
-}
-export declare const adhocEditorLogic: AdhocEditorLogic;
-export type AdhocEditorSnapshot = SnapshotFrom<AdhocEditorLogic>;
-export interface AdhocEditorActorRef extends ActorRef<AdhocEditorSnapshot, Events, EmittedEvents> {
-}
-export {};

package/dist/adhoc-editor/actor.editor.js

@@ -1,96 +0,0 @@
-import { stringHash } from '@likec4/core/utils';
-import { assertEvent } from 'xstate';
-import { machine } from './actor.types.js';
-
-const to = {
-  idle: { target: "#idle" },
-  selecting: { target: "#selecting" },
-  layouting: { target: "#layouting" }
-};
-const includePredicate = () => machine.assign(({ context, event }) => {
-  const id = stringHash((context.rules.at(-1)?.id ?? (/* @__PURE__ */ new Date()).toISOString()) + event.type);
-  switch (event.type) {
-    case "include.element": {
-      return {
-        rules: [
-          ...context.rules,
-          {
-            id,
-            expr: { ref: { model: event.model } },
-            enabled: true,
-            type: "include"
-          }
-        ]
-      };
-    }
-    default: {
-      throw new Error(`Unexpected event ${event.type}}`);
-    }
-  }
-});
-const toggleRule = () => machine.assign(({ context, event }) => {
-  assertEvent(event, "toggle.rule");
-  return {
-    rules: context.rules.map((rule) => {
-      if (rule.id === event.ruleId) {
-        return {
-          ...rule,
-          enabled: !rule.enabled
-        };
-      }
-      return rule;
-    })
-  };
-});
-const deleteRule = () => machine.assign(({ context, event }) => {
-  assertEvent(event, "delete.rule");
-  return {
-    rules: context.rules.filter((rule) => rule.id !== event.ruleId)
-  };
-});
-const scheduleLayout = () => machine.raise({ type: "layout" });
-const idle = machine.createStateConfig({
-  id: "idle",
-  on: {
-    "select.open": {
-      ...to.selecting
-    },
-    "toggle.rule": {
-      actions: toggleRule(),
-      ...to.layouting
-    },
-    "delete.rule": {
-      actions: deleteRule(),
-      ...to.layouting
-    }
-  }
-});
-const selecting = machine.createStateConfig({
-  id: "selecting",
-  on: {
-    "include.element": {
-      actions: includePredicate(),
-      ...to.layouting
-    },
-    "select.close": {
-      ...to.idle
-    }
-  }
-});
-const layouting = machine.createStateConfig({
-  id: "layouting",
-  always: {
-    actions: scheduleLayout(),
-    ...to.idle
-  }
-});
-const editor = machine.createStateConfig({
-  initial: "idle",
-  states: {
-    idle,
-    selecting,
-    layouting
-  }
-});
-
-export { editor };

package/dist/adhoc-editor/viewrules/ViewRulesPanel.js

@@ -1,104 +0,0 @@
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import '@likec4/core';
-import { cx } from '@likec4/styles/css';
-import { Box, styled } from '@likec4/styles/jsx';
-import { vstack, hstack, txt } from '@likec4/styles/patterns';
-import { ActionIcon } from '@mantine/core';
-import { AnimatePresence, LayoutGroup, m } from 'motion/react';
-import IconCirclePlus from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCirclePlus.js';
-import IconTrash from '../../node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconTrash.js';
-
-function ViewRulesPanel({
-  rules,
-  onToggle,
-  onDelete
-}) {
-  return /* @__PURE__ */ jsxs(Box, { p: "1", children: [
-    /* @__PURE__ */ jsx(styled.h4, { mt: "0", fontSize: "md", fontWeight: "normal", children: "View Rules" }),
-    /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", propagate: true, children: /* @__PURE__ */ jsx(LayoutGroup, { children: /* @__PURE__ */ jsx(m.div, { layout: true, layoutRoot: true, className: vstack({ gap: "1" }), children: rules.map((rule) => /* @__PURE__ */ jsx(
-      m.div,
-      {
-        layout: "position",
-        onClick: () => {
-          return onToggle(rule);
-        },
-        initial: {
-          opacity: 0,
-          y: -50
-        },
-        animate: {
-          opacity: rule.enabled ? 1 : 0.5,
-          scale: rule.enabled ? 1 : 0.98,
-          y: 0
-        },
-        exit: {
-          opacity: 0,
-          scale: 0.95,
-          y: -50
-        },
-        className: cx(
-          hstack({
-            p: "1",
-            px: "2",
-            flexWrap: "nowrap",
-            rounded: "sm",
-            colorPalette: "teal",
-            // colorPalette: rule.type === 'include' ? 'green' : 'red',
-            gap: "2",
-            border: "default"
-            // opacity: rule.enabled ? 1 : 0.5,
-          })
-          // rule.type !== 'include' && css({ colorPalette: 'red' }),
-        ),
-        children: /* @__PURE__ */ jsx(
-          ViewRule,
-          {
-            rule,
-            onToggle: () => onToggle(rule),
-            onDelete: () => onDelete(rule)
-          },
-          rule.id
-        )
-      },
-      rule.id
-    )) }) }) })
-  ] });
-}
-function ViewRule({ rule, onToggle, onDelete }) {
-  rule.type === "include";
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(PredicatIcon, { children: /* @__PURE__ */ jsx(IconCirclePlus, { size: 14 }) }),
-    /* @__PURE__ */ jsx(
-      m.div,
-      {
-        layout: true,
-        animate: {
-          originX: 0,
-          scale: rule.enabled ? 1 : 0.9
-        },
-        className: txt({ flex: 1, truncate: true }),
-        children: JSON.stringify(rule.expr)
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      ActionIcon,
-      {
-        onClick: (e) => {
-          e.stopPropagation();
-          onDelete();
-        },
-        variant: "subtle",
-        color: "red",
-        children: /* @__PURE__ */ jsx(IconTrash, {})
-      }
-    )
-  ] });
-}
-const PredicatIcon = styled("div", {
-  base: {
-    display: "contents",
-    color: "colorPalette.9"
-  }
-});
-
-export { ViewRulesPanel };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCirclePlus.js

@@ -1,14 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.36.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode = [["path", { "d": "M3 12a9 9 0 1 0 18 0a9 9 0 0 0 -18 0", "key": "svg-0" }], ["path", { "d": "M9 12h6", "key": "svg-1" }], ["path", { "d": "M12 9v6", "key": "svg-2" }]];
-const IconCirclePlus = createReactComponent("outline", "circle-plus", "CirclePlus", __iconNode);
-
-export { __iconNode, IconCirclePlus as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconCopy.js

@@ -1,14 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.36.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode = [["path", { "d": "M7 7m0 2.667a2.667 2.667 0 0 1 2.667 -2.667h8.666a2.667 2.667 0 0 1 2.667 2.667v8.666a2.667 2.667 0 0 1 -2.667 2.667h-8.666a2.667 2.667 0 0 1 -2.667 -2.667z", "key": "svg-0" }], ["path", { "d": "M4.012 16.737a2.005 2.005 0 0 1 -1.012 -1.737v-10c0 -1.1 .9 -2 2 -2h10c.75 0 1.158 .385 1.5 1", "key": "svg-1" }]];
-const IconCopy = createReactComponent("outline", "copy", "Copy", __iconNode);
-
-export { __iconNode, IconCopy as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconFocusCentered.js

@@ -1,14 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.36.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode = [["path", { "d": "M12 12m-1 0a1 1 0 1 0 2 0a1 1 0 1 0 -2 0", "key": "svg-0" }], ["path", { "d": "M4 8v-2a2 2 0 0 1 2 -2h2", "key": "svg-1" }], ["path", { "d": "M4 16v2a2 2 0 0 0 2 2h2", "key": "svg-2" }], ["path", { "d": "M16 4h2a2 2 0 0 1 2 2v2", "key": "svg-3" }], ["path", { "d": "M16 20h2a2 2 0 0 0 2 -2v-2", "key": "svg-4" }]];
-const IconFocusCentered = createReactComponent("outline", "focus-centered", "FocusCentered", __iconNode);
-
-export { __iconNode, IconFocusCentered as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconId.js

@@ -1,14 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.36.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode = [["path", { "d": "M3 4m0 3a3 3 0 0 1 3 -3h12a3 3 0 0 1 3 3v10a3 3 0 0 1 -3 3h-12a3 3 0 0 1 -3 -3z", "key": "svg-0" }], ["path", { "d": "M9 10m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-1" }], ["path", { "d": "M15 8l2 0", "key": "svg-2" }], ["path", { "d": "M15 12l2 0", "key": "svg-3" }], ["path", { "d": "M7 16l10 0", "key": "svg-4" }]];
-const IconId = createReactComponent("outline", "id", "Id", __iconNode);
-
-export { __iconNode, IconId as default };

package/dist/node_modules/.pnpm/@tabler_icons-react@3.36.0_react@19.2.4/node_modules/@tabler/icons-react/dist/esm/icons/IconRouteOff.js

@@ -1,14 +0,0 @@
-import createReactComponent from '../createReactComponent.js';
-
-/**
- * @license @tabler/icons-react v3.36.0 - MIT
- *
- * This source code is licensed under the MIT license.
- * See the LICENSE file in the root directory of this source tree.
- */
-
-
-const __iconNode = [["path", { "d": "M6 19m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-0" }], ["path", { "d": "M18 5m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0", "key": "svg-1" }], ["path", { "d": "M12 19h4.5c.71 0 1.372 -.212 1.924 -.576m1.545 -2.459a3.5 3.5 0 0 0 -3.469 -3.965h-.499m-4 0h-3.501a3.5 3.5 0 0 1 -2.477 -5.972m2.477 -1.028h3.5", "key": "svg-2" }], ["path", { "d": "M3 3l18 18", "key": "svg-3" }]];
-const IconRouteOff = createReactComponent("outline", "route-off", "RouteOff", __iconNode);
-
-export { __iconNode, IconRouteOff as default };