@likec4/diagram 1.43.0 → 1.45.0

package/dist/search/components/SearchByTags.js

@@ -7,7 +7,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useUpdateSearch, useNormalizedSearch } from '../hooks.js';
 import { focusToFirstFoundElement, moveFocusToSearchInput } from './utils.js';
 import { ElementTag } from '../../base-primitives/element/ElementTags.js';
-import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
+import IconX from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconX.js';
 
 function SearchByTags() {
   const ref = useRef(null);
@@ -15,14 +15,16 @@ function SearchByTags() {
   let setSearch = useUpdateSearch();
   let search = useNormalizedSearch();
   let countBefore = tags.length;
+  let isFiltered = false;
   if (search.startsWith("#")) {
     const searchTag = search.slice(1);
     tags = tags.filter(({ tag }) => tag.toLocaleLowerCase().includes(searchTag));
+    isFiltered = tags.length !== countBefore;
   }
   if (tags.length === 0) {
     return null;
   }
-  const isFiltered = tags.length !== countBefore;
+  tags = tags.slice(0, 15);
   return /* @__PURE__ */ jsxs(
     HStack,
     {
@@ -53,48 +55,23 @@ function SearchByTags() {
                 grayscale: 0
               }
             },
-            children: tags.map(({ tag }) => (
-              // <Pill
-              //   key={tag}
-              //   data-likec4-tag={tag}
-              //   className={cx(
-              //     likec4tag(),
-              //     css({
-              //       minWidth: 'unset',
-              //       cursor: 'pointer',
-              //     }),
-              //   )}
-              //   onClick={(e) => {
-              //     e.stopPropagation()
-              //     setSearch(`#${tag}`)
-              //   }}
-              //   onRemove={() => {
-              //     setSearch('#')
-              //     moveFocusToSearchInput()
-              //   }}
-              //   withRemoveButton={tag === `${search.slice(1)}`}
-              // >
-              //   <span style={{ opacity: 0.7, fontSize: '1.05em' }}>#</span>
-              //   {tag}
-              // </Pill>
-              /* @__PURE__ */ jsx(
-                ElementTag,
-                {
-                  tag,
-                  className: css({
-                    userSelect: "none",
-                    cursor: "pointer"
-                  }),
-                  onClick: (e) => {
-                    e.stopPropagation();
-                    setSearch(`#${tag}`);
-                    setTimeout(() => {
-                      focusToFirstFoundElement(ref.current);
-                    }, 350);
-                  }
-                },
-                tag
-              )
+            children: tags.map(({ tag }) => /* @__PURE__ */ jsx(
+              ElementTag,
+              {
+                tag,
+                className: css({
+                  userSelect: "none",
+                  cursor: "pointer"
+                }),
+                onClick: (e) => {
+                  e.stopPropagation();
+                  setSearch(`#${tag}`);
+                  setTimeout(() => {
+                    focusToFirstFoundElement(ref.current);
+                  }, 350);
+                }
+              },
+              tag
             ))
           }
         ),

package/dist/search/components/SearchInput.js

@@ -7,7 +7,7 @@ import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useSearchActor, useSearch } from '../hooks.js';
 import { input } from './styles.css.js';
 import { moveFocusToSearchInput, stopAndPrevent, focusToFirstFoundElement } from './utils.js';
-import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
+import IconSearch from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconSearch.js';
 
 function startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;

package/dist/search/components/ViewsColum.js

@@ -5,15 +5,17 @@ import { Stack, VisuallyHidden, UnstyledButton, createScopedKeydownHandler, Them
 import * as m from 'motion/react-m';
 import { memo, useRef } from 'react';
 import { first } from 'remeda';
-import { useCurrentViewId } from '../../hooks/useCurrentViewId.js';
-import { useDiagram } from '../../hooks/useDiagram.js';
+import { useCurrentViewId } from '../../hooks/useCurrentView.js';
+import '@xstate/react';
+import 'fast-equals';
+import { useDiagram } from '../../hooks/safeContext.js';
 import { useLikeC4Model } from '../../hooks/useLikeC4Model.js';
 import { useNormalizedSearch, useSearchActor } from '../hooks.js';
 import { emptyBoX, buttonsva, focusable } from './_shared.css.js';
 import { moveFocusToSearchInput, queryAllFocusable, centerY } from './utils.js';
 import { viewButton } from './ViewsColumn.css.js';
-import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
-import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.1.1/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
+import IconStack2 from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconStack2.js';
+import IconZoomScan from '../../node_modules/.pnpm/@tabler_icons-react@3.35.0_react@19.2.0/node_modules/@tabler/icons-react/dist/esm/icons/IconZoomScan.js';
 
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
 const ViewsColumn = memo(() => {

package/dist/search/components/_shared.css.d.ts

@@ -1,4 +1,4 @@
 import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles';
 export declare const focusable = "likec4-focusable";
 export declare const emptyBoX: string;
-export declare const buttonsva: SlotRecipeRuntimeFn<"description" | "title" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"description" | "title" | "icon" | "root" | "descriptionColor">>;
+export declare const buttonsva: SlotRecipeRuntimeFn<"title" | "description" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"title" | "description" | "icon" | "root" | "descriptionColor">>;

package/dist/search/searchActor.d.ts

@@ -1,5 +1,5 @@
 import { Fqn } from '@likec4/core/types';
-import { ActorLogicFrom, ActorRefFrom, SnapshotFrom, StateMachine, Values, NonReducibleUnknown, EventObject, MetaObject, ActionFunction } from 'xstate';
+import { ActorRef, SnapshotFrom, StateMachine } from 'xstate';
 export type SearchActorEvent = {
     type: 'open';
     search?: string | undefined;
@@ -19,72 +19,9 @@ export interface SearchContext {
     searchValue: string;
     pickViewFor: Fqn | null;
 }
-declare const _searchActorLogic: StateMachine<SearchContext, SearchActorEvent, {}, never, Values<{
-    "change searchValue": {
-        type: "change searchValue";
-        params: NonReducibleUnknown;
-    };
-    "reset pickViewFor": {
-        type: "reset pickViewFor";
-        params: NonReducibleUnknown;
-    };
-}>, never, never, "inactive" | "opened" | "pickView", string, NonReducibleUnknown, NonReducibleUnknown, EventObject, MetaObject, {
-    readonly id: "search";
-    readonly context: {
-        readonly openedWithSearch: null;
-        readonly searchValue: "";
-        readonly pickViewFor: null;
-    };
-    readonly initial: "inactive";
-    readonly on: {
-        readonly close: {
-            readonly target: ".inactive";
-            readonly actions: "reset pickViewFor";
-        };
-    };
-    readonly states: {
-        readonly inactive: {
-            readonly on: {
-                readonly open: {
-                    readonly target: "opened";
-                    readonly actions: readonly [ ActionFunction<SearchContext, {
-                        type: "open";
-                        search?: string | undefined;
-                    }, SearchActorEvent, undefined, never, never, never, never, never>];
-                };
-            };
-        };
-        readonly opened: {
-            readonly on: {
-                readonly open: {
-                    readonly actions: "change searchValue";
-                };
-                readonly 'change.search': {
-                    readonly actions: "change searchValue";
-                };
-                readonly 'pickview.open': {
-                    readonly target: "pickView";
-                    readonly actions: ActionFunction<SearchContext, {
-                        type: "pickview.open";
-                        elementFqn: Fqn;
-                    }, SearchActorEvent, undefined, never, never, never, never, never>;
-                };
-            };
-        };
-        readonly pickView: {
-            readonly on: {
-                readonly 'pickview.close': {
-                    readonly target: "opened";
-                    readonly actions: "reset pickViewFor";
-                };
-            };
-        };
-    };
-}>;
-export interface SearchActorLogic extends ActorLogicFrom<typeof _searchActorLogic> {
+export interface SearchActorLogic extends StateMachine<SearchContext, SearchActorEvent, {}, any, any, any, any, any, never, never, any, any, any, any> {
 }
 export declare const searchActorLogic: SearchActorLogic;
 export type SearchActorSnapshot = SnapshotFrom<SearchActorLogic>;
-export interface SearchActorRef extends ActorRefFrom<SearchActorLogic> {
+export interface SearchActorRef extends ActorRef<SearchActorSnapshot, SearchActorEvent> {
 }
-export {};

package/dist/shadowroot/ShadowRoot.d.ts

@@ -1,16 +1,14 @@
 import { MantineThemeOverride } from '@mantine/core';
-import { HTMLAttributes } from 'react';
-type ShadowRootProps = HTMLAttributes<HTMLDivElement> & {
+import { HTMLAttributes, ForwardRefExoticComponent, RefAttributes } from 'react';
+export declare const ShadowRoot: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
     injectFontCss?: boolean | undefined;
     styleNonce?: string | (() => string) | undefined;
-    mode?: 'open' | 'closed';
+    mode?: "open" | "closed";
     delegatesFocus?: boolean;
-    colorScheme?: 'light' | 'dark' | undefined;
+    colorScheme?: "light" | "dark" | undefined;
     keepAspectRatio?: false | undefined | {
         width: number;
         height: number;
     };
     theme?: MantineThemeOverride | undefined;
-};
-export declare function ShadowRoot({ children, theme, injectFontCss, styleNonce, colorScheme: explicitColorScheme, keepAspectRatio, ...props }: ShadowRootProps): import("react/jsx-runtime").JSX.Element;
-export {};
+} & RefAttributes<HTMLDivElement>>;

package/dist/shadowroot/ShadowRoot.js

@@ -1,10 +1,11 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { MantineProvider } from '@mantine/core';
-import { useCallbackRef } from '@mantine/hooks';
-import { useRef, useCallback } from 'react';
+import { useMergedRef } from '@mantine/hooks';
+import { forwardRef, useRef, useCallback } from 'react';
 import root from 'react-shadow';
 import { isDefined } from 'remeda';
 import { FramerMotionConfig } from '../context/FramerMotionConfig.js';
+import { useCallbackRef } from '../hooks/useCallbackRef.js';
 import { useId } from '../hooks/useId.js';
 import { useColorScheme, useBundledStyleSheet, DefaultTheme } from './styles.css.js';
 
@@ -49,7 +50,7 @@ function useShadowRootStyle(instanceId, keepAspectRatio = false) {
 }
 `.trim();
 }
-function ShadowRoot({
+const ShadowRoot = forwardRef(({
   children,
   theme = DefaultTheme,
   injectFontCss = true,
@@ -57,7 +58,7 @@ function ShadowRoot({
   colorScheme: explicitColorScheme,
   keepAspectRatio = false,
   ...props
-}) {
+}, ref) => {
   const colorScheme = useColorScheme(explicitColorScheme);
   const id = useId();
   const cssstyle = useShadowRootStyle(id, keepAspectRatio);
@@ -87,7 +88,7 @@ function ShadowRoot({
     /* @__PURE__ */ jsx(Root, { ssr: false, ...props, styleSheets, "data-likec4-instance": id, children: /* @__PURE__ */ jsx(
       "div",
       {
-        ref: rootRef,
+        ref: useMergedRef(rootRef, ref),
         "data-mantine-color-scheme": colorScheme,
         className: "likec4-shadow-root",
         children: /* @__PURE__ */ jsx(
@@ -105,6 +106,7 @@ function ShadowRoot({
       }
     ) })
   ] });
-}
+});
+ShadowRoot.displayName = "ShadowRoot";
 
 export { ShadowRoot };