@likec4/diagram 1.42.1 → 1.44.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/shadowroot/ShadowRoot.js

@@ -4,10 +4,51 @@ import { 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, useShadowRootStyle, useBundledStyleSheet, DefaultTheme } from './styles.css.js';
+import { useColorScheme, useBundledStyleSheet, DefaultTheme } from './styles.css.js';
 
 const Root = root["div"];
+function useShadowRootStyle(instanceId, keepAspectRatio = false) {
+  if (keepAspectRatio === false) {
+    return `
+:where([data-likec4-instance="${instanceId}"]) {
+  display: block;
+  box-sizing: border-box;
+  border: 0 solid transparent;
+  background: transparent;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  min-width: 80px;
+  min-height: 80px;
+}
+  `.trim();
+  }
+  const { width, height } = keepAspectRatio;
+  const isLandscape = width > height;
+  return `
+:where([data-likec4-instance="${instanceId}"]) {
+  display: block;
+  box-sizing: border-box;
+  border: 0 solid transparent;
+  background: transparent;
+  padding: 0;
+  overflow: hidden;
+  aspect-ratio: ${Math.ceil(width)} / ${Math.ceil(height)};
+  ${isLandscape ? "" : `
+  max-width: min(100%, var(--likec4-view-max-width, ${Math.ceil(width)}px));
+  margin-left: auto;
+  margin-right: auto;`}
+  width: ${isLandscape ? "100%" : "auto"};
+  height: ${isLandscape ? "auto" : "100%"};
+  ${isLandscape ? `min-width: 80px;` : `min-height: 80px;`}
+  max-height: min(100%, var(--likec4-view-max-height, ${Math.ceil(height)}px));
+}
+`.trim();
+}
 function ShadowRoot({
   children,
   theme = DefaultTheme,
@@ -23,17 +64,17 @@ function ShadowRoot({
   const rootRef = useRef(null);
   const styleSheets = useBundledStyleSheet(injectFontCss, styleNonce);
   const getRootElement = useCallback(() => rootRef.current ?? void 0, [rootRef]);
-  let getStyleNonce;
-  let nonce;
-  if (isDefined(styleNonce)) {
-    if (typeof styleNonce === "string") {
-      nonce = styleNonce;
-      getStyleNonce = () => styleNonce;
-    } else if (typeof styleNonce === "function") {
-      nonce = styleNonce();
-      getStyleNonce = styleNonce;
+  const getStyleNonce = useCallbackRef(() => {
+    if (isDefined(styleNonce)) {
+      if (typeof styleNonce === "string") {
+        return styleNonce;
+      } else if (typeof styleNonce === "function") {
+        return styleNonce();
+      }
     }
-  }
+    return "";
+  });
+  let nonce = isDefined(styleNonce) ? getStyleNonce() : void 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       "style",
@@ -55,7 +96,7 @@ function ShadowRoot({
             ...explicitColorScheme && { forceColorScheme: explicitColorScheme },
             defaultColorScheme: colorScheme,
             getRootElement,
-            ...getStyleNonce && { getStyleNonce },
+            ...!!nonce && { getStyleNonce },
             cssVariablesSelector: ".likec4-shadow-root",
             theme,
             children: /* @__PURE__ */ jsx(FramerMotionConfig, { children })

package/dist/shadowroot/styles.css.d.ts

@@ -4,7 +4,3 @@ export declare const cssInteractive: string;
 export declare function useBundledStyleSheet(injectFontCss: boolean, styleNonce?: string | (() => string) | undefined): CSSStyleSheet[];
 export type ColorScheme = 'light' | 'dark';
 export declare function useColorScheme(explicit?: ColorScheme): ColorScheme;
-export declare function useShadowRootStyle(instanceId: string, keepAspectRatio?: false | {
-    width: number;
-    height: number;
-}): string;

package/dist/shadowroot/styles.css.js

@@ -95,45 +95,5 @@ function useColorScheme(explicit) {
   );
   return explicit ?? computed ?? preferred;
 }
-function useShadowRootStyle(instanceId, keepAspectRatio = false) {
-  if (keepAspectRatio === false) {
-    return `
-:where([data-likec4-instance="${instanceId}"]) {
-  display: block;
-  box-sizing: border-box;
-  border: 0 solid transparent;
-  background: transparent;
-  padding: 0;
-  margin: 0;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  min-width: 80px;
-  min-height: 80px;
-}
-  `.trim();
-  }
-  const { width, height } = keepAspectRatio;
-  const isLandscape = width > height;
-  return `
-:where([data-likec4-instance="${instanceId}"]) {
-  display: block;
-  box-sizing: border-box;
-  border: 0 solid transparent;
-  background: transparent;
-  padding: 0;
-  overflow: hidden;
-  aspect-ratio: ${Math.ceil(width)} / ${Math.ceil(height)};
-  ${isLandscape ? "" : `
-  max-width: min(100%, var(--likec4-view-max-width, ${Math.ceil(width)}px));
-  margin-left: auto;
-  margin-right: auto;`}
-  width: ${isLandscape ? "100%" : "auto"};
-  height: ${isLandscape ? "auto" : "100%"};
-  ${isLandscape ? `min-width: 80px;` : `min-height: 80px;`}
-  max-height: min(100%, var(--likec4-view-max-height, ${Math.ceil(height)}px));
-}
-`.trim();
-}
 
-export { DefaultTheme, useBundledStyleSheet, useColorScheme, useShadowRootStyle };
+export { DefaultTheme, useBundledStyleSheet, useColorScheme };