@likec4/diagram 1.26.1 → 1.27.0

package/dist/likec4diagram/ui/search/ElementsColumn.js

@@ -1,19 +1,23 @@
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { ifilter, toArray, sortParentsFirst, isAncestor, nameFromFqn } from "@likec4/core";
-import { useTree, Tree, ActionIcon, UnstyledButton, Box, Group, Highlight, Tooltip, Text } from "@mantine/core";
-import { useCallbackRef } from "@mantine/hooks";
-import { IconChevronRight } from "@tabler/icons-react";
-import clsx from "clsx";
-import { m } from "framer-motion";
-import { useMemo, useEffect } from "react";
-import { isEmpty, pipe, reduce, indexBy, prop, first, only, partition } from "remeda";
-import { IconOrShapeRenderer } from "../../../context/IconRenderer.js";
-import { sortByLabel } from "../../../likec4model/useLikeC4ElementsTree.js";
-import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
-import { treeSubtree, treeLabel, treeRoot, focusable, treeNode, elementExpandIcon, elementTitleAndId, elementTitle, elementId, elementDescription, elementViewsCount, elementButton, elementIcon } from "./ElementsColumn.css.js";
-import { useNormalizedSearch, useCloseSearchAndNavigateTo, setPickView } from "./state.js";
-import { stopAndPrevent, moveFocusToSearchInput, centerY } from "./utils.js";
-import { NothingFound } from "./ViewsColum.js";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { ifilter, toArray, sortParentsFirst, isAncestor, nameFromFqn } from '@likec4/core';
+import { cx } from '@likec4/styles/css';
+import { useTree, Tree, ActionIcon, UnstyledButton, Box, Group, Highlight, Tooltip, Text } from '@mantine/core';
+import { useCallbackRef } from '@mantine/hooks';
+import { IconChevronRight } from '@tabler/icons-react';
+import clsx from 'clsx';
+import { m } from 'framer-motion';
+import { useMemo, useEffect } from 'react';
+import { isEmpty, pipe, reduce, indexBy, prop, first, only, partition } from 'remeda';
+import { IconOrShapeRenderer } from '../../../context/IconRenderer.js';
+import { sortByLabel } from '../../../likec4model/useLikeC4ElementsTree.js';
+import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
+import { focusable, buttonsva } from './_shared.css.js';
+import { treeSubtree, treeLabel, treeRoot, treeNode, elementIcon, elementExpandIcon, elementTitleAndId, elementId, elementViewsCount } from './ElementsColumn.css.js';
+import { useNormalizedSearch, useCloseSearchAndNavigateTo, setPickView } from './state.js';
+import { stopAndPrevent, moveFocusToSearchInput, centerY } from './utils.js';
+import { NothingFound } from './ViewsColum.js';
+
+const btn = buttonsva();
 function ElementsColumn() {
   const search = useNormalizedSearch();
   const model = useLikeC4Model(true);
@@ -97,18 +101,17 @@ function ElementsColumn() {
         levelOffset: "lg",
         classNames: {
           root: treeRoot,
-          node: clsx(focusable, treeNode),
+          node: cx(focusable, treeNode),
           label: treeLabel,
           subtree: treeSubtree
         },
         onKeyDownCapture: (e) => {
-          var _a;
           const target = e.target;
           const id = target.getAttribute("data-value");
           const node = !!id && byid[id];
           if (!node) return;
           if (e.key === "ArrowUp") {
-            if (id === ((_a = data[0]) == null ? void 0 : _a.value)) {
+            if (id === data[0]?.value) {
               stopAndPrevent(e);
               moveFocusToSearchInput();
             }
@@ -125,7 +128,7 @@ function ElementsColumn() {
               `[data-likec4-search-views] .${focusable}`
             )];
             let view = viewButtons.length > 1 ? viewButtons.find((el, i, all2) => centerY(el) > maxY || i === all2.length - 1) : null;
-            view ?? (view = first(viewButtons));
+            view ??= first(viewButtons);
             if (view) {
               stopAndPrevent(e);
               view.focus();
@@ -152,7 +155,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
       shape: element.shape,
       icon: element.icon
     },
-    className: elementIcon
+    className: cx(btn.icon, elementIcon)
   });
   const views = [...element.views()];
   const handleClick = useHandleElementSelection();
@@ -187,7 +190,7 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
         component: m.button,
         layout: true,
         tabIndex: -1,
-        className: clsx(elementButton, "likec4-element-button"),
+        className: clsx(btn.root, "group", "likec4-element-button"),
         ...views.length > 0 && {
           onClick: (e) => {
             if (!hasChildren || expanded) {
@@ -200,12 +203,20 @@ function ElementTreeNode({ node, elementProps, hasChildren, expanded }) {
           elementIcon$1,
           /* @__PURE__ */ jsxs(Box, { style: { flexGrow: 1 }, children: [
             /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", className: elementTitleAndId, children: [
-              /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: elementTitle, children: node.label }),
-              /* @__PURE__ */ jsx(Tooltip, { label: element.id, withinPortal: false, fz: "xs", disabled: !element.id.includes("."), children: /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: elementId, children: nameFromFqn(element.id) }) })
+              /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn.title, children: node.label }),
+              /* @__PURE__ */ jsx(Tooltip, { label: element.id, withinPortal: false, fz: "xs", disabled: !element.id.includes("."), children: /* @__PURE__ */ jsx(
+                Highlight,
+                {
+                  component: "div",
+                  highlight: searchTerms,
+                  className: cx(elementId, btn.descriptionColor),
+                  children: nameFromFqn(element.id)
+                }
+              ) })
             ] }),
