@arcblock/ux 3.4.15 → 3.5.1

package/src/NFTDisplay/index.tsx

@@ -1,393 +0,0 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import React, { useRef, useEffect, useState } from 'react';
-import clsx from 'clsx';
-import { Buffer } from 'buffer';
-import get from 'lodash/get';
-import pako from 'pako';
-import base64 from 'base64-url';
-import isSvg from 'is-svg';
-import noop from 'lodash/noop';
-import { Box, type BoxProps } from '@mui/material';
-
-import AspectRatioContainer from './aspect-ratio-container';
-import ImgSvgEmbedder from './svg-embedder/img';
-import InlineSvgEmbedder from './svg-embedder/inline-svg';
-import DefaultLoading from './loading';
-import DefaultBrokenImage from './broken';
-import { styled } from '../Theme';
-import displayApi from './displayApi';
-import RenderSvg from './render-svg';
-
-/**
- * 从 assetState 中获取 nft data, 兼容新旧两种类型的数据结构, 建议将该方法的返回值传入 NFTDisplay 组件的 data prop
- * - 旧: assetState.data.value (.credentialSubject.display)
- * - 新: assetState.display
- */
-export function getNFTData(assetState: Record<string, any>) {
-  return assetState?.display || assetState?.data?.value;
-}
-
-function fromBase64(v: string) {
-  if (typeof v !== 'string') {
-    throw new Error('fromBase64 requires input to be a string');
-  }
-  return Buffer.from(base64.unescape(v), 'base64');
-}
-
-// const isVC = type => {
-//   return String(type).includes('VerifiableCredential');
-// };
-
-// 仅针对非 url type 的情况
-const getSvgEmbedder = (preferredSvgEmbedder: 'img' | 'svg') => {
-  const embedders = {
-    img: ImgSvgEmbedder,
-    svg: InlineSvgEmbedder,
-  };
-  return embedders[preferredSvgEmbedder];
-};
-
-export interface NFTDisplayProps extends BoxProps {
-  /** asset data 可以是 raw data 和 parsed data */
-  data: string | Record<string, any>;
-  address: string;
-  inset?: false | true;
-  aspect?: number;
-  component?: React.ElementType<any>;
-  className?: string;
-  renderError?: () => React.ReactNode;
-  renderLoading?: () => React.ReactNode;
-  /** 对于非 url type 的情况, 支持优先选用的 svg 嵌入方式, 默认是 img */
-  preferredSvgEmbedder?: 'img' | 'svg';
-  /** 针对非 url type 的情况, 检测 svg 有效性, 默认禁用 */
-  checkSvg?: false | true;
-  /** loading 最小显示时间 (避免闪烁) */
-  minimumLoadingTime?: number;
-  /** 完成回调, 无论加载成功|失败 */
-  onCompleted?: () => void;
-  /**
-   * 图片处理，参考：https://team.arcblock.io/comment/docs/c158aee4-accd-42f4-9ced-6a23f28c00e0/en/blocklet-image-service-guide
-   * 配置参数会全部转发给 Image Service
-   */
-  imageFilter?: object | null;
-}
-
-/**
- * TODO:
- * 考虑把 asset data 解析部分和 nft display 分离, android 端有相关使用场景 - 只传入 svg 或 url, 也可以传入 asset data,
- * 目前如果想直接传入 svg 或 url, 需要构造一个 asset data 的数据才能使用 NFTDisplay 组件
- */
-function NFTDisplay({
-  data,
-  address,
-  inset,
-  aspect,
-  component = 'span',
-  className = '',
-  renderError,
-  renderLoading,
-  preferredSvgEmbedder = 'img',
-  checkSvg = false,
-  minimumLoadingTime = 0,
-  onCompleted = noop,
-  imageFilter = null,
-  ...rest
-}: NFTDisplayProps) {
-  const wrapRoot = (children: React.ReactNode) => (
-    // @ts-expect-error
-    <Root component={component} {...rest} className={clsx(className, { 'nft-display--inset': inset })}>
-      {children}
-    </Root>
-  );
-
-  const parsed = useRef<Record<string, any>>({});
-  try {
-    // 如果是 raw data 先解析
-    if (typeof data === 'string') {
-      parsed.current = JSON.parse(data);
-    } else {
-      parsed.current = data;
-    }
-
-    const { vcId } = parsed.current;
-    // 需要兼容新旧两种类型的数据结构, nft data 有 credentialSubject 属性, 说明是旧 nft data, 否则是新 nft data
-    const display = parsed.current.credentialSubject
-      ? get(parsed.current, 'credentialSubject.display')
-      : parsed.current;
-    const { content, type } = display as { content: string; type: string };
-    const isUrlType = type === 'url';
-
-    // 首次加载, 对于 url type 的情况, loading 为 true
-    const [state, setState] = useState<{
-      loading: boolean;
-      error: boolean;
-      loadingUrlType: boolean;
-      urlType: string | null;
-    }>({
-      loading: isUrlType,
-      error: false,
-      loadingUrlType: true,
-      urlType: null,
-    });
-    const [minimumLoadingReady, setMinimumLoadingReady] = useState(minimumLoadingTime <= 0);
-    // console.log('[debug] render', {type, minimumLoadingTime}, JSON.stringify(state))
-
-    // assemble the complete url
-    const getFullContentUrl = ({ useImageFilter = false, t }: { useImageFilter?: boolean; t?: string } = {}) => {
-      const urlObj = new URL(content);
-
-      // check protocol
-      if (window.location.protocol === 'https:' && urlObj.protocol === 'http:') {
-        urlObj.protocol = 'https:';
-      }
-
-      if (!urlObj.searchParams.has('assetId')) {
-        urlObj.searchParams.append('assetId', address);
-      }
-
-      if (!urlObj.searchParams.has('vcId') && vcId) {
-        urlObj.searchParams.append('vcId', vcId);
-      }
-
-      // image filter
-      if (useImageFilter && imageFilter) {
-        Object.entries(imageFilter).forEach(([key, value]) => {
-          urlObj.searchParams.append(key, value);
-        });
-      }
-
-      // other params
-      if (t) {
-        urlObj.searchParams.append('t', t);
-      }
-
-      return urlObj.href;
-    };
-
-    // get url content type
-    const getUrlContentType = async () => {
-      try {
-        const response = await displayApi({
-          url: getFullContentUrl({ useImageFilter: false, t: 'nftdisplay' }),
-          method: 'HEAD',
-        });
-        // @ts-expect-error
-        const contentType = response?.headers?.get('Content-Type');
-        setState({ ...state, loadingUrlType: false, urlType: contentType });
-      } catch (error) {
-        console.error('Failed to fetch url content type', error);
-        // display an error message when timeout occurs to avoid repeated waiting.
-        if ((error as Error)?.message?.includes('timeout')) {
-          setState({ ...state, loadingUrlType: false, loading: false, error: true });
-          return;
-        }
-
-        setState({ ...state, loadingUrlType: false, urlType: null });
-      }
-    };
-
-    useEffect(() => {
-      let timer: NodeJS.Timeout;
-      if (minimumLoadingTime > 0) {
-        timer = setTimeout(() => setMinimumLoadingReady(true), minimumLoadingTime);
-      }
-
-      if (type === 'url') {
-        getUrlContentType();
-      }
-
-      return () => clearTimeout(timer);
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    // onCompleted
-    useEffect(() => {
-      if ((!state.loading && minimumLoadingReady) || state.error) {
-        onCompleted();
-      }
-      // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [state, minimumLoadingReady]);
-
-    if (state.error) {
-      throw new Error('Failed to render NFT Display.');
-    }
-
-    const onLoad = () => {
-      if (state.loading) {
-        setState({ ...state, loading: false });
-      }
-    };
-
-    const onError = () => {
-      setState({ ...state, error: true, loading: false });
-    };
-
-    // render image
-    const renderImg = () => {
-      const url = getFullContentUrl({ useImageFilter: true });
-      return (
-        <img src={url} onError={onError} onLoad={onLoad} alt="NFT Display" style={{ width: 'auto', height: 'auto' }} />
-      );
-    };
-
-    // render object
-    const renderObject = () => {
-      const objectType = state.urlType || 'image/svg+xml';
-      const url = getFullContentUrl();
-
-      // do naive image render
-      const pathname = new URL(url).pathname.toLowerCase();
-      const imageExtensions = [
-        '.jpg',
-        '.jpeg',
-        '.png',
-        '.gif',
-        '.bmp',
-        '.webp',
-        '.svg',
-        '.tiff',
-        '.tif',
-        '.ico',
-        '.jfif',
-        '.pjpeg',
-        '.pjp',
-        '.avif',
-      ];
-      if (imageExtensions.some((ext) => pathname.endsWith(ext))) {
-        return renderImg();
-      }
-
-      // related: https://github.com/ArcBlock/did-spaces/issues/1367
-      if (objectType.includes('text/html;')) {
-        return <DefaultBrokenImage />;
-      }
-
-      return (
-        // eslint-disable-next-line jsx-a11y/alt-text
-        <object
-          key={url}
-          type={objectType}
-          data={url}
-          onErrorCapture={onError}
-          onLoad={onLoad}
-          style={{ width: '100%', height: '100%', pointerEvents: 'none' }}
-        />
-      );
-    };
-
-    const renderNFT = () => {
-      if (content) {
-        switch (type) {
-          case 'url': {
-            if (state.loadingUrlType) {
-              return null;
-            }
-
-            if (state.urlType?.startsWith('image/svg+xml')) {
-              return <RenderSvg src={getFullContentUrl()} onLoad={onLoad} />;
-            }
-
-            // render image
-            if (state.urlType?.startsWith('image')) {
-              return renderImg();
-            }
-
-            return renderObject();
-          }
-          case 'uri': {
-            return (
-              <img
-                src={content}
-                onError={() => setState({ ...state, error: true })}
-                onLoad={() => setState({ ...state, loading: false })}
-                alt="NFT Display"
-              />
-            );
-          }
-          case 'svg_gzipped': {
-            const buffer = pako.ungzip(fromBase64(content), {});
-            const svg = Buffer.from(buffer).toString('utf8');
-            if (checkSvg && !isSvg(svg)) {
-              throw new Error('Invalid SVG of type svg_gzipped');
-            }
-            const Embedder = getSvgEmbedder(preferredSvgEmbedder);
-            return <Embedder svg={svg} />;
-          }
-          case 'svg': {
-            if (checkSvg && !isSvg(content)) {
-              throw new Error('Invalid SVG of type svg');
-            }
-            const Embedder = getSvgEmbedder(preferredSvgEmbedder);
-            return <Embedder svg={content} />;
-          }
-          // TODO: 准备测试数据
-          case 'html': {
-            break;
-          }
-          default:
-        }
-      }
-      throw new Error(`unsupported display protocol: ${display.type}`);
-    };
-
-    return wrapRoot(
-      <>
-        {(state.loading || !minimumLoadingReady) && (renderLoading ? renderLoading() : <DefaultLoading />)}
-        {renderNFT()}
-      </>
-    );
-  } catch (e) {
-    console.error((e as Error)?.message, {
-      nftId: address,
-      vcId: parsed?.current?.vcId,
-    });
-    return wrapRoot(renderError ? renderError() : <DefaultBrokenImage />);
-  }
-}
-
-const Root = styled(Box)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  /* 默认尺寸 */
-  width: 150px;
-  height: 150px;
-  overflow: hidden;
-
-  &,
-  img,
-  object {
-    max-width: 100%;
-    max-height: 100%;
-  }
-
-  img,
-  object {
-    width: 100%;
-    height: 100%;
-  }
-
-  &.nft-display--inset {
-    width: 100%;
-    height: 100%;
-  }
-`;
-
-function withAspectRatio(Component: React.ComponentType<NFTDisplayProps>) {
-  // eslint-disable-next-line func-names, react/prop-types
-  return function ({ aspect = undefined, inset = false, ...rest }: NFTDisplayProps) {
-    // inset 比 aspect ratio 优先级高, 如果同时设置了 inset 和 aspect, 则后者不生效
-    const applyAspectRatio = aspect && aspect > 0 && !inset;
-    if (applyAspectRatio) {
-      return (
-        <AspectRatioContainer aspect={aspect}>
-          <Component inset {...rest} />
-        </AspectRatioContainer>
-      );
-    }
-    return <Component inset={inset} {...rest} />;
-  };
-}
-
-export default withAspectRatio(NFTDisplay);

package/src/NFTDisplay/loading.tsx

@@ -1,16 +0,0 @@
-import { styled } from '../Theme';
-
-export default function Loading() {
-  return <Root className="nft-display__loading">Loading...</Root>;
-}
-
-const Root = styled('span')`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  color: #ccc;
-  background-color: #eee;
-`;

package/src/NFTDisplay/preview.tsx

@@ -1,84 +0,0 @@
-import { Modal } from '@mui/material';
-import styled from '@emotion/styled';
-import NFTDisplay, { getNFTData } from '.';
-
-export interface NftInfo {
-  address: string;
-  data: Record<string, any>;
-  display: Record<string, any>;
-  issuer: string;
-}
-
-export default function NftPreview({
-  visible,
-  onClose,
-  nft,
-}: {
-  visible: boolean;
-  onClose: () => void;
-  nft: NftInfo | null;
-}) {
-  if (!visible || !nft) {
-    return null;
-  }
-
-  return (
-    <NftPreviewRoot>
-      {/* Preview Modal */}
-      <Modal open={visible} onClose={onClose}>
-        <ModalRoot onClick={onClose}>
-          <NFTDisplay data={getNFTData(nft)} address={nft.address} inset />
-        </ModalRoot>
-      </Modal>
-    </NftPreviewRoot>
-  );
-}
-
-const NftPreviewRoot = styled.div`
-  position: relative;
-  width: 100%;
-  height: 100%;
-  cursor: pointer;
-
-  &:hover {
-    .mask {
-      opacity: 1;
-    }
-  }
-
-  .mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
-    background: rgba(0, 0, 0, 0.6);
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-`;
-
-const ModalRoot = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-  width: 100vw;
-
-  img,
-  object {
-    max-width: 90vw;
-    max-height: 75vh;
-  }
-
-  .nft-display--inset {
-    > .MuiBox-root,
-    .nft-display__loading {
-      width: 75vmin;
-      height: 75vmin;
-    }
-  }
-`;

package/src/NFTDisplay/render-svg.tsx

@@ -1,21 +0,0 @@
-import DOMPurify from 'dompurify';
-import { useAsyncEffect } from 'ahooks';
-import axios from 'axios';
-import { useState } from 'react';
-import InlineSvg from './svg-embedder/inline-svg';
-
-function RenderSvg({ src, onLoad = undefined }: { src: string; onLoad?: () => void }) {
-  const [svgContent, setSvgContent] = useState('');
-
-  useAsyncEffect(async () => {
-    // @note: 注意源站点需要允许跨域
-    const response = await axios.get(src);
-    const cleanSVG = DOMPurify.sanitize(response.data);
-    setSvgContent(cleanSVG);
-    onLoad?.();
-  }, []);
-
-  return <InlineSvg svg={svgContent} />;
-}
-
-export default RenderSvg;

package/src/NFTDisplay/svg-embedder/img.tsx

@@ -1,27 +0,0 @@
-import InlineSvgEmbedder from './inline-svg';
-
-const svgToImgUrl = (svg: string) => {
-  // fix: #225, https://stackoverflow.com/a/52135328)
-  const blob = new Blob([svg], { type: 'image/svg+xml' });
-  return URL.createObjectURL(blob);
-};
-
-export interface ImgEmbedderProps extends React.HTMLAttributes<HTMLImageElement> {
-  svg: string;
-  alt?: string;
-  /** 对于包含 foreignObject 的 svg, fallback 到 inline svg + shadow DOM */
-  fallback?: true | false;
-}
-
-/** 基于 <img> 嵌入 svg */
-function ImgEmbedder({ svg, alt = '', fallback = true, ...rest }: ImgEmbedderProps) {
-  // 包含 foreignObject 的 svg, fallback 到 shadow dom
-  if (fallback && svg.indexOf('</foreignObject>') > -1) {
-    return <InlineSvgEmbedder svg={svg} />;
-  }
-
-  const url = svgToImgUrl(svg);
-  return <img src={url} onLoad={() => URL.revokeObjectURL(url)} alt={alt} {...rest} />;
-}
-
-export default ImgEmbedder;

package/src/NFTDisplay/svg-embedder/inline-svg.tsx

@@ -1,36 +0,0 @@
-import root from 'react-shadow/emotion';
-import { type SxProps } from '@mui/material';
-
-import { styled } from '../../Theme';
-
-export interface InlineSvgProps extends React.HTMLAttributes<HTMLSpanElement> {
-  svg: string;
-  sx?: SxProps;
-}
-
-/** inline svg 的方式嵌入 svg, 使用 shadow DOM 避免样式污染 */
-function InlineSvg({ svg, ...rest }: InlineSvgProps) {
-  return (
-    <Root {...rest}>
-      <Inner dangerouslySetInnerHTML={{ __html: svg }} />
-    </Root>
-  );
-}
-
-const Root = styled(root.span)`
-  display: block;
-  width: 100%;
-  height: 100%;
-`;
-
-const Inner = styled('div')`
-  &,
-  & > svg {
-    height: 100%;
-    width: 100%;
-    min-width: 100%;
-    max-width: 100%;
-  }
-`;
-
-export default InlineSvg;

package/src/NavMenu/NavMenu.stories.jsx

@@ -1,17 +0,0 @@
-export { default as BasicRouterLink } from './demo/basic-router-link';
-export { default as NestedNavigation } from './demo/nested-navigation';
-export { default as ActiveState } from './demo/active-state';
-export { default as UseItemsProp } from './demo/use-items-prop';
-export { default as LabelIconOnly } from './demo/label-icon-only';
-export { default as InlineMode } from './demo/inline-mode';
-
-export default {
-  title: 'Navigation/NavMenu',
-  parameters: {
-    docs: {
-      description: {
-        component: 'The NavMenu component is used to provide a means to navigate through an app or website.',
-      },
-    },
-  },
-};

package/src/NavMenu/images/OCAP.svg

@@ -1 +0,0 @@
-<svg width="420" height="420" viewBox="0 0 420 420" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M210.205 17.143V210m0 0 166.667 96.19M210.205 210 44.967 305.238" stroke="url(#a)" stroke-opacity=".6" stroke-width="18"/><path fill-rule="evenodd" clip-rule="evenodd" d="m247.638 178.49-37.433 21.613-37.284-21.527 27.416-47.8 1.297-2.26 8.571-14.945 8.571 14.866 1.337 2.316 27.525 47.737zm14.846-8.571-37.428-64.911-14.89-25.824-14.832 25.858-37.26 64.963-95.36-55.056 147.491-85.154 147.49 85.154-95.211 54.97zm-6.283 23.423-37.425 21.607v86.295l66.189-38.2 8.573-4.949-8.552-14.832-28.785-49.921zm-37.425 127.694 83.332-48.093 14.841-8.566-8.56-14.845-37.342-64.762 95.22-54.975v170.308l-147.491 85.153v-64.22zm-17.142-19.885v-86.202l-37.242-21.501-28.33 49.392-8.476 14.779 8.497 4.995 65.551 38.537zm-52.088-116.275-36.831 64.214-8.438 14.712 14.621 8.595 82.619 48.572.117.068v64.219L54.143 300.103V129.795l95.403 55.081zM210.205 10 45.571 105.051 37 110v200l164.634 95.051 8.571 4.949 8.571-4.949L383.41 310V110l-8.572-4.949L210.205 10z" fill="url(#b)"/><defs><linearGradient id="a" x1="632.433" y1="166.456" x2="334.741" y2="-292.388" gradientUnits="userSpaceOnUse"><stop stop-color="#4EF1BA"/><stop offset=".502" stop-color="#16CED1"/><stop offset="1" stop-color="#3773F2"/></linearGradient><linearGradient id="b" x1="210.205" y1="-190" x2="-189.795" y2="210" gradientUnits="userSpaceOnUse"><stop stop-color="#4EF1BA"/><stop offset=".502" stop-color="#16CED1"/><stop offset="1" stop-color="#3773F2"/></linearGradient></defs></svg>

package/src/NavMenu/images/abt-network.svg

@@ -1 +0,0 @@
-<svg width="200" height="200" viewBox="0 0 200 200" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="a" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="8" y="8" width="184" height="184"><path d="M192 100c0-50.81-41.19-92-92-92S8 49.19 8 100s41.19 92 92 92 92-41.19 92-92z" fill="#fff"/></mask><g mask="url(#a)"><path d="M192 100c0-50.81-41.19-92-92-92S8 49.19 8 100s41.19 92 92 92 92-41.19 92-92z" fill="#fff"/><path d="M192 8H8v184h184V8z" fill="url(#b)"/><path opacity=".6" fill-rule="evenodd" clip-rule="evenodd" d="M98.06 97.074v2.23l-1.942 1.115L40.2 132.536l1.941 3.344L100 102.648l57.859 33.232 1.941-3.344-55.918-32.117-1.941-1.115V32.84h-3.882v64.234z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="m100.404 28.62 62.156 35.886v71.771l-62.156 35.886-62.155-35.886V64.506l62.155-35.886zM44.076 65.627l38.653 22.317 17.676-30.615 17.675 30.614 38.653-22.316-56.329-32.52-56.328 32.52zm114.599 3.364-38.653 22.317 17.676 30.615-35.351 20.41v24.223l56.328-32.522V68.991zm-60.213 97.565v-24.223l-35.35-20.41 17.675-30.615L42.133 68.99v65.043l56.329 32.522zM84.15 93.25l-15.733 27.251 30.045 17.346v-36.335l-1.942-1.121-12.37-7.14zm18.197 44.597 30.043-17.346-15.733-27.25-12.368 7.14-1.942 1.121v36.335zm12.368-47.96-14.311-24.789-14.311 24.788 14.311 8.263 14.311-8.263z" fill="#fff"/></g><defs><linearGradient id="b" x1="100" y1="-84" x2="-84" y2="100" gradientUnits="userSpaceOnUse"><stop stop-color="#4EF1BA"/><stop offset=".502" stop-color="#16CED1"/><stop offset="1" stop-color="#3773F2"/></linearGradient></defs></svg>

package/src/NavMenu/images/ai-kit.svg

@@ -1 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><g filter="url(#b)"><path fill-rule="evenodd" clip-rule="evenodd" d="M12.61 0h-1.218v2.15H10.31V0H9.09v2.15H8.007V0H6.788v2.15H5.707V0H4.488v2.183a2.765 2.765 0 0 0-2.305 2.305H0v1.22h2.15v1.08H0v1.218h2.15V9.09H0v1.219h2.15v1.083H0v1.219h2.15v1.083H0v1.219h2.15v1.08H0v1.22h2.15v1.083H0v1.218h2.183a2.764 2.764 0 0 0 2.305 2.303V24h1.219v-2.15h1.08V24h1.22v-2.15H9.09V24h1.219v-2.15h1.083V24h1.219v-2.15h1.083V24h1.219v-2.15h1.08V24h1.22v-2.15h1.083V24h1.218v-2.183a2.765 2.765 0 0 0 2.303-2.303H24v-1.218h-2.15v-1.084H24v-1.218h-2.15v-1.081H24v-1.219h-2.15v-1.083H24v-1.219h-2.15V10.31H24V9.09h-2.15V8.007H24V6.788h-2.15v-1.08H24v-1.22h-2.183a2.765 2.765 0 0 0-2.303-2.305V0h-1.218v2.15h-1.084V0h-1.218v2.15h-1.081V0h-1.219v2.15h-1.083V0z" fill="#1D9BF0"/></g><path d="M17.102 4.913H6.9c-1.098 0-1.988.89-1.988 1.988v10.2c0 1.099.89 1.989 1.988 1.989h10.2c1.099 0 1.989-.89 1.989-1.988V6.9c0-1.098-.89-1.988-1.988-1.988z" fill="url(#c)"/><path d="M8.387 7.918a.877.877 0 0 0-.53-.802V4.91H7.17v2.206a.874.874 0 1 0 1.218.802z" fill="#3AC8A0"/><path d="M8.387 11.13a.872.872 0 0 0-.3 1.69v6.27h.691v-6.311a.871.871 0 0 0-.391-1.654v.005z" fill="#E85F3D"/><path d="M11.944 14.673a.874.874 0 0 0-.348 1.676v2.74h.692v-2.74a.873.873 0 0 0-.344-1.676z" fill="#3AC8A0"/><path d="M17.306 10.482a.869.869 0 0 0-.759 1.302l-1.527 2.023v5.283h.69v-5.051l1.378-1.836c.068.015.137.023.207.024a.874.874 0 1 0 0-1.745h.01zm-4.433-.237a.994.994 0 0 0-.182.02l-1.379-1.828V4.913h-.689v3.763l1.508 2a.87.87 0 1 0 .745-.422l-.003-.009z" fill="#E85F3D"/><path d="M15.682 9.666a.874.874 0 0 0 .345-1.676V4.913h-.69V7.99a.874.874 0 0 0 .345 1.676z" fill="#3AC8A0"/><mask id="d" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="6" y="7" width="12" height="10"><path d="M15.25 10.5h-6.5a.5.5 0 0 0-.5.5v5a.5.5 0 0 0 .5.5h6.5a.5.5 0 0 0 .5-.5v-5a.5.5 0 0 0-.5-.5z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M7.75 11a1 1 0 0 1 1-1h6.5a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-6.5a1 1 0 0 1-1-1v-5zm7.5 0h-6.5v5h6.5v-5z" fill="#fff"/><path d="M10.25 13a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zm3.5 0a.5.5 0 1 0 0-1 .5.5 0 0 0 0 1zM11 14a.5.5 0 0 0 0 1v-1zm2 1a.5.5 0 0 0 0-1v1zm-2 0h2v-1h-2v1z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 8a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 12 8zm-5 4a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 7 12zm10 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2a.5.5 0 0 1 .5-.5z" fill="#fff"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11 8a1 1 0 1 1 2 0 1 1 0 0 1-2 0z" fill="#fff"/></mask><g mask="url(#d)"><path d="M6 6h12v12H6V6z" fill="#fff"/></g></g><defs><linearGradient id="c" x1="16.083" y1="19.958" x2="16.147" y2="6.277" gradientUnits="userSpaceOnUse"><stop stop-color="#369CFC"/><stop offset="1" stop-color="#1E65B5"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h24v24H0z"/></clipPath><filter id="b" x="0" y="0" width="24.4" height="24.4" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/><feMorphology radius=".8" in="SourceAlpha" result="effect1_innerShadow_697_8408"/><feOffset dx=".4" dy=".4"/><feGaussianBlur stdDeviation=".6"/><feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.25 0"/><feBlend in2="shape" result="effect1_innerShadow_697_8408"/></filter></defs></svg>

package/src/NavMenu/images/aigne-image-smith.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 902 902" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="902" height="902" rx="212" fill="url(#a)"/><rect x="166" y="247" width="569" height="409" rx="80" stroke="#fff" style="stroke:#fff;stroke-opacity:1" stroke-width="40"/><ellipse cx="371" cy="452" rx="37" ry="65" fill="#fff" style="fill:#fff;fill-opacity:1"/><ellipse cx="531" cy="452" rx="37" ry="65" fill="#fff" style="fill:#fff;fill-opacity:1"/><defs><linearGradient id="a" x1="84" y1="78.5" x2="811.5" y2="850.5" gradientUnits="userSpaceOnUse"><stop stop-color="#AAF4EF" style="stop-color:color(display-p3 .6667 .9569 .9373);stop-opacity:1"/><stop offset=".181" stop-color="#C7F37F" style="stop-color:color(display-p3 .7798 .9512 .4996);stop-opacity:1"/><stop offset=".361" stop-color="#FFD071" style="stop-color:color(display-p3 1 .8141 .4422);stop-opacity:1"/><stop offset=".546" stop-color="#FF9898" style="stop-color:color(display-p3 1 .596 .596);stop-opacity:1"/><stop offset=".722" stop-color="#FF89E0" style="stop-color:color(display-p3 1 .536 .8769);stop-opacity:1"/><stop offset=".899" stop-color="#B695FE" style="stop-color:color(display-p3 .7137 .5843 .9961);stop-opacity:1"/><stop offset="1" stop-color="#7C8EED" style="stop-color:color(display-p3 .4863 .5569 .9294);stop-opacity:1"/></linearGradient></defs></svg>

package/src/NavMenu/images/aigne.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 400 400" xmlns="http://www.w3.org/2000/svg"><rect x="73.16" y="109.16" width="253.435" height="181.679" rx="36.641" fill="none" stroke="currentColor" stroke-width="18.321"/><ellipse cx="164" cy="199.618" rx="16.03" ry="28.626" fill="currentColor"/><ellipse cx="234.991" cy="199.618" rx="16.03" ry="28.626" fill="currentColor"/></svg>

package/src/NavMenu/images/arcsphere.svg

@@ -1 +0,0 @@
-<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="1024" height="1024" rx="250" fill="url(#a)"/><path fill-rule="evenodd" clip-rule="evenodd" d="M283.163 232.966c-9.334 5.389-9.334 18.86 0 24.249 4.331 2.5 9.668 2.5 14 0L402 196.687a14 14 0 0 0 7-12.125c0-10.777-11.666-17.513-21-12.124l-104.837 60.528zm-98.864 215.431a14 14 0 0 0-7-12.125c-9.333-5.388-21 1.347-21 12.125v123.207c0 10.777 11.667 17.513 21 12.124a14 14 0 0 0 7-12.124V448.397zm547.739 316.237a14 14 0 0 1 14 0c9.334 5.388 9.334 18.86 0 24.249L638 851.258c-9.333 5.389-21-1.347-21-12.124a14 14 0 0 1 7-12.124l108.038-62.376zm137.137-193.333c0 10.777-11.667 17.512-21 12.124a14.002 14.002 0 0 1-7-12.124V448.7a14 14 0 0 1 7-12.124c9.333-5.389 21 1.347 21 12.124v122.601zM409 839.438c0 10.777-11.666 17.513-21 12.124l-108.301-62.528c-9.334-5.388-9.334-18.86 0-24.248a14 14 0 0 1 14 0L402 827.313a14 14 0 0 1 7 12.125zm208-654.572c0-10.777 11.667-17.513 21-12.124l104.575 60.376c9.333 5.388 9.333 18.86 0 24.248a14 14 0 0 1-14 0L624 196.99a14 14 0 0 1-7-12.124z" fill="#fff" fill-opacity=".12"/><path fill-rule="evenodd" clip-rule="evenodd" d="M513.689 175.068c-17.416 0-31.534-14.118-31.534-31.534 0-17.416 14.118-31.534 31.534-31.534 17.416 0 31.534 14.118 31.534 31.534 0 17.416-14.118 31.534-31.534 31.534zM560.723 321.5c0 26.858-21.773 48.631-48.631 48.631s-48.631-21.773-48.631-48.631c0-26.859 21.773-48.632 48.631-48.632s48.631 21.773 48.631 48.632zm130.926 355.386c-26.858 0-48.631-21.773-48.631-48.631 0-26.859 21.773-48.632 48.631-48.632 26.859 0 48.632 21.773 48.632 48.632 0 26.858-21.773 48.631-48.632 48.631zm-411.498-48.631c0 26.858 21.773 48.631 48.632 48.631 26.858 0 48.631-21.773 48.631-48.631 0-26.859-21.773-48.632-48.631-48.632-26.859 0-48.632 21.773-48.632 48.632zm231.935-44.897c-39.255 0-71.077-31.822-71.077-71.077 0-39.254 31.822-71.077 71.077-71.077 39.255 0 71.077 31.823 71.077 71.077 0 39.255-31.822 71.077-71.077 71.077zm310.488 136.265c0 17.416 14.118 31.534 31.534 31.534 17.415 0 31.534-14.118 31.534-31.534 0-17.415-14.119-31.534-31.534-31.534-17.416 0-31.534 14.119-31.534 31.534zm-684.565 0c0 17.416 14.119 31.534 31.534 31.534 17.416 0 31.534-14.118 31.534-31.534 0-17.415-14.118-31.534-31.534-31.534-17.415 0-31.534 14.119-31.534 31.534z" fill="#fff"/><foreignObject x="118" y="252.842" width="787.643" height="679.157"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(10px);clip-path:url(#b);height:100%;width:100%"/></foreignObject><path data-figma-bg-blur-radius="20" fill-rule="evenodd" clip-rule="evenodd" d="M541.484 880.466c0-17.416-14.119-31.534-31.534-31.534-17.416 0-31.534 14.118-31.534 31.534 0 17.415 14.118 31.534 31.534 31.534 17.415 0 31.534-14.119 31.534-31.534zm-340.416-576.09c0-17.415-14.118-31.534-31.534-31.534-17.416 0-31.534 14.119-31.534 31.534 0 17.416 14.118 31.534 31.534 31.534 17.416 0 31.534-14.118 31.534-31.534zm653.041-31.534c17.416 0 31.534 14.119 31.534 31.534 0 17.416-14.118 31.534-31.534 31.534-17.416 0-31.534-14.118-31.534-31.534 0-17.415 14.118-31.534 31.534-31.534zm-473.483 122.92c0-26.858-21.773-48.631-48.631-48.631-26.859 0-48.632 21.773-48.632 48.631 0 26.859 21.773 48.632 48.632 48.632 26.858 0 48.631-21.773 48.631-48.632zm314.236-48.631c26.858 0 48.631 21.773 48.631 48.631 0 26.859-21.773 48.632-48.631 48.632-26.859 0-48.632-21.773-48.632-48.632 0-26.858 21.773-48.631 48.632-48.631zm-182.77 438.221c26.858 0 48.631-21.774 48.631-48.632 0-26.858-21.773-48.631-48.631-48.631-26.859 0-48.632 21.773-48.632 48.631s21.773 48.632 48.632 48.632z" fill="#fff" fill-opacity=".56"/><defs><linearGradient id="a" x1="956" y1="962" x2="70" y2="65.5" gradientUnits="userSpaceOnUse"><stop stop-color="#060E13"/><stop offset="1" stop-color="#313434"/></linearGradient><clipPath id="b" transform="translate(-118 -252.842)"><path fill-rule="evenodd" clip-rule="evenodd" d="M541.484 880.466c0-17.416-14.119-31.534-31.534-31.534-17.416 0-31.534 14.118-31.534 31.534 0 17.415 14.118 31.534 31.534 31.534 17.415 0 31.534-14.119 31.534-31.534zm-340.416-576.09c0-17.415-14.118-31.534-31.534-31.534-17.416 0-31.534 14.119-31.534 31.534 0 17.416 14.118 31.534 31.534 31.534 17.416 0 31.534-14.118 31.534-31.534zm653.041-31.534c17.416 0 31.534 14.119 31.534 31.534 0 17.416-14.118 31.534-31.534 31.534-17.416 0-31.534-14.118-31.534-31.534 0-17.415 14.118-31.534 31.534-31.534zm-473.483 122.92c0-26.858-21.773-48.631-48.631-48.631-26.859 0-48.632 21.773-48.632 48.631 0 26.859 21.773 48.632 48.632 48.632 26.858 0 48.631-21.773 48.631-48.632zm314.236-48.631c26.858 0 48.631 21.773 48.631 48.631 0 26.859-21.773 48.632-48.631 48.632-26.859 0-48.632-21.773-48.632-48.632 0-26.858 21.773-48.631 48.632-48.631zm-182.77 438.221c26.858 0 48.631-21.774 48.631-48.632 0-26.858-21.773-48.631-48.631-48.631-26.859 0-48.632 21.773-48.632 48.631s21.773 48.632 48.632 48.632z"/></clipPath></defs></svg>

package/src/NavMenu/images/blocklet-framework.svg

@@ -1 +0,0 @@
-<svg width="68" height="68" viewBox="0 0 68 68" fill="none" xmlns="http://www.w3.org/2000/svg"><mask id="c" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="4" y="3" width="59" height="62"><path d="M33.974 4.067 33.858 4l-.117.067-17.174 9.916-.117.068v13.187L5.117 33.78 5 33.848V53.95l.117.067 17.174 9.916.117.067.117-.067 11.303-6.527.03.017.03-.017 11.303 6.527.117.067.116-.067L62.6 54.017l.117-.068v-20.1l-.117-.067-11.333-6.543V14.05l-.117-.068-17.175-9.916zm15.037 11.286V25.97l-15.037-8.681-.116-.068-.117.067-15.036 8.682V15.353l15.153-8.749 15.153 8.749zm-3.703 46.043-9.166-5.292L51.15 47.44l.117-.067V29.842l9.195 5.309v17.496l-15.153 8.749zM16.566 47.44l15.007 8.664-9.165 5.292-15.153-8.749V35.151l9.195-5.309v17.531l.116.067zM32.73 35.37l-12.897-7.447 12.897-7.447V35.37zm-14.025 9.399V29.876l12.898 7.446-12.898 7.447zm16.28 9.4V39.274l12.898 7.447-12.898 7.446zm14.026-24.293v14.893l-12.898-7.447 12.898-7.446zm-16.28 9.4v14.892l-12.898-7.446 12.897-7.447zm2.254-3.907V20.476l12.898 7.447-12.898 7.446z" fill="url(#a)" stroke="url(#b)" stroke-width=".5"/></mask><g mask="url(#c)"><path d="M68 0H0v68h68V0z" fill="url(#d)"/></g><defs><linearGradient id="a" x1="36.103" y1="-30.336" x2="-29.543" y2="21.525" gradientUnits="userSpaceOnUse"><stop stop-color="#4EF1BA"/><stop offset=".502" stop-color="#16CED1"/><stop offset="1" stop-color="#3773F2"/></linearGradient><linearGradient id="b" x1="37.6" y1="-67.429" x2="-62.714" y2="20.675" gradientUnits="userSpaceOnUse"><stop stop-color="#4EF1BA"/><stop offset=".502" stop-color="#16CED1"/><stop offset="1" stop-color="#3773F2"/></linearGradient><linearGradient id="d" x1="38.445" y1="-81.994" x2="-76.754" y2="23.094" gradientUnits="userSpaceOnUse"><stop stop-color="#4EF1BA"/><stop offset=".502" stop-color="#16CED1"/><stop offset="1" stop-color="#3773F2"/></linearGradient></defs></svg>

package/src/NavMenu/images/blocklet-launcher.svg

@@ -1 +0,0 @@
-<svg width="40" height="39" viewBox="0 0 40 39" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="m10.247 20.67-3.824-1.655c-.548-.22-.87-.62-.966-1.2-.096-.58.061-1.076.472-1.49l5.182-5.214a3.29 3.29 0 0 1 1.357-.828 3.156 3.156 0 0 1 1.604-.083l2.138.455c-1.453 1.739-2.611 3.318-3.475 4.74-.863 1.42-1.693 3.179-2.488 5.276zm24.18-16.14c.219 0 .438.055.658.166a2.174 2.174 0 0 1 .987.993c.11.22.164.441.164.662.11 2.566-.432 5.229-1.624 7.988-1.193 2.759-2.872 5.228-5.038 7.408-1.48 1.49-2.905 2.683-4.276 3.58-1.37.897-2.988 1.745-4.853 2.545-.356.138-.72.207-1.09.207-.37 0-.692-.138-.966-.414l-5.14-5.173a1.336 1.336 0 0 1-.411-.973c0-.372.068-.738.206-1.096.795-1.849 1.637-3.47 2.528-4.863.892-1.394 2.077-2.835 3.558-4.325 2.165-2.18 4.619-3.87 7.36-5.07 2.742-1.2 5.387-1.745 7.937-1.635zM23.982 16.863c.63.635 1.405.952 2.323.952.919 0 1.693-.317 2.324-.952.63-.634.945-1.414.945-2.338 0-.924-.315-1.704-.945-2.338-.63-.635-1.405-.952-2.324-.952-.918 0-1.693.317-2.323.952-.63.634-.946 1.414-.946 2.338 0 .924.315 1.704.946 2.338zm-3.783 13.824c2.083-.8 3.838-1.635 5.263-2.504 1.426-.87 3.002-2.035 4.73-3.497l.41 2.152c.11.552.083 1.096-.082 1.634-.164.538-.438 1-.822 1.387l-5.182 5.215c-.41.413-.904.565-1.48.455-.576-.11-.973-.442-1.193-.993l-1.644-3.85zm-13.365-3.56c.955-.965 2.121-1.455 3.499-1.469 1.378-.014 2.544.462 3.499 1.428.955.966 1.432 2.138 1.432 3.518s-.48 2.552-1.44 3.518c-.685.69-1.83 1.283-3.433 1.78-1.604.496-3.817.938-6.641 1.324.384-2.842.822-5.065 1.316-6.667.493-1.603 1.083-2.747 1.768-3.432z" fill="url(#a)"/><defs><linearGradient id="a" x1="34.187" y1="7.487" x2="7.292" y2="34.082" gradientUnits="userSpaceOnUse"><stop stop-color="#74D5D6"/><stop offset="1" stop-color="#56AFBE"/></linearGradient></defs></svg>

package/src/NavMenu/images/blocklet-server.svg

@@ -1 +0,0 @@
-<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#a)"><mask id="b" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="40" height="40"><path d="M40 0H0v40h40V0z" fill="#D9D9D9"/></mask><g mask="url(#b)"><path d="M11.917 8.278c-.733 0-1.356.256-1.87.77a2.545 2.545 0 0 0-.77 1.869c0 .733.257 1.356.77 1.869.514.513 1.137.77 1.87.77.733 0 1.356-.257 1.869-.77.513-.513.77-1.136.77-1.87 0-.732-.257-1.355-.77-1.869a2.545 2.545 0 0 0-1.87-.77zm0 17.592c-.733 0-1.356.257-1.87.77a2.545 2.545 0 0 0-.77 1.87c0 .732.257 1.355.77 1.868.514.514 1.137.77 1.87.77.733 0 1.356-.256 1.869-.77.513-.513.77-1.136.77-1.869 0-.733-.257-1.356-.77-1.869a2.545 2.545 0 0 0-1.87-.77zM5.759 3h28.148c.499 0 .917.169 1.254.506.337.337.506.755.506 1.253v12.315c0 .498-.169.916-.506 1.254a1.703 1.703 0 0 1-1.254.505H5.76c-.498 0-.916-.168-1.253-.505A1.703 1.703 0 0 1 4 17.074V4.76c0-.498.169-.916.506-1.253A1.702 1.702 0 0 1 5.759 3zm0 17.593h28.148c.499 0 .917.168 1.254.505.337.338.506.756.506 1.254v12.315c0 .498-.169.916-.506 1.253a1.702 1.702 0 0 1-1.254.506H5.76c-.498 0-.916-.169-1.253-.506A1.702 1.702 0 0 1 4 34.667V22.352c0-.498.169-.916.506-1.254a1.702 1.702 0 0 1 1.253-.505z" fill="url(#c)"/></g></g><defs><linearGradient id="c" x1="4" y1="19.713" x2="35.667" y2="19.713" gradientUnits="userSpaceOnUse"><stop stop-color="#2FD99C"/><stop offset="1" stop-color="#8CE598"/></linearGradient><clipPath id="a"><path fill="#fff" d="M0 0h40v40H0z"/></clipPath></defs></svg>