-            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: elementDescription, lineClamp: 1, children: element.description || "No description" })
+            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: searchTerms, className: btn.description, lineClamp: 1, children: element.description || "No description" })
           ] }),
-          /* @__PURE__ */ jsx(Text, { component: "div", className: elementViewsCount, children: views.length === 0 ? "No views" : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Text, { component: "div", className: cx(elementViewsCount, btn.descriptionColor), fz: "xs", children: views.length === 0 ? "No views" : /* @__PURE__ */ jsxs(Fragment, { children: [
             views.length,
             " view",
             views.length > 1 ? "s" : ""
@@ -227,10 +238,7 @@ function useHandleElementSelection() {
       navigateTo(singleView.id, element.id);
       return;
     }
-    const [scoped, others] = partition(views, (v) => {
-      var _a;
-      return ((_a = v.viewOf) == null ? void 0 : _a.id) === element.id;
-    });
+    const [scoped, others] = partition(views, (v) => v.viewOf?.id === element.id);
     setPickView({
       elementFqn: element.id,
       scoped,
@@ -238,6 +246,5 @@ function useHandleElementSelection() {
     });
   });
 }
-export {
-  ElementsColumn
-};
+
+export { ElementsColumn };

package/dist/likec4diagram/ui/search/LikeC4Search.css.js

@@ -1,20 +1,87 @@
-/* empty css                           */
-/* empty css                                */
-var focusable = "_1cfw8gr4";
-var backdrop = "eien2d0";
-var root = "eien2d1";
-var input = "eien2d2";
-var pickviewBackdrop = "eien2d3";
-var pickview = "eien2d4";
-var pickviewGroup = "eien2d5";
-var scrollArea = "eien2d6";
-export {
-  backdrop,
-  focusable,
-  input,
-  pickview,
-  pickviewBackdrop,
-  pickviewGroup,
-  root,
-  scrollArea
-};
+import { css } from '@likec4/styles/css';
+
+const backdrop = css({
+  position: "fixed",
+  zIndex: 900,
+  inset: "0px",
+  backgroundColor: "[rgb(34 34 34 / 0.95)]",
+  backdropFilter: "auto",
+  backdropBlur: "10px",
+  _light: {
+    backgroundColor: "[rgb(255 255 255 / 0.92 )]"
+  }
+});
+const root = css({
+  containerName: "likec4-search",
+  containerType: "size",
+  position: "fixed",
+  zIndex: 901,
+  top: 0,
+  left: 0,
+  width: "100%",
+  height: "100%",
+  maxHeight: "100vh",
+  overflow: "hidden",
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "stretch",
+  gap: "md",
+  paddingTop: "32px",
+  paddingLeft: "16px",
+  paddingRight: "16px",
+  paddingBottom: 0
+});
+const input = css({
+  border: "transparent",
+  background: "transparent",
+  _focusWithin: {
+    background: `mantine.colors.gray[3]/55`,
+    _dark: {
+      background: `mantine.colors.dark[4]/55`
+    }
+  }
+});
+const pickviewBackdrop = css({
+  position: "absolute",
+  inset: 0,
+  width: "100%",
+  height: "100%",
+  backgroundColor: "[rgb(34 34 34 / 0.7)]",
+  zIndex: 902,
+  backdropFilter: "auto",
+  backdropBlur: "10px",
+  _light: {
+    backgroundColor: "[rgb(255 255 255 / 0.6)]"
+  }
+});
+const pickview = css({
+  position: "absolute",
+  top: "2rem",
+  left: "50%",
+  width: "100%",
+  maxWidth: "600px",
+  minWidth: "200px",
+  transform: "translateX(-50%)",
+  zIndex: 903
+});
+const pickviewGroup = css({
+  marginTop: "8px",
+  "& + &": {
+    marginTop: "32px"
+  }
+});
+const scrollArea = css({
+  height: [
+    "100%",
+    "100cqh"
+  ],
+  "& .mantine-ScrollArea-viewport": {
+    minHeight: "100%",
+    "& > div": {
+      minHeight: "100%",
+      height: "100%"
+    }
+  }
+});
+
+export { backdrop, input, pickview, pickviewBackdrop, pickviewGroup, root, scrollArea };

package/dist/likec4diagram/ui/search/LikeC4Search.js

@@ -1,17 +1,18 @@
-import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import { Portal, RemoveScroll, Group, Box, ActionIcon, Grid, GridCol, Title, ScrollArea, ScrollAreaAutosize, Stack } from "@mantine/core";
-import { useDisclosure, useHotkeys, useCallbackRef, useFocusTrap, useWindowEvent, useFocusReturn } from "@mantine/hooks";
-import { IconX } from "@tabler/icons-react";
-import { AnimatePresence, m, LayoutGroup } from "framer-motion";
-import { useRef } from "react";
-import { SearchControl } from "../../../components/SearchControl.js";
-import { ElementsColumn } from "./ElementsColumn.js";
-import { backdrop, root, scrollArea, pickviewBackdrop, pickview, pickviewGroup } from "./LikeC4Search.css.js";
-import { LikeC4SearchInput } from "./SearchInput.js";
-import { LikeC4SearchContext, useCloseSearch, wasResetPickView, usePickView, setPickView } from "./state.js";
-import { stopAndPrevent } from "./utils.js";
-import { ViewsColumn, ViewButton } from "./ViewsColum.js";
-import { useMantinePortalProps } from "../../../hooks/useMantinePortalProps.js";
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Portal, RemoveScroll, Group, Box, ActionIcon, Grid, GridCol, Title, ScrollArea, ScrollAreaAutosize, Stack } from '@mantine/core';
+import { useDisclosure, useHotkeys, useCallbackRef, useFocusTrap, useWindowEvent, useFocusReturn } from '@mantine/hooks';
+import { IconX } from '@tabler/icons-react';
+import { AnimatePresence, m, LayoutGroup } from 'framer-motion';
+import { useRef } from 'react';
+import { SearchControl } from '../../../components/SearchControl.js';
+import { ElementsColumn } from './ElementsColumn.js';
+import { backdrop, root, scrollArea, pickviewBackdrop, pickview, pickviewGroup } from './LikeC4Search.css.js';
+import { LikeC4SearchInput } from './SearchInput.js';
+import { LikeC4SearchContext, useCloseSearch, wasResetPickView, usePickView, setPickView } from './state.js';
+import { stopAndPrevent } from './utils.js';
+import { ViewsColumn, ViewButton } from './ViewsColum.js';
+import { useMantinePortalProps } from '../../../hooks/useMantinePortalProps.js';
+
 function LikeC4Search() {
   const [searchOpened, searchOps] = useDisclosure(false);
   useHotkeys([
@@ -89,6 +90,7 @@ function LikeC4SearchOverlay() {
     {
       ref,
       className: root,
+      "data-likec4-search": true,
       animate: {
         opacity: 1,
         scale: 1,
@@ -258,6 +260,5 @@ function PickView() {
     )
   ] }) }) });
 }
-export {
-  LikeC4Search
-};
+
+export { LikeC4Search };

package/dist/likec4diagram/ui/search/SearchInput.js

@@ -1,21 +1,22 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { compareNatural } from "@likec4/core";
-import { useCombobox, ComboboxOption, Text, Combobox, ComboboxTarget, Input, rem, ComboboxDropdown, ComboboxOptions, ScrollAreaAutosize, ComboboxEmpty } from "@mantine/core";
-import { useFocusWithin, useIsFirstRender, useDebouncedValue, useWindowEvent } from "@mantine/hooks";
-import { usePreviousDistinct } from "@react-hookz/web";
-import { IconSearch } from "@tabler/icons-react";
-import "react";
-import { isString, keys, only } from "remeda";
-import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
-import { input, root, focusable } from "./LikeC4Search.css.js";
-import { useIsPickViewActive, useSearch, setSearch } from "./state.js";
-import { moveFocusToSearchInput, stopAndPrevent } from "./utils.js";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { compareNatural } from '@likec4/core';
+import { useCombobox, ComboboxOption, Text, Combobox, ComboboxTarget, Input, rem, ComboboxDropdown, ComboboxOptions, ScrollAreaAutosize, ComboboxEmpty } from '@mantine/core';
+import { useFocusWithin, useIsFirstRender, useDebouncedValue, useWindowEvent } from '@mantine/hooks';
+import { usePreviousDistinct } from '@react-hookz/web';
+import { IconSearch } from '@tabler/icons-react';
+import 'react';
+import { isString, keys, only } from 'remeda';
+import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
+import { input } from './LikeC4Search.css.js';
+import { useIsPickViewActive, useSearch, setSearch } from './state.js';
+import { moveFocusToSearchInput, stopAndPrevent } from './utils.js';
+import { focusable } from './_shared.css.js';
+
 function startingWithKind(search) {
   return search.match(/^(k|ki|kin|kind|kind:)$/) != null;
 }
 const SEARCH_PREFIXES = ["#", "kind:"];
 function LikeC4SearchInput() {
-  var _a, _b;
   const isPickViewActive = useIsPickViewActive();
   const likec4model = useLikeC4Model(true);
   const combobox = useCombobox({
@@ -30,7 +31,7 @@ function LikeC4SearchInput() {
     "keydown",
     (event) => {
       try {
-        if (!focused && !isPickViewActive && (event.key === "Backspace" || event.key.startsWith("Arrow") || event.key.match(new RegExp("^\\p{L}$", "u")))) {
+        if (!focused && !isPickViewActive && (event.key === "Backspace" || event.key.startsWith("Arrow") || event.key.match(/^\p{L}$/u))) {
           moveFocusToSearchInput();
         }
       } catch (e) {
@@ -53,7 +54,7 @@ function LikeC4SearchInput() {
       const alloptions = likec4model.allTags().filter((tag) => tag.toLocaleLowerCase().includes(searchTag)).sort(
         compareNatural
       );
-      isExactMatch = ((_a = only(alloptions)) == null ? void 0 : _a.toLocaleLowerCase()) === searchTag;
+      isExactMatch = only(alloptions)?.toLocaleLowerCase() === searchTag;
       if (alloptions.length === 0) {
         options = [
           /* @__PURE__ */ jsx(ComboboxEmpty, { children: "No tags found" }, "empty-tags")
@@ -72,7 +73,7 @@ function LikeC4SearchInput() {
       let alloptions = keys(likec4model.$model.specification.elements);
       if (term) {
         alloptions = alloptions.filter((kind) => kind.toLocaleLowerCase().includes(term));
-        isExactMatch = ((_b = only(alloptions)) == null ? void 0 : _b.toLocaleLowerCase()) === term;
+        isExactMatch = only(alloptions)?.toLocaleLowerCase() === term;
       }
       if (alloptions.length === 0) {
         options = [
@@ -96,8 +97,7 @@ function LikeC4SearchInput() {
         if (!SEARCH_PREFIXES.includes(optionValue)) {
           combobox.closeDropdown();
           setTimeout(() => {
-            var _a2;
-            (_a2 = document.querySelector(`.${root} .${focusable}`)) == null ? void 0 : _a2.focus();
+            document.querySelector(`[data-likec4-search] .${focusable}`)?.focus();
           }, 50);
         }
       },
@@ -119,7 +119,7 @@ function LikeC4SearchInput() {
             placeholder: "Search by title, description or start with # or kind:",
             tabIndex: 0,
             classNames: {
-              input
+              input: input
             },
             size: "xl",
             value: search,
@@ -133,7 +133,6 @@ function LikeC4SearchInput() {
             onFocus: () => combobox.openDropdown(),
             onBlur: () => combobox.closeDropdown(),
             onKeyDownCapture: (e) => {
-              var _a2;
               if (e.key === "Tab") {
                 switch (true) {
                   case combobox.getSelectedOptionIndex() >= 0: {
@@ -180,7 +179,7 @@ function LikeC4SearchInput() {
               search === "" && combobox.getSelectedOptionIndex() === options.length - 1)) {
                 combobox.closeDropdown();
                 stopAndPrevent(e);
-                (_a2 = document.querySelector(`.${root} .${focusable}`)) == null ? void 0 : _a2.focus();
+                document.querySelector(`[data-likec4-search] .${focusable}`)?.focus();
                 return;
               }
             }
@@ -191,6 +190,5 @@ function LikeC4SearchInput() {
     }
   );
 }
-export {
-  LikeC4SearchInput
-};
+
+export { LikeC4SearchInput };

package/dist/likec4diagram/ui/search/ViewsColum.js

@@ -1,15 +1,17 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { isDeploymentView } from "@likec4/core";
-import { Stack, VisuallyHidden, UnstyledButton, Box, createScopedKeydownHandler, ThemeIcon, Group, Highlight, Badge } from "@mantine/core";
-import { IconStack2, IconZoomScan } from "@tabler/icons-react";
-import clsx from "clsx";
-import { m } from "framer-motion";
-import { first } from "remeda";
-import { useCurrentViewId } from "../../../hooks/useCurrentViewId.js";
-import { useLikeC4Model } from "../../../likec4model/useLikeC4Model.js";
-import { useNormalizedSearch, useCloseSearchAndNavigateTo } from "./state.js";
-import { moveFocusToSearchInput, centerY } from "./utils.js";
-import { emptyBoX, viewTitle, viewDescription, focusable, viewButton } from "./ViewsColumn.css.js";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { isDeploymentView } from '@likec4/core';
+import { cx } from '@likec4/styles/css';
+import { Stack, VisuallyHidden, UnstyledButton, Box, createScopedKeydownHandler, ThemeIcon, Group, Highlight, Badge } from '@mantine/core';
+import { IconStack2, IconZoomScan } from '@tabler/icons-react';
+import { m } from 'framer-motion';
+import { first } from 'remeda';
+import { useCurrentViewId } from '../../../hooks/useCurrentViewId.js';
+import { useLikeC4Model } from '../../../likec4model/useLikeC4Model.js';
+import { emptyBoX, buttonsva, focusable } from './_shared.css.js';
+import { useNormalizedSearch, useCloseSearchAndNavigateTo } from './state.js';
+import { moveFocusToSearchInput, centerY } from './utils.js';
+import { viewButton } from './ViewsColumn.css.js';
+
 const NothingFound = () => /* @__PURE__ */ jsx(Box, { className: emptyBoX, children: "Nothing found" });
 function ViewsColumn() {
   const search = useNormalizedSearch();
@@ -39,7 +41,7 @@ function ViewsColumn() {
             `[data-likec4-search-elements] .likec4-element-button`
           )];
           let elementButton = elementButtons.length > 1 ? elementButtons.find((el, i, all) => centerY(el) > maxY || i === all.length - 1) : null;
-          elementButton ?? (elementButton = first(elementButtons));
+          elementButton ??= first(elementButtons);
           if (elementButton) {
             e.stopPropagation();
             elementButton.focus();
@@ -72,6 +74,7 @@ function ViewsColumn() {
     }
   );
 }
+const btn = buttonsva();
 function ViewButton({ className, view, loop = false, search, ...props }) {
   const navigateTo = useCloseSearchAndNavigateTo();
   const currentViewId = useCurrentViewId();
@@ -80,7 +83,7 @@ function ViewButton({ className, view, loop = false, search, ...props }) {
     UnstyledButton,
     {
       ...props,
-      className: clsx(focusable, viewButton, className),
+      className: cx(btn.root, "group", focusable, viewButton, className),
       "data-likec4-view": view.id,
       ...isCurrentView && { "data-disabled": true },
       onClick: (e) => {
@@ -101,10 +104,10 @@ function ViewButton({ className, view, loop = false, search, ...props }) {
         }
       }),
       children: [
-        /* @__PURE__ */ jsx(ThemeIcon, { variant: "transparent", children: isDeploymentView(view) ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 }) }),
+        /* @__PURE__ */ jsx(ThemeIcon, { variant: "transparent", className: btn.icon, children: isDeploymentView(view) ? /* @__PURE__ */ jsx(IconStack2, { stroke: 1.8 }) : /* @__PURE__ */ jsx(IconZoomScan, { stroke: 1.8 }) }),
         /* @__PURE__ */ jsxs(Box, { style: { flexGrow: 1 }, children: [
           /* @__PURE__ */ jsxs(Group, { gap: "xs", wrap: "nowrap", align: "center", children: [
-            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: search, className: viewTitle, children: view.title || "untitled" }),
+            /* @__PURE__ */ jsx(Highlight, { component: "div", highlight: search, className: btn.title, children: view.title || "untitled" }),
             isCurrentView && /* @__PURE__ */ jsx(Badge, { size: "xs", fz: 9, radius: "sm", children: "current" })
           ] }),
           /* @__PURE__ */ jsx(
@@ -112,7 +115,7 @@ function ViewButton({ className, view, loop = false, search, ...props }) {
             {
               highlight: view.$view.description ? search : "",
               component: "div",
-              className: viewDescription,
+              className: btn.description,
               lineClamp: 1,
               children: view.$view.description || "No description"
             }
@@ -122,8 +125,5 @@ function ViewButton({ className, view, loop = false, search, ...props }) {
     }
   );
 }
-export {
-  NothingFound,
-  ViewButton,
-  ViewsColumn
-};
+
+export { NothingFound, ViewButton, ViewsColumn };

package/dist/likec4diagram/ui/search/ViewsColumn.css.d.ts

@@ -1,5 +1,3 @@
 export { emptyBoX, focusable } from './_shared.css';
 export declare const viewButton: string;
-export declare const viewTitle: string;
-export declare const viewDescription: string;
 export declare const viewButtonDescription: string;

package/dist/likec4diagram/ui/search/ViewsColumn.css.js

@@ -1,14 +1,29 @@
-/* empty css                           */
-/* empty css                               */
-var emptyBoX = "_1cfw8gr7";
-var focusable = "_1cfw8gr4";
-var viewButton = "ia79t50 _1cfw8gr3";
-var viewTitle = "ia79t51 _1cfw8gr5";
-var viewDescription = "ia79t52 _1cfw8gr6";
-export {
-  emptyBoX,
-  focusable,
-  viewButton,
-  viewDescription,
-  viewTitle
-};
+import { cx, css } from '@likec4/styles/css';
+
+const _viewBtn = "likec4-view-btn";
+const viewButton = cx(
+  css({
+    flexWrap: "nowrap",
+    display: "flex",
+    // '& .mantine-ThemeIcon-root': {
+    //   color: `[var(${iconColor}, {colors.mantine.colors.dark[2]})]`,
+    //   '--ti-size': '24px',
+    // },
+    "&[data-disabled] .mantine-ThemeIcon-root": {
+      opacity: 0.45
+    }
+  }),
+  _viewBtn
+);
+css({
+  marginTop: "4px",
+  // transition: transitions.fast,
+  // color: `[var(${descriptionColor}, {colors.mantine.colors.dimmed})]`,
+  fontSize: "13px",
+  lineHeight: "1.4",
+  [`:where(.likec4-view-btn[data-disabled]) &`]: {
+    opacity: 0.85
+  }
+});
+
+export { viewButton };

package/dist/likec4diagram/ui/search/_shared.css.d.ts

@@ -1,18 +1,4 @@
-export declare const titleColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const descriptionColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const iconColor: `var(--${string})` | `var(--${string}, ${string})` | `var(--${string}, ${number})`;
-export declare const buttonFocused: {
-    outline: "none";
-    backgroundColor: string;
-    borderColor: string;
-    vars: {
-        [iconColor]: string;
-        [titleColor]: string;
-        [descriptionColor]: string;
-    };
-};
-export declare const button: string;
-export declare const focusable: string;
-export declare const title: string;
-export declare const description: string;
+import { SlotRecipeRuntimeFn, SlotRecipeVariantRecord } from '@likec4/styles/types';
+export declare const focusable = "likec4-focusable";
 export declare const emptyBoX: string;
+export declare const buttonsva: SlotRecipeRuntimeFn<"title" | "description" | "icon" | "root" | "descriptionColor", SlotRecipeVariantRecord<"title" | "description" | "icon" | "root" | "descriptionColor">>;