@lobehub/ui 5.48.1 → 5.49.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/Highlighter/FullFeatured.mjs +1 -1
- package/es/Highlighter/FullFeatured.mjs.map +1 -1
- package/es/Highlighter/LangSelect.mjs +1 -1
- package/es/Highlighter/LangSelect.mjs.map +1 -1
- package/es/Highlighter/style.mjs +14 -11
- package/es/Highlighter/style.mjs.map +1 -1
- package/es/Mermaid/FullFeatured.mjs +1 -1
- package/es/Mermaid/FullFeatured.mjs.map +1 -1
- package/es/ThemeProvider/ThemeProvider.mjs +2 -2
- package/es/ThemeProvider/ThemeProvider.mjs.map +1 -1
- package/es/awesome/AgentSkillCard/AgentSkillCard.d.mts +6 -0
- package/es/awesome/AgentSkillCard/AgentSkillCard.mjs +83 -0
- package/es/awesome/AgentSkillCard/AgentSkillCard.mjs.map +1 -0
- package/es/awesome/AgentSkillCard/agents.d.mts +6 -0
- package/es/awesome/AgentSkillCard/agents.mjs +40 -0
- package/es/awesome/AgentSkillCard/agents.mjs.map +1 -0
- package/es/awesome/AgentSkillCard/index.d.mts +4 -0
- package/es/awesome/AgentSkillCard/style.mjs +85 -0
- package/es/awesome/AgentSkillCard/style.mjs.map +1 -0
- package/es/awesome/AgentSkillCard/type.d.mts +41 -0
- package/es/awesome/BentoGrid/BentoCard.d.mts +6 -0
- package/es/awesome/BentoGrid/BentoCard.mjs +39 -0
- package/es/awesome/BentoGrid/BentoCard.mjs.map +1 -0
- package/es/awesome/BentoGrid/BentoGrid.d.mts +6 -0
- package/es/awesome/BentoGrid/BentoGrid.mjs +20 -0
- package/es/awesome/BentoGrid/BentoGrid.mjs.map +1 -0
- package/es/awesome/BentoGrid/index.d.mts +4 -0
- package/es/awesome/BentoGrid/style.mjs +102 -0
- package/es/awesome/BentoGrid/style.mjs.map +1 -0
- package/es/awesome/BentoGrid/type.d.mts +40 -0
- package/es/awesome/CodeShowcase/CodeShowcase.d.mts +6 -0
- package/es/awesome/CodeShowcase/CodeShowcase.mjs +51 -0
- package/es/awesome/CodeShowcase/CodeShowcase.mjs.map +1 -0
- package/es/awesome/CodeShowcase/index.d.mts +3 -0
- package/es/awesome/CodeShowcase/style.mjs +50 -0
- package/es/awesome/CodeShowcase/style.mjs.map +1 -0
- package/es/awesome/CodeShowcase/type.d.mts +27 -0
- package/es/awesome/FeatureGrid/FeatureGrid.d.mts +6 -0
- package/es/awesome/FeatureGrid/FeatureGrid.mjs +48 -0
- package/es/awesome/FeatureGrid/FeatureGrid.mjs.map +1 -0
- package/es/awesome/FeatureGrid/index.d.mts +3 -0
- package/es/awesome/FeatureGrid/style.mjs +75 -0
- package/es/awesome/FeatureGrid/style.mjs.map +1 -0
- package/es/awesome/FeatureGrid/type.d.mts +25 -0
- package/es/awesome/FluidGradient/FluidGradient.d.mts +6 -0
- package/es/awesome/FluidGradient/FluidGradient.mjs +293 -0
- package/es/awesome/FluidGradient/FluidGradient.mjs.map +1 -0
- package/es/awesome/FluidGradient/index.d.mts +3 -0
- package/es/awesome/FluidGradient/style.mjs +52 -0
- package/es/awesome/FluidGradient/style.mjs.map +1 -0
- package/es/awesome/FluidGradient/type.d.mts +22 -0
- package/es/awesome/InstallBanner/InstallBanner.d.mts +6 -0
- package/es/awesome/InstallBanner/InstallBanner.mjs +35 -0
- package/es/awesome/InstallBanner/InstallBanner.mjs.map +1 -0
- package/es/awesome/InstallBanner/index.d.mts +3 -0
- package/es/awesome/InstallBanner/style.mjs +46 -0
- package/es/awesome/InstallBanner/style.mjs.map +1 -0
- package/es/awesome/InstallBanner/type.d.mts +18 -0
- package/es/awesome/LandingHero/LandingHero.d.mts +6 -0
- package/es/awesome/LandingHero/LandingHero.mjs +55 -0
- package/es/awesome/LandingHero/LandingHero.mjs.map +1 -0
- package/es/awesome/LandingHero/index.d.mts +3 -0
- package/es/awesome/LandingHero/style.mjs +155 -0
- package/es/awesome/LandingHero/style.mjs.map +1 -0
- package/es/awesome/LandingHero/type.d.mts +29 -0
- package/es/awesome/LandingSection/LandingSection.d.mts +6 -0
- package/es/awesome/LandingSection/LandingSection.mjs +61 -0
- package/es/awesome/LandingSection/LandingSection.mjs.map +1 -0
- package/es/awesome/LandingSection/index.d.mts +3 -0
- package/es/awesome/LandingSection/style.mjs +88 -0
- package/es/awesome/LandingSection/style.mjs.map +1 -0
- package/es/awesome/LandingSection/type.d.mts +40 -0
- package/es/awesome/LogoMarquee/LogoMarquee.d.mts +6 -0
- package/es/awesome/LogoMarquee/LogoMarquee.mjs +52 -0
- package/es/awesome/LogoMarquee/LogoMarquee.mjs.map +1 -0
- package/es/awesome/LogoMarquee/index.d.mts +3 -0
- package/es/awesome/LogoMarquee/style.mjs +70 -0
- package/es/awesome/LogoMarquee/style.mjs.map +1 -0
- package/es/awesome/LogoMarquee/type.d.mts +40 -0
- package/es/awesome/index.d.mts +33 -1
- package/es/awesome/index.mjs +13 -1
- package/es/awesome/landingActions.d.mts +20 -0
- package/es/awesome/landingActions.mjs +123 -0
- package/es/awesome/landingActions.mjs.map +1 -0
- package/es/awesome/landingIcon.mjs +13 -0
- package/es/awesome/landingIcon.mjs.map +1 -0
- package/es/awesome/landingLink.d.mts +12 -0
- package/es/awesome/landingLink.mjs +23 -0
- package/es/awesome/landingLink.mjs.map +1 -0
- package/es/awesome/landingTokens.d.mts +10 -0
- package/es/awesome/landingTokens.mjs +19 -0
- package/es/awesome/landingTokens.mjs.map +1 -0
- package/es/base-ui/Avatar/Avatar.mjs +1 -1
- package/es/base-ui/Avatar/Avatar.mjs.map +1 -1
- package/es/base-ui/Segmented/atoms.mjs +1 -0
- package/es/base-ui/Segmented/atoms.mjs.map +1 -1
- package/es/base-ui/Segmented/style.mjs +127 -125
- package/es/base-ui/Segmented/style.mjs.map +1 -1
- package/es/base-ui/Text/style.d.mts +1 -1
- package/es/base-ui/index.mjs +4 -4
- package/es/dashboard/AuthLayout/AuthLayout.d.mts +9 -0
- package/es/dashboard/AuthLayout/AuthLayout.mjs +54 -0
- package/es/dashboard/AuthLayout/AuthLayout.mjs.map +1 -0
- package/es/dashboard/AuthLayout/index.d.mts +3 -0
- package/es/dashboard/AuthLayout/style.mjs +120 -0
- package/es/dashboard/AuthLayout/style.mjs.map +1 -0
- package/es/dashboard/AuthLayout/type.d.mts +16 -0
- package/es/dashboard/Breadcrumb/Breadcrumb.d.mts +9 -0
- package/es/dashboard/Breadcrumb/Breadcrumb.mjs +55 -0
- package/es/dashboard/Breadcrumb/Breadcrumb.mjs.map +1 -0
- package/es/dashboard/Breadcrumb/index.d.mts +3 -0
- package/es/dashboard/Breadcrumb/style.mjs +66 -0
- package/es/dashboard/Breadcrumb/style.mjs.map +1 -0
- package/es/dashboard/Breadcrumb/type.d.mts +25 -0
- package/es/dashboard/ConsoleNav/ConsoleNav.d.mts +9 -0
- package/es/dashboard/ConsoleNav/ConsoleNav.mjs +275 -0
- package/es/dashboard/ConsoleNav/ConsoleNav.mjs.map +1 -0
- package/es/dashboard/ConsoleNav/active.d.mts +7 -0
- package/es/dashboard/ConsoleNav/active.mjs +29 -0
- package/es/dashboard/ConsoleNav/active.mjs.map +1 -0
- package/es/dashboard/ConsoleNav/index.d.mts +4 -0
- package/es/dashboard/ConsoleNav/style.mjs +283 -0
- package/es/dashboard/ConsoleNav/style.mjs.map +1 -0
- package/es/dashboard/ConsoleNav/type.d.mts +71 -0
- package/es/dashboard/ConsoleShell/ConsoleBrand.d.mts +9 -0
- package/es/dashboard/ConsoleShell/ConsoleBrand.mjs +37 -0
- package/es/dashboard/ConsoleShell/ConsoleBrand.mjs.map +1 -0
- package/es/dashboard/ConsoleShell/ConsoleShell.d.mts +9 -0
- package/es/dashboard/ConsoleShell/ConsoleShell.mjs +149 -0
- package/es/dashboard/ConsoleShell/ConsoleShell.mjs.map +1 -0
- package/es/dashboard/ConsoleShell/context.d.mts +6 -0
- package/es/dashboard/ConsoleShell/context.mjs +16 -0
- package/es/dashboard/ConsoleShell/context.mjs.map +1 -0
- package/es/dashboard/ConsoleShell/index.d.mts +5 -0
- package/es/dashboard/ConsoleShell/style.mjs +209 -0
- package/es/dashboard/ConsoleShell/style.mjs.map +1 -0
- package/es/dashboard/ConsoleShell/type.d.mts +67 -0
- package/es/dashboard/FilterSidebar/FilterSidebar.d.mts +17 -0
- package/es/dashboard/FilterSidebar/FilterSidebar.mjs +151 -0
- package/es/dashboard/FilterSidebar/FilterSidebar.mjs.map +1 -0
- package/es/dashboard/FilterSidebar/context.d.mts +7 -0
- package/es/dashboard/FilterSidebar/context.mjs +19 -0
- package/es/dashboard/FilterSidebar/context.mjs.map +1 -0
- package/es/dashboard/FilterSidebar/index.d.mts +4 -0
- package/es/dashboard/FilterSidebar/style.mjs +155 -0
- package/es/dashboard/FilterSidebar/style.mjs.map +1 -0
- package/es/dashboard/FilterSidebar/type.d.mts +44 -0
- package/es/dashboard/FilterSidebar/width.mjs +18 -0
- package/es/dashboard/FilterSidebar/width.mjs.map +1 -0
- package/es/dashboard/PageHeader/PageHeader.d.mts +9 -0
- package/es/dashboard/PageHeader/PageHeader.mjs +37 -0
- package/es/dashboard/PageHeader/PageHeader.mjs.map +1 -0
- package/es/dashboard/PageHeader/index.d.mts +3 -0
- package/es/dashboard/PageHeader/style.mjs +47 -0
- package/es/dashboard/PageHeader/style.mjs.map +1 -0
- package/es/dashboard/PageHeader/type.d.mts +14 -0
- package/es/dashboard/PageSkeleton/PageSkeleton.d.mts +25 -0
- package/es/dashboard/PageSkeleton/PageSkeleton.mjs +136 -0
- package/es/dashboard/PageSkeleton/PageSkeleton.mjs.map +1 -0
- package/es/dashboard/PageSkeleton/style.mjs +122 -0
- package/es/dashboard/PageSkeleton/style.mjs.map +1 -0
- package/es/dashboard/PageSkeleton/type.d.mts +22 -0
- package/es/dashboard/PageTabs/PageTabs.d.mts +9 -0
- package/es/dashboard/PageTabs/PageTabs.mjs +37 -0
- package/es/dashboard/PageTabs/PageTabs.mjs.map +1 -0
- package/es/dashboard/PageTabs/index.d.mts +3 -0
- package/es/dashboard/PageTabs/style.mjs +57 -0
- package/es/dashboard/PageTabs/style.mjs.map +1 -0
- package/es/dashboard/PageTabs/type.d.mts +17 -0
- package/es/dashboard/RouteProgress/RouteProgress.d.mts +9 -0
- package/es/dashboard/RouteProgress/RouteProgress.mjs +44 -0
- package/es/dashboard/RouteProgress/RouteProgress.mjs.map +1 -0
- package/es/dashboard/RouteProgress/style.mjs +19 -0
- package/es/dashboard/RouteProgress/style.mjs.map +1 -0
- package/es/dashboard/RouteProgress/type.d.mts +8 -0
- package/es/dashboard/StatCard/StatCard.d.mts +9 -0
- package/es/dashboard/StatCard/StatCard.mjs +84 -0
- package/es/dashboard/StatCard/StatCard.mjs.map +1 -0
- package/es/dashboard/StatCard/index.d.mts +3 -0
- package/es/dashboard/StatCard/style.mjs +135 -0
- package/es/dashboard/StatCard/style.mjs.map +1 -0
- package/es/dashboard/StatCard/type.d.mts +26 -0
- package/es/dashboard/Surface/Surface.d.mts +13 -0
- package/es/dashboard/Surface/Surface.mjs +20 -0
- package/es/dashboard/Surface/Surface.mjs.map +1 -0
- package/es/dashboard/Surface/index.d.mts +4 -0
- package/es/dashboard/Surface/style.d.mts +14 -0
- package/es/dashboard/Surface/style.mjs +22 -0
- package/es/dashboard/Surface/style.mjs.map +1 -0
- package/es/dashboard/Surface/type.d.mts +8 -0
- package/es/dashboard/hooks.mjs +49 -0
- package/es/dashboard/hooks.mjs.map +1 -0
- package/es/dashboard/index.d.mts +37 -0
- package/es/dashboard/index.d.ts +1 -0
- package/es/dashboard/index.js +1 -0
- package/es/dashboard/index.mjs +17 -0
- package/es/static-css/registry.mjs +2 -2
- package/es/static-css/registry.mjs.map +1 -1
- package/es/storybook/StoryBook/index.mjs +4 -0
- package/es/storybook/StoryBook/index.mjs.map +1 -1
- package/es/storybook/StoryBook/style.mjs +7 -2
- package/es/storybook/StoryBook/style.mjs.map +1 -1
- package/es/styles/theme/token/base.mjs +2 -2
- package/es/styles/theme/token/base.mjs.map +1 -1
- package/package.json +6 -2
|
@@ -22,7 +22,7 @@ const HeaderLanguage = memo(({ allowChangeLanguage, displayName, fileName, filet
|
|
|
22
22
|
return /* @__PURE__ */ jsxs(FlexBasic_default, {
|
|
23
23
|
horizontal: true,
|
|
24
24
|
align: "center",
|
|
25
|
-
className: "
|
|
25
|
+
className: "language-title",
|
|
26
26
|
flex: 1,
|
|
27
27
|
gap: 4,
|
|
28
28
|
justify: "flex-start",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FullFeatured.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName, getCodeLanguageFilename } from '@/Highlighter/const';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport LangSelect from './LangSelect';\nimport { bodyVariants, headerVariants, variants } from './style';\nimport { type HighlighterProps } from './type';\n\ninterface HeaderLanguageProps {\n allowChangeLanguage: boolean;\n displayName: string;\n fileName?: string;\n filetype: string;\n icon?: ReactNode;\n language: string;\n setLanguage?: (language: string) => void;\n showLanguage?: boolean;\n}\n\nconst HeaderLanguage = memo<HeaderLanguageProps>(\n ({\n allowChangeLanguage,\n displayName,\n fileName,\n filetype,\n icon,\n language,\n setLanguage,\n showLanguage,\n }) => {\n if (!showLanguage) return null;\n\n if (allowChangeLanguage && !fileName)\n return <LangSelect value={language.toLowerCase()} onSelect={setLanguage} />;\n\n return (\n <Flexbox\n horizontal\n align={'center'}\n className={'
|
|
1
|
+
{"version":3,"file":"FullFeatured.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { getCodeLanguageDisplayName, getCodeLanguageFilename } from '@/Highlighter/const';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport LangSelect from './LangSelect';\nimport { bodyVariants, headerVariants, variants } from './style';\nimport { type HighlighterProps } from './type';\n\ninterface HeaderLanguageProps {\n allowChangeLanguage: boolean;\n displayName: string;\n fileName?: string;\n filetype: string;\n icon?: ReactNode;\n language: string;\n setLanguage?: (language: string) => void;\n showLanguage?: boolean;\n}\n\nconst HeaderLanguage = memo<HeaderLanguageProps>(\n ({\n allowChangeLanguage,\n displayName,\n fileName,\n filetype,\n icon,\n language,\n setLanguage,\n showLanguage,\n }) => {\n if (!showLanguage) return null;\n\n if (allowChangeLanguage && !fileName)\n return <LangSelect value={language.toLowerCase()} onSelect={setLanguage} />;\n\n return (\n <Flexbox\n horizontal\n align={'center'}\n className={'language-title'}\n flex={1}\n gap={4}\n justify={'flex-start'}\n paddingInline={8}\n >\n {icon || (\n <MaterialFileTypeIcon\n fallbackUnknownType={false}\n filename={filetype}\n size={18}\n type={'file'}\n variant={'raw'}\n />\n )}\n <Text ellipsis fontSize={13}>\n {displayName}\n </Text>\n </Flexbox>\n );\n },\n (prev, next) =>\n prev.allowChangeLanguage === next.allowChangeLanguage &&\n prev.displayName === next.displayName &&\n prev.fileName === next.fileName &&\n prev.filetype === next.filetype &&\n prev.icon === next.icon &&\n prev.language === next.language &&\n prev.setLanguage === next.setLanguage &&\n prev.showLanguage === next.showLanguage,\n);\n\ninterface HighlighterFullFeaturedProps extends Omit<\n HighlighterProps,\n 'children' | 'bodyRender' | 'enableTransformer'\n> {\n content: string;\n setLanguage?: (language: string) => void;\n}\n\nexport const HighlighterFullFeatured = memo<HighlighterFullFeaturedProps & { children: ReactNode }>(\n ({\n content,\n language,\n setLanguage,\n showLanguage,\n className,\n classNames,\n styles: customStyles,\n style,\n allowChangeLanguage = false,\n fileName,\n icon,\n actionsRender,\n copyable,\n variant,\n shadow,\n wrap,\n defaultExpand = true,\n children,\n ...rest\n }) => {\n const [expand, setExpand] = useState(defaultExpand);\n const contentRef = useRef(content);\n\n useEffect(() => {\n contentRef.current = content;\n }, [content]);\n\n const getContent = useCallback(() => contentRef.current, []);\n\n const originalActions = useMemo(() => {\n if (!copyable) return null;\n return <CopyButton content={getContent} size={'small'} />;\n }, [copyable, getContent]);\n\n const actions = useMemo(() => {\n if (!actionsRender) return originalActions;\n return actionsRender({\n actionIconSize: 'small',\n content,\n getContent,\n language,\n originalNode: originalActions,\n });\n }, [actionsRender, content, getContent, language, originalActions]);\n\n const displayName = useMemo(() => {\n if (fileName) return fileName;\n return getCodeLanguageDisplayName(language);\n }, [fileName, language]);\n\n const filetype = useMemo(() => {\n if (fileName) return fileName;\n return getCodeLanguageFilename(language);\n }, [fileName, language]);\n\n const handleToggleExpand = useCallback(() => {\n setExpand((prev) => !prev);\n }, []);\n\n return (\n <Flexbox\n className={cx(variants({ shadow, variant, wrap }), className)}\n data-code-type=\"highlighter\"\n style={style}\n {...rest}\n >\n <Flexbox\n horizontal\n align={'center'}\n className={cx(headerVariants({ variant }), classNames?.header)}\n justify={'space-between'}\n style={customStyles?.header}\n onClick={handleToggleExpand}\n >\n <HeaderLanguage\n allowChangeLanguage={allowChangeLanguage}\n displayName={displayName}\n fileName={fileName}\n filetype={filetype}\n icon={icon}\n language={language}\n setLanguage={setLanguage}\n showLanguage={showLanguage}\n />\n <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\n <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\n {actions}\n </Flexbox>\n <ActionIcon\n icon={expand ? ChevronDown : ChevronRight}\n size={'small'}\n onClick={handleToggleExpand}\n />\n </Flexbox>\n </Flexbox>\n <Flexbox\n className={cx(bodyVariants({ expand }), classNames?.body)}\n style={customStyles?.body}\n >\n {children}\n </Flexbox>\n </Flexbox>\n );\n },\n);\n\nexport default HighlighterFullFeatured;\n"],"mappings":";;;;;;;;;;;;;;;AA6BA,MAAM,iBAAiB,MACpB,EACC,qBACA,aACA,UACA,UACA,MACA,UACA,aACA,mBACI;CACJ,IAAI,CAAC,cAAc,OAAO;CAE1B,IAAI,uBAAuB,CAAC,UAC1B,OAAO,oBAAC,YAAD;EAAY,OAAO,SAAS,YAAY;EAAG,UAAU;CAAc,CAAA;CAE5E,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW;EACX,MAAM;EACN,KAAK;EACL,SAAS;EACT,eAAe;EAPjB,UAAA,CASG,QACC,oBAAC,sBAAD;GACE,qBAAqB;GACrB,UAAU;GACV,MAAM;GACN,MAAM;GACN,SAAS;EACV,CAAA,GAEH,oBAAC,MAAD;GAAM,UAAA;GAAS,UAAU;GACtB,UAAA;EACG,CAAA,CACC;;AAEb,IACC,MAAM,SACL,KAAK,wBAAwB,KAAK,uBAClC,KAAK,gBAAgB,KAAK,eAC1B,KAAK,aAAa,KAAK,YACvB,KAAK,aAAa,KAAK,YACvB,KAAK,SAAS,KAAK,QACnB,KAAK,aAAa,KAAK,YACvB,KAAK,gBAAgB,KAAK,eAC1B,KAAK,iBAAiB,KAAK,YAC/B;AAUA,MAAa,0BAA0B,MACpC,EACC,SACA,UACA,aACA,cACA,WACA,YACA,QAAQ,cACR,OACA,sBAAsB,OACtB,UACA,MACA,eACA,UACA,SACA,QACA,MACA,gBAAgB,MAChB,UACA,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,aAAa;CAClD,MAAM,aAAa,OAAO,OAAO;CAEjC,gBAAgB;EACd,WAAW,UAAU;CACvB,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,aAAa,kBAAkB,WAAW,SAAS,CAAC,CAAC;CAE3D,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,UAAU,OAAO;EACtB,OAAO,oBAAC,YAAD;GAAY,SAAS;GAAY,MAAM;EAAU,CAAA;CAC1D,GAAG,CAAC,UAAU,UAAU,CAAC;CAEzB,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB,gBAAgB;GAChB;GACA;GACA;GACA,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAe;EAAS;EAAY;EAAU;CAAe,CAAC;CAElE,MAAM,cAAc,cAAc;EAChC,IAAI,UAAU,OAAO;EACrB,OAAO,2BAA2B,QAAQ;CAC5C,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,WAAW,cAAc;EAC7B,IAAI,UAAU,OAAO;EACrB,OAAO,wBAAwB,QAAQ;CACzC,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,qBAAqB,kBAAkB;EAC3C,WAAW,SAAS,CAAC,IAAI;CAC3B,GAAG,CAAC,CAAC;CAEL,OACE,qBAACA,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAS;EAAK,CAAC,GAAG,SAAS;EAC5D,kBAAe;EACR;EACP,GAAI;EAJN,UAAA,CAME,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,GAAG,YAAY,MAAM;GAC7D,SAAS;GACT,OAAO,cAAc;GACrB,SAAS;GANX,UAAA,CAQE,oBAAC,gBAAD;IACuB;IACR;IACH;IACA;IACJ;IACI;IACG;IACC;GACf,CAAA,GACD,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,MAAM;IAAQ,KAAK;IAAG,SAAS;IAApE,UAAA,CACE,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,WAAW;KAAiB,MAAM;KAAQ,KAAK;KACjF,UAAA;IACM,CAAA,GACT,oBAAC,YAAD;KACE,MAAM,SAAS,cAAc;KAC7B,MAAM;KACN,SAAS;IACV,CAAA,CACM;GACF,CAAA,CAAA;EACT,CAAA,GAAA,oBAACA,mBAAD;GACE,WAAW,GAAG,aAAa,EAAE,OAAO,CAAC,GAAG,YAAY,IAAI;GACxD,OAAO,cAAc;GAEpB;EACM,CAAA,CACF;;AAEb,CACF"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LangSelect.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/LangSelect.tsx"],"sourcesContent":["'use client';\n\nimport { Select, type SelectProps } from 'antd';\nimport { memo, useMemo } from 'react';\nimport { bundledLanguagesInfo } from 'shiki';\n\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nexport const LangSelect = memo<Omit<SelectProps, 'options'>>(({ ...rest }) => {\n const options = useMemo(\n () => [\n {\n aliases: ['text', 'txt'],\n label: (\n <Flexbox horizontal align={'center'} gap={4}>\n <MaterialFileTypeIcon\n fallbackUnknownType={false}\n filename={`*.txt`}\n size={18}\n type={'file'}\n variant={'raw'}\n />\n <Text ellipsis fontSize={13}>\n Plaintext\n </Text>\n </Flexbox>\n ),\n value: 'plaintext',\n },\n ...bundledLanguagesInfo.map((item) => ({\n aliases: item.aliases,\n label: (\n <Flexbox horizontal align={'center'} gap={4}>\n <MaterialFileTypeIcon\n fallbackUnknownType={false}\n filename={`*.${item?.aliases?.[0] || item.id}`}\n size={18}\n type={'file'}\n variant={'raw'}\n />\n <Text ellipsis fontSize={13}>\n {item.name}\n </Text>\n </Flexbox>\n ),\n title: (item.aliases || [item.id])\n .filter(Boolean)\n .map((item) => `*.${item}`)\n .join(','),\n value: item.id,\n })),\n ],\n [],\n );\n\n return (\n <Select\n showSearch\n className={'
|
|
1
|
+
{"version":3,"file":"LangSelect.mjs","names":["Flexbox"],"sources":["../../src/Highlighter/LangSelect.tsx"],"sourcesContent":["'use client';\n\nimport { Select, type SelectProps } from 'antd';\nimport { memo, useMemo } from 'react';\nimport { bundledLanguagesInfo } from 'shiki';\n\nimport { Flexbox } from '@/Flex';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nexport const LangSelect = memo<Omit<SelectProps, 'options'>>(({ ...rest }) => {\n const options = useMemo(\n () => [\n {\n aliases: ['text', 'txt'],\n label: (\n <Flexbox horizontal align={'center'} gap={4}>\n <MaterialFileTypeIcon\n fallbackUnknownType={false}\n filename={`*.txt`}\n size={18}\n type={'file'}\n variant={'raw'}\n />\n <Text ellipsis fontSize={13}>\n Plaintext\n </Text>\n </Flexbox>\n ),\n value: 'plaintext',\n },\n ...bundledLanguagesInfo.map((item) => ({\n aliases: item.aliases,\n label: (\n <Flexbox horizontal align={'center'} gap={4}>\n <MaterialFileTypeIcon\n fallbackUnknownType={false}\n filename={`*.${item?.aliases?.[0] || item.id}`}\n size={18}\n type={'file'}\n variant={'raw'}\n />\n <Text ellipsis fontSize={13}>\n {item.name}\n </Text>\n </Flexbox>\n ),\n title: (item.aliases || [item.id])\n .filter(Boolean)\n .map((item) => `*.${item}`)\n .join(','),\n value: item.id,\n })),\n ],\n [],\n );\n\n return (\n <Select\n showSearch\n className={'language-title'}\n options={options}\n size={'small'}\n suffixIcon={false}\n variant={'borderless'}\n style={{\n maxWidth: 240,\n width: '100%',\n }}\n onClick={stopPropagation}\n {...rest}\n />\n );\n});\n\nexport default LangSelect;\n"],"mappings":";;;;;;;;;;AAWA,MAAa,aAAa,MAAoC,EAAE,GAAG,WAAW;CAC5E,MAAM,UAAU,cACR,CACJ;EACE,SAAS,CAAC,QAAQ,KAAK;EACvB,OACE,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,KAAK;GAA1C,UAAA,CACE,oBAAC,sBAAD;IACE,qBAAqB;IACrB,UAAU;IACV,MAAM;IACN,MAAM;IACN,SAAS;GACV,CAAA,GACD,oBAAC,MAAD;IAAM,UAAA;IAAS,UAAU;IAAI,UAAA;GAEvB,CAAA,CACC;;EAEX,OAAO;CACT,GACA,GAAG,qBAAqB,KAAK,UAAU;EACrC,SAAS,KAAK;EACd,OACE,qBAACA,mBAAD;GAAS,YAAA;GAAW,OAAO;GAAU,KAAK;GAA1C,UAAA,CACE,oBAAC,sBAAD;IACE,qBAAqB;IACrB,UAAU,KAAK,MAAM,UAAU,MAAM,KAAK;IAC1C,MAAM;IACN,MAAM;IACN,SAAS;GACV,CAAA,GACD,oBAAC,MAAD;IAAM,UAAA;IAAS,UAAU;IACtB,UAAA,KAAK;GACF,CAAA,CACC;;EAEX,QAAQ,KAAK,WAAW,CAAC,KAAK,EAAE,EAAA,CAC7B,OAAO,OAAO,CAAC,CACf,KAAK,SAAS,KAAK,MAAM,CAAC,CAC1B,KAAK,GAAG;EACX,OAAO,KAAK;CACd,EAAE,CACJ,GACA,CAAC,CACH;CAEA,OACE,oBAAC,QAAD;EACE,YAAA;EACA,WAAW;EACF;EACT,MAAM;EACN,YAAY;EACZ,SAAS;EACT,OAAO;GACL,UAAU;GACV,OAAO;EACT;EACA,SAAS;EACT,GAAI;CACL,CAAA;AAEL,CAAC"}
|
package/es/Highlighter/style.mjs
CHANGED
|
@@ -46,18 +46,21 @@ const styles = createStaticStyles(({ css, cssVar }) => {
|
|
|
46
46
|
padding: 4px;
|
|
47
47
|
`,
|
|
48
48
|
lang: cx(langHoverCls, staticStylish.blur, css`
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
49
|
+
&.ant-tag {
|
|
50
|
+
position: absolute;
|
|
51
|
+
z-index: 2;
|
|
52
|
+
inset-block: auto 8px;
|
|
53
|
+
inset-inline: auto 8px;
|
|
53
54
|
|
|
54
|
-
|
|
55
|
-
|
|
55
|
+
font-family: ${cssVar.fontFamilyCode};
|
|
56
|
+
color: ${cssVar.colorTextSecondary};
|
|
56
57
|
|
|
57
|
-
|
|
58
|
-
|
|
58
|
+
opacity: 0;
|
|
59
|
+
background: ${cssVar.colorFillQuaternary};
|
|
60
|
+
box-shadow: none;
|
|
59
61
|
|
|
60
|
-
|
|
62
|
+
transition: opacity 0.1s;
|
|
63
|
+
}
|
|
61
64
|
`),
|
|
62
65
|
nowrap: css`
|
|
63
66
|
pre,
|
|
@@ -76,7 +79,7 @@ const styles = createStaticStyles(({ css, cssVar }) => {
|
|
|
76
79
|
|
|
77
80
|
transition: background-color 100ms ${cssVar.motionEaseOut};
|
|
78
81
|
|
|
79
|
-
.
|
|
82
|
+
.language-title {
|
|
80
83
|
opacity: 0.5;
|
|
81
84
|
filter: grayscale(100%);
|
|
82
85
|
transition:
|
|
@@ -90,7 +93,7 @@ const styles = createStaticStyles(({ css, cssVar }) => {
|
|
|
90
93
|
}
|
|
91
94
|
|
|
92
95
|
&:hover {
|
|
93
|
-
.
|
|
96
|
+
.language-title {
|
|
94
97
|
opacity: 1;
|
|
95
98
|
filter: grayscale(0%);
|
|
96
99
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Highlighter/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\n// 动态类名常量(用于 className)\nexport const actionsHoverCls = 'ant-highlighter-highlighter-hover-actions';\nexport const langHoverCls = 'ant-highlighter-highlighter-hover-lang';\nexport const expandCls = 'ant-highlighter-highlighter-body-expand';\nexport const prefix = 'ant-highlighter';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n actions: cx(\n actionsHoverCls,\n css`\n position: absolute;\n z-index: 2;\n inset-block-start: 8px;\n inset-inline-end: 8px;\n\n opacity: 0;\n `,\n ),\n bodyCollapsed: css`\n height: 0;\n opacity: 0;\n `,\n bodyExpand: cx(expandCls),\n bodyRoot: css`\n overflow: hidden;\n transition: opacity 0.25s ${cssVar.motionEaseOut};\n `,\n borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n filled: cx(\n lobeStaticStylish.variantFilledWithoutHover,\n css`\n background: ${cssVar.colorFillQuaternary};\n `,\n ),\n headerBorderless: css`\n padding-inline: 0;\n `,\n\n headerFilled: css`\n background: transparent;\n `,\n\n headerOutlined: css`\n & + .${expandCls} {\n border-block-start: 1px solid ${cssVar.colorFillQuaternary};\n }\n `,\n\n headerRoot: css`\n cursor: pointer;\n position: relative;\n padding: 4px;\n `,\n\n lang: cx(\n langHoverCls,\n lobeStaticStylish.blur,\n css`\n position: absolute;\n
|
|
1
|
+
{"version":3,"file":"style.mjs","names":["lobeStaticStylish"],"sources":["../../src/Highlighter/style.ts"],"sourcesContent":["import { createStaticStyles, cx } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nimport { lobeStaticStylish } from '@/styles';\n\n// 动态类名常量(用于 className)\nexport const actionsHoverCls = 'ant-highlighter-highlighter-hover-actions';\nexport const langHoverCls = 'ant-highlighter-highlighter-hover-lang';\nexport const expandCls = 'ant-highlighter-highlighter-body-expand';\nexport const prefix = 'ant-highlighter';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => {\n return {\n actions: cx(\n actionsHoverCls,\n css`\n position: absolute;\n z-index: 2;\n inset-block-start: 8px;\n inset-inline-end: 8px;\n\n opacity: 0;\n `,\n ),\n bodyCollapsed: css`\n height: 0;\n opacity: 0;\n `,\n bodyExpand: cx(expandCls),\n bodyRoot: css`\n overflow: hidden;\n transition: opacity 0.25s ${cssVar.motionEaseOut};\n `,\n borderless: lobeStaticStylish.variantBorderlessWithoutHover,\n filled: cx(\n lobeStaticStylish.variantFilledWithoutHover,\n css`\n background: ${cssVar.colorFillQuaternary};\n `,\n ),\n headerBorderless: css`\n padding-inline: 0;\n `,\n\n headerFilled: css`\n background: transparent;\n `,\n\n headerOutlined: css`\n & + .${expandCls} {\n border-block-start: 1px solid ${cssVar.colorFillQuaternary};\n }\n `,\n\n headerRoot: css`\n cursor: pointer;\n position: relative;\n padding: 4px;\n `,\n\n lang: cx(\n langHoverCls,\n lobeStaticStylish.blur,\n css`\n &.ant-tag {\n position: absolute;\n z-index: 2;\n inset-block: auto 8px;\n inset-inline: auto 8px;\n\n font-family: ${cssVar.fontFamilyCode};\n color: ${cssVar.colorTextSecondary};\n\n opacity: 0;\n background: ${cssVar.colorFillQuaternary};\n box-shadow: none;\n\n transition: opacity 0.1s;\n }\n `,\n ),\n nowrap: css`\n pre,\n code {\n text-wrap: nowrap;\n }\n `,\n outlined: lobeStaticStylish.variantOutlinedWithoutHover,\n root: cx(\n prefix,\n css`\n position: relative;\n\n overflow: hidden;\n\n width: 100%;\n border-radius: ${cssVar.borderRadius};\n\n transition: background-color 100ms ${cssVar.motionEaseOut};\n\n .language-title {\n opacity: 0.5;\n filter: grayscale(100%);\n transition:\n opacity,\n grayscale 0.2s ${cssVar.motionEaseInOut};\n }\n\n .panel-actions {\n opacity: 0;\n transition: opacity 0.2s ${cssVar.motionEaseInOut};\n }\n\n &:hover {\n .language-title {\n opacity: 1;\n filter: grayscale(0%);\n }\n\n .panel-actions {\n opacity: 1;\n }\n\n .${actionsHoverCls} {\n opacity: 1;\n }\n\n .${langHoverCls} {\n opacity: 1;\n }\n }\n\n pre {\n height: 100%;\n font-size: 12px;\n }\n\n code {\n background: transparent !important;\n }\n `,\n ),\n shadow: lobeStaticStylish.shadow,\n wrap: css`\n pre,\n code {\n text-wrap: wrap;\n }\n `,\n };\n});\n\nexport const variants = cva(styles.root, {\n defaultVariants: {\n shadow: false,\n variant: 'filled',\n wrap: false,\n },\n\n variants: {\n variant: {\n filled: styles.filled,\n outlined: styles.outlined,\n borderless: styles.borderless,\n },\n shadow: {\n false: null,\n true: styles.shadow,\n },\n wrap: {\n false: styles.nowrap,\n true: styles.wrap,\n },\n },\n});\n\nexport const headerVariants = cva(styles.headerRoot, {\n defaultVariants: {\n variant: 'filled',\n },\n\n variants: {\n variant: {\n filled: cx(styles.headerFilled, styles.headerOutlined),\n outlined: styles.headerOutlined,\n borderless: styles.headerBorderless,\n },\n },\n});\n\nexport const bodyVariants = cva(styles.bodyRoot, {\n defaultVariants: {\n expand: true,\n },\n variants: {\n expand: {\n false: styles.bodyCollapsed,\n true: styles.bodyExpand,\n },\n },\n});\n"],"mappings":";;;;AAMA,MAAa,kBAAkB;AAC/B,MAAa,eAAe;AAC5B,MAAa,YAAY;AACzB,MAAa,SAAS;AAEtB,MAAa,SAAS,oBAAoB,EAAE,KAAK,aAAa;CAC5D,OAAO;EACL,SAAS,GACP,iBACA,GAAG;;;;;;;OAQL;EACA,eAAe,GAAG;;;;EAIlB,YAAY,GAAG,SAAS;EACxB,UAAU,GAAG;;kCAEiB,OAAO,cAAc;;EAEnD,YAAYA,cAAkB;EAC9B,QAAQ,GACNA,cAAkB,2BAClB,GAAG;sBACa,OAAO,oBAAoB;OAE7C;EACA,kBAAkB,GAAG;;;EAIrB,cAAc,GAAG;;;EAIjB,gBAAgB,GAAG;aACV,UAAU;wCACiB,OAAO,oBAAoB;;;EAI/D,YAAY,GAAG;;;;;EAMf,MAAM,GACJ,cACAA,cAAkB,MAClB,GAAG;;;;;;;yBAOgB,OAAO,eAAe;mBAC5B,OAAO,mBAAmB;;;wBAGrB,OAAO,oBAAoB;;;;;OAM/C;EACA,QAAQ,GAAG;;;;;;EAMX,UAAUA,cAAkB;EAC5B,MAAM,GACJ,QACA,GAAG;;;;;;yBAMgB,OAAO,aAAa;;6CAEA,OAAO,cAAc;;;;;;;6BAOrC,OAAO,gBAAgB;;;;;qCAKf,OAAO,gBAAgB;;;;;;;;;;;;;aAa/C,gBAAgB;;;;aAIhB,aAAa;;;;;;;;;;;;;OActB;EACA,QAAQA,cAAkB;EAC1B,MAAM,GAAG;;;;;;CAMX;AACF,CAAC;AAED,MAAa,WAAW,IAAI,OAAO,MAAM;CACvC,iBAAiB;EACf,QAAQ;EACR,SAAS;EACT,MAAM;CACR;CAEA,UAAU;EACR,SAAS;GACP,QAAQ,OAAO;GACf,UAAU,OAAO;GACjB,YAAY,OAAO;EACrB;EACA,QAAQ;GACN,OAAO;GACP,MAAM,OAAO;EACf;EACA,MAAM;GACJ,OAAO,OAAO;GACd,MAAM,OAAO;EACf;CACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,YAAY;CACnD,iBAAiB,EACf,SAAS,SACX;CAEA,UAAU,EACR,SAAS;EACP,QAAQ,GAAG,OAAO,cAAc,OAAO,cAAc;EACrD,UAAU,OAAO;EACjB,YAAY,OAAO;CACrB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,UAAU;CAC/C,iBAAiB,EACf,QAAQ,KACV;CACA,UAAU,EACR,QAAQ;EACN,OAAO,OAAO;EACd,MAAM,OAAO;CACf,EACF;AACF,CAAC"}
|
|
@@ -16,7 +16,7 @@ const MermaidHeaderLanguage = memo(({ fileName, language, showLanguage }) => {
|
|
|
16
16
|
return /* @__PURE__ */ jsxs(FlexBasic_default, {
|
|
17
17
|
horizontal: true,
|
|
18
18
|
align: "center",
|
|
19
|
-
className: "
|
|
19
|
+
className: "language-title",
|
|
20
20
|
flex: 1,
|
|
21
21
|
gap: 4,
|
|
22
22
|
justify: "flex-start",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FullFeatured.mjs","names":["Flexbox"],"sources":["../../src/Mermaid/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { bodyVariants, headerVariants, variants } from '@/Highlighter/style';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { type MermaidProps } from './type';\n\nconst MermaidHeaderLanguage = memo(\n ({\n fileName,\n language,\n showLanguage,\n }: {\n fileName?: string;\n language: string;\n showLanguage?: boolean;\n }) => {\n if (!showLanguage) return null;\n\n return (\n <Flexbox\n horizontal\n align={'center'}\n className={'
|
|
1
|
+
{"version":3,"file":"FullFeatured.mjs","names":["Flexbox"],"sources":["../../src/Mermaid/FullFeatured.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { memo, type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\n\nimport ActionIcon from '@/base-ui/ActionIcon';\nimport CopyButton from '@/CopyButton';\nimport { Flexbox } from '@/Flex';\nimport { bodyVariants, headerVariants, variants } from '@/Highlighter/style';\nimport MaterialFileTypeIcon from '@/MaterialFileTypeIcon';\nimport Text from '@/Text';\nimport { stopPropagation } from '@/utils/dom';\n\nimport { type MermaidProps } from './type';\n\nconst MermaidHeaderLanguage = memo(\n ({\n fileName,\n language,\n showLanguage,\n }: {\n fileName?: string;\n language: string;\n showLanguage?: boolean;\n }) => {\n if (!showLanguage) return null;\n\n return (\n <Flexbox\n horizontal\n align={'center'}\n className={'language-title'}\n flex={1}\n gap={4}\n justify={'flex-start'}\n paddingInline={8}\n >\n <MaterialFileTypeIcon\n fallbackUnknownType={false}\n filename={fileName || language}\n size={18}\n type={'file'}\n variant={'raw'}\n />\n\n <Text ellipsis fontSize={13}>\n {fileName || 'Mermaid'}\n </Text>\n </Flexbox>\n );\n },\n (prev, next) =>\n prev.fileName === next.fileName &&\n prev.language === next.language &&\n prev.showLanguage === next.showLanguage,\n);\n\nexport interface MermaidFullFeaturedProps extends Omit<MermaidProps, 'children'> {\n children: ReactNode;\n content: string;\n}\n\nexport const MermaidFullFeatured = memo<MermaidFullFeaturedProps>(\n ({\n showLanguage,\n styles: customStyles,\n classNames,\n content,\n children,\n className,\n copyable,\n actionsRender,\n style,\n variant,\n shadow,\n language = 'mermaid',\n fileName,\n defaultExpand = true,\n ...rest\n }) => {\n const [expand, setExpand] = useState(defaultExpand);\n const contentRef = useRef(content);\n\n useEffect(() => {\n contentRef.current = content;\n }, [content]);\n\n const getContent = useCallback(() => contentRef.current, []);\n\n const originalActions = useMemo(() => {\n if (!copyable) return null;\n return <CopyButton content={getContent} size={'small'} />;\n }, [copyable, getContent]);\n\n const actions = useMemo(() => {\n if (!actionsRender) return originalActions;\n return actionsRender({\n actionIconSize: 'small',\n content,\n getContent,\n originalNode: originalActions,\n });\n }, [actionsRender, content, getContent, originalActions]);\n\n const handleToggleExpand = useCallback(() => {\n setExpand((prev) => !prev);\n }, []);\n\n return (\n <Flexbox\n className={cx(variants({ shadow, variant }), className)}\n data-code-type=\"mermaid\"\n style={style}\n {...rest}\n >\n <Flexbox\n horizontal\n align={'center'}\n className={cx(headerVariants({ variant }), classNames?.header)}\n justify={'space-between'}\n style={customStyles?.header}\n onClick={handleToggleExpand}\n >\n <MermaidHeaderLanguage\n fileName={fileName}\n language={language}\n showLanguage={showLanguage}\n />\n <Flexbox horizontal align={'center'} flex={'none'} gap={4} onClick={stopPropagation}>\n <Flexbox horizontal align={'center'} className={'panel-actions'} flex={'none'} gap={4}>\n {actions}\n </Flexbox>\n <ActionIcon\n icon={expand ? ChevronDown : ChevronRight}\n size={'small'}\n onClick={handleToggleExpand}\n />\n </Flexbox>\n </Flexbox>\n <Flexbox\n className={cx(bodyVariants({ expand }), classNames?.body)}\n style={customStyles?.body}\n >\n {children}\n </Flexbox>\n </Flexbox>\n );\n },\n);\n\nexport default MermaidFullFeatured;\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,wBAAwB,MAC3B,EACC,UACA,UACA,mBAKI;CACJ,IAAI,CAAC,cAAc,OAAO;CAE1B,OACE,qBAACA,mBAAD;EACE,YAAA;EACA,OAAO;EACP,WAAW;EACX,MAAM;EACN,KAAK;EACL,SAAS;EACT,eAAe;EAPjB,UAAA,CASE,oBAAC,sBAAD;GACE,qBAAqB;GACrB,UAAU,YAAY;GACtB,MAAM;GACN,MAAM;GACN,SAAS;EACV,CAAA,GAED,oBAAC,MAAD;GAAM,UAAA;GAAS,UAAU;GACtB,UAAA,YAAY;EACT,CAAA,CACC;;AAEb,IACC,MAAM,SACL,KAAK,aAAa,KAAK,YACvB,KAAK,aAAa,KAAK,YACvB,KAAK,iBAAiB,KAAK,YAC/B;AAOA,MAAa,sBAAsB,MAChC,EACC,cACA,QAAQ,cACR,YACA,SACA,UACA,WACA,UACA,eACA,OACA,SACA,QACA,WAAW,WACX,UACA,gBAAgB,MAChB,GAAG,WACC;CACJ,MAAM,CAAC,QAAQ,aAAa,SAAS,aAAa;CAClD,MAAM,aAAa,OAAO,OAAO;CAEjC,gBAAgB;EACd,WAAW,UAAU;CACvB,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,aAAa,kBAAkB,WAAW,SAAS,CAAC,CAAC;CAE3D,MAAM,kBAAkB,cAAc;EACpC,IAAI,CAAC,UAAU,OAAO;EACtB,OAAO,oBAAC,YAAD;GAAY,SAAS;GAAY,MAAM;EAAU,CAAA;CAC1D,GAAG,CAAC,UAAU,UAAU,CAAC;CAEzB,MAAM,UAAU,cAAc;EAC5B,IAAI,CAAC,eAAe,OAAO;EAC3B,OAAO,cAAc;GACnB,gBAAgB;GAChB;GACA;GACA,cAAc;EAChB,CAAC;CACH,GAAG;EAAC;EAAe;EAAS;EAAY;CAAe,CAAC;CAExD,MAAM,qBAAqB,kBAAkB;EAC3C,WAAW,SAAS,CAAC,IAAI;CAC3B,GAAG,CAAC,CAAC;CAEL,OACE,qBAACA,mBAAD;EACE,WAAW,GAAG,SAAS;GAAE;GAAQ;EAAQ,CAAC,GAAG,SAAS;EACtD,kBAAe;EACR;EACP,GAAI;EAJN,UAAA,CAME,qBAACA,mBAAD;GACE,YAAA;GACA,OAAO;GACP,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,GAAG,YAAY,MAAM;GAC7D,SAAS;GACT,OAAO,cAAc;GACrB,SAAS;GANX,UAAA,CAQE,oBAAC,uBAAD;IACY;IACA;IACI;GACf,CAAA,GACD,qBAACA,mBAAD;IAAS,YAAA;IAAW,OAAO;IAAU,MAAM;IAAQ,KAAK;IAAG,SAAS;IAApE,UAAA,CACE,oBAACA,mBAAD;KAAS,YAAA;KAAW,OAAO;KAAU,WAAW;KAAiB,MAAM;KAAQ,KAAK;KACjF,UAAA;IACM,CAAA,GACT,oBAAC,YAAD;KACE,MAAM,SAAS,cAAc;KAC7B,MAAM;KACN,SAAS;IACV,CAAA,CACM;GACF,CAAA,CAAA;EACT,CAAA,GAAA,oBAACA,mBAAD;GACE,WAAW,GAAG,aAAa,EAAE,OAAO,CAAC,GAAG,YAAY,IAAI;GACxD,OAAO,cAAc;GAEpB;EACM,CAAA,CACF;;AAEb,CACF"}
|
|
@@ -20,12 +20,12 @@ const ThemeProvider$1 = memo(({ appId = LOBE_THEME_APP_ID, children, customStyli
|
|
|
20
20
|
const webfontUrls = useMemo(() => customFonts || [
|
|
21
21
|
genCdnUrl({
|
|
22
22
|
path: "css/index.css",
|
|
23
|
-
pkg: "@lobehub/webfont-
|
|
23
|
+
pkg: "@lobehub/webfont-mono",
|
|
24
24
|
version: "1.0.0"
|
|
25
25
|
}),
|
|
26
26
|
genCdnUrl({
|
|
27
27
|
path: "css/index-full.css",
|
|
28
|
-
pkg: "@lobehub/webfont-
|
|
28
|
+
pkg: "@lobehub/webfont-harmony-sans",
|
|
29
29
|
version: "1.0.0"
|
|
30
30
|
}),
|
|
31
31
|
genCdnUrl({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ThemeProvider.mjs","names":["ThemeProvider","lobeCustomStylish","lobeCustomToken","AntdThemeProvider","AntdConfigProvider"],"sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["'use client';\n\nimport { App } from 'antd';\nimport {\n type CustomStylishParams,\n type CustomTokenParams,\n type GetAntdTheme,\n ThemeProvider as AntdThemeProvider,\n} from 'antd-style';\nimport { merge } from 'es-toolkit/compat';\nimport { memo, useCallback, useMemo, useState } from 'react';\n\nimport { useCdnFn } from '@/ConfigProvider';\nimport FontLoader from '@/FontLoader';\nimport { lobeCustomStylish, lobeCustomToken } from '@/styles';\nimport { createLobeAntdTheme } from '@/styles/theme/antdTheme';\nimport { type LobeCustomToken } from '@/types/customToken';\n\nimport AppElementContext from './AppElementContext';\nimport AntdConfigProvider from './ConfigProvider';\nimport { LOBE_THEME_APP_ID } from './constants';\nimport GlobalStyle, { EssentialStyle } from './GlobalStyle';\nimport { type ThemeProviderProps } from './type';\n\nconst ThemeProvider = memo<ThemeProviderProps>(\n ({\n appId = LOBE_THEME_APP_ID,\n children,\n customStylish,\n customToken,\n enableCustomFonts = true,\n enableGlobalStyle = true,\n customFonts,\n customTheme = {},\n className,\n style,\n theme: antdTheme,\n ...rest\n }) => {\n const genCdnUrl = useCdnFn();\n const [appRef, setAppRef] = useState<HTMLDivElement | null>(null);\n\n const webfontUrls = useMemo(\n () =>\n customFonts || [\n genCdnUrl({\n path: 'css/index.css',\n pkg: '@lobehub/webfont-
|
|
1
|
+
{"version":3,"file":"ThemeProvider.mjs","names":["ThemeProvider","lobeCustomStylish","lobeCustomToken","AntdThemeProvider","AntdConfigProvider"],"sources":["../../src/ThemeProvider/ThemeProvider.tsx"],"sourcesContent":["'use client';\n\nimport { App } from 'antd';\nimport {\n type CustomStylishParams,\n type CustomTokenParams,\n type GetAntdTheme,\n ThemeProvider as AntdThemeProvider,\n} from 'antd-style';\nimport { merge } from 'es-toolkit/compat';\nimport { memo, useCallback, useMemo, useState } from 'react';\n\nimport { useCdnFn } from '@/ConfigProvider';\nimport FontLoader from '@/FontLoader';\nimport { lobeCustomStylish, lobeCustomToken } from '@/styles';\nimport { createLobeAntdTheme } from '@/styles/theme/antdTheme';\nimport { type LobeCustomToken } from '@/types/customToken';\n\nimport AppElementContext from './AppElementContext';\nimport AntdConfigProvider from './ConfigProvider';\nimport { LOBE_THEME_APP_ID } from './constants';\nimport GlobalStyle, { EssentialStyle } from './GlobalStyle';\nimport { type ThemeProviderProps } from './type';\n\nconst ThemeProvider = memo<ThemeProviderProps>(\n ({\n appId = LOBE_THEME_APP_ID,\n children,\n customStylish,\n customToken,\n enableCustomFonts = true,\n enableGlobalStyle = true,\n customFonts,\n customTheme = {},\n className,\n style,\n theme: antdTheme,\n ...rest\n }) => {\n const genCdnUrl = useCdnFn();\n const [appRef, setAppRef] = useState<HTMLDivElement | null>(null);\n\n const webfontUrls = useMemo(\n () =>\n customFonts || [\n genCdnUrl({\n path: 'css/index.css',\n pkg: '@lobehub/webfont-mono',\n version: '1.0.0',\n }),\n genCdnUrl({\n path: 'css/index-full.css',\n pkg: '@lobehub/webfont-harmony-sans',\n version: '1.0.0',\n }),\n genCdnUrl({\n path: 'css/index.css',\n pkg: '@lobehub/webfont-harmony-sans-sc',\n // pkg: '@lobehub/webfont-harmony-sans-sc-mini',\n version: '1.0.0',\n }),\n genCdnUrl({\n path: 'dist/katex.min.css',\n pkg: 'katex',\n version: '0.18.1',\n }),\n ],\n [customFonts, genCdnUrl],\n );\n\n const stylish = useCallback(\n (theme: CustomStylishParams) => ({ ...lobeCustomStylish(theme), ...customStylish?.(theme) }),\n [customStylish],\n );\n\n const token = useCallback(\n (theme: CustomTokenParams) => ({ ...lobeCustomToken(theme), ...customToken?.(theme) }),\n [customToken],\n );\n\n const theme = useCallback<GetAntdTheme>(\n (appearance) => {\n const lobeTheme = createLobeAntdTheme({\n appearance,\n neutralColor: customTheme.neutralColor,\n primaryColor: customTheme.primaryColor,\n });\n return merge(lobeTheme, antdTheme);\n },\n [customTheme.primaryColor, customTheme.neutralColor, antdTheme],\n );\n\n return (\n <>\n {enableCustomFonts &&\n webfontUrls?.length > 0 &&\n webfontUrls.map((webfont) => <FontLoader key={webfont} url={webfont} />)}\n <AntdThemeProvider<LobeCustomToken>\n customStylish={stylish}\n customToken={token}\n theme={theme}\n {...rest}\n >\n <AntdConfigProvider>\n <EssentialStyle />\n {enableGlobalStyle && <GlobalStyle />}\n\n <App\n className={className}\n style={{ isolation: 'isolate', minHeight: 'inherit', width: 'inherit', ...style }}\n >\n <div id={appId} style={contentsStyle}>\n <AppElementContext value={appRef}>\n {children}\n {/*\n In-tree portal host for Base UI floating components\n (Select, Combobox, etc.). Keeping it inside `<App>` keeps\n the antd-style / emotion theme cascade intact so popups\n render with the correct tokens, while the layout-bearing\n block lets Base UI's Portal actually mount — the outer\n wrapper uses `display: contents` and cannot host portals.\n */}\n <div data-lobe-portal-host=\"\" ref={setAppRef} style={hostPortalHostStyle} />\n </AppElementContext>\n </div>\n </App>\n </AntdConfigProvider>\n </AntdThemeProvider>\n </>\n );\n },\n);\n\nThemeProvider.displayName = 'LobeThemeProvider';\n\nexport default ThemeProvider;\n\nconst hostPortalHostStyle: React.CSSProperties = {\n // `height: 0` keeps the host invisible and gives it no hit region of\n // its own; absolute children (Base UI Positioner) have their own hit\n // region, so we must NOT set `pointer-events: none` here — it would\n // be inherited by popup descendants and break clicks/hover.\n height: 0,\n left: 0,\n // `position: fixed` keeps a stacking context so portaled popups can\n // win over sibling z-indexes. `right: 0` (instead of `width: 0`)\n // gives the host a full viewport-width containing block — without it,\n // Base UI Positioner uses `position: absolute` against a 0-width\n // containing block and collapses text to one character per line.\n position: 'fixed',\n right: 0,\n top: 0,\n zIndex: 1100,\n};\n\nconst contentsStyle: React.CSSProperties = {\n display: 'contents',\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAwBA,MAAMA,kBAAgB,MACnB,EACC,QAAQ,mBACR,UACA,eACA,aACA,oBAAoB,MACpB,oBAAoB,MACpB,aACA,cAAc,CAAC,GACf,WACA,OACA,OAAO,WACP,GAAG,WACC;CACJ,MAAM,YAAY,SAAS;CAC3B,MAAM,CAAC,QAAQ,aAAa,SAAgC,IAAI;CAEhE,MAAM,cAAc,cAEhB,eAAe;EACb,UAAU;GACR,MAAM;GACN,KAAK;GACL,SAAS;EACX,CAAC;EACD,UAAU;GACR,MAAM;GACN,KAAK;GACL,SAAS;EACX,CAAC;EACD,UAAU;GACR,MAAM;GACN,KAAK;GAEL,SAAS;EACX,CAAC;EACD,UAAU;GACR,MAAM;GACN,KAAK;GACL,SAAS;EACX,CAAC;CACH,GACF,CAAC,aAAa,SAAS,CACzB;CAEA,MAAM,UAAU,aACb,WAAgC;EAAE,GAAGC,sBAAkB,KAAK;EAAG,GAAG,gBAAgB,KAAK;CAAE,IAC1F,CAAC,aAAa,CAChB;CAEA,MAAM,QAAQ,aACX,WAA8B;EAAE,GAAGC,oBAAgB,KAAK;EAAG,GAAG,cAAc,KAAK;CAAE,IACpF,CAAC,WAAW,CACd;CAEA,MAAM,QAAQ,aACX,eAAe;EACd,MAAM,YAAY,oBAAoB;GACpC;GACA,cAAc,YAAY;GAC1B,cAAc,YAAY;EAC5B,CAAC;EACD,OAAO,MAAM,WAAW,SAAS;CACnC,GACA;EAAC,YAAY;EAAc,YAAY;EAAc;CAAS,CAChE;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACG,qBACC,aAAa,SAAS,KACtB,YAAY,KAAK,YAAY,oBAAC,YAAD,EAA0B,KAAK,QAAU,GAAxB,OAAwB,CAAC,GACzE,oBAACC,eAAD;EACE,eAAe;EACf,aAAa;EACN;EACP,GAAI;EAEJ,UAAA,qBAACC,kBAAD,EAAA,UAAA;GACE,oBAAC,gBAAD,CAAiB,CAAA;GAChB,qBAAqB,oBAAC,aAAD,CAAc,CAAA;GAEpC,oBAAC,KAAD;IACa;IACX,OAAO;KAAE,WAAW;KAAW,WAAW;KAAW,OAAO;KAAW,GAAG;IAAM;IAEhF,UAAA,oBAAC,OAAD;KAAK,IAAI;KAAO,OAAO;KACrB,UAAA,qBAAC,mBAAD;MAAmB,OAAO;MAA1B,UAAA,CACG,UASD,oBAAC,OAAD;OAAK,yBAAsB;OAAG,KAAK;OAAW,OAAO;MAAsB,CAAA,CAC1D;;IAChB,CAAA;GACF,CAAA;EACa,EAAA,CAAA;CACH,CAAA,CACnB,EAAA,CAAA;AAEN,CACF;AAEA,gBAAc,cAAc;AAI5B,MAAM,sBAA2C;CAK/C,QAAQ;CACR,MAAM;CAMN,UAAU;CACV,OAAO;CACP,KAAK;CACL,QAAQ;AACV;AAEA,MAAM,gBAAqC,EACzC,SAAS,WACX"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import { AgentSkillCardProps } from "./type.mjs";
|
|
2
|
+
//#region src/awesome/AgentSkillCard/AgentSkillCard.d.ts
|
|
3
|
+
declare const AgentSkillCard: import("react").NamedExoticComponent<AgentSkillCardProps>;
|
|
4
|
+
//#endregion
|
|
5
|
+
export { AgentSkillCard as default };
|
|
6
|
+
//# sourceMappingURL=AgentSkillCard.d.mts.map
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import Icon from "../../Icon/Icon.mjs";
|
|
3
|
+
import Snippet from "../../Snippet/Snippet.mjs";
|
|
4
|
+
import { DEFAULT_SKILL_AGENTS } from "./agents.mjs";
|
|
5
|
+
import { renderLandingIcon } from "../landingIcon.mjs";
|
|
6
|
+
import Segmented from "../../base-ui/Segmented/Segmented.mjs";
|
|
7
|
+
import { styles } from "./style.mjs";
|
|
8
|
+
import { memo, useState } from "react";
|
|
9
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
+
import { cx } from "antd-style";
|
|
11
|
+
import { Bot, UserRound } from "lucide-react";
|
|
12
|
+
//#region src/awesome/AgentSkillCard/AgentSkillCard.tsx
|
|
13
|
+
const AVATAR_SIZE = 28;
|
|
14
|
+
const AgentSkillCard = memo(({ agent, agents = DEFAULT_SKILL_AGENTS, className, defaultMode = "agent", footer, human, mode: controlledMode, onModeChange, ...rest }) => {
|
|
15
|
+
const [innerMode, setInnerMode] = useState(defaultMode);
|
|
16
|
+
const mode = human ? controlledMode ?? innerMode : "agent";
|
|
17
|
+
const panel = mode === "human" && human ? human : agent;
|
|
18
|
+
const shell = panel.shell ?? mode === "human";
|
|
19
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
20
|
+
className: cx(styles.root, className),
|
|
21
|
+
...rest,
|
|
22
|
+
children: [
|
|
23
|
+
human && /* @__PURE__ */ jsx(Segmented, {
|
|
24
|
+
block: true,
|
|
25
|
+
size: "large",
|
|
26
|
+
value: mode,
|
|
27
|
+
variant: "outlined",
|
|
28
|
+
options: [{
|
|
29
|
+
icon: /* @__PURE__ */ jsx(Icon, {
|
|
30
|
+
icon: Bot,
|
|
31
|
+
size: 16
|
|
32
|
+
}),
|
|
33
|
+
label: agent.label ?? "I'm an Agent",
|
|
34
|
+
value: "agent"
|
|
35
|
+
}, {
|
|
36
|
+
icon: /* @__PURE__ */ jsx(Icon, {
|
|
37
|
+
icon: UserRound,
|
|
38
|
+
size: 16
|
|
39
|
+
}),
|
|
40
|
+
label: human.label ?? "I'm a Human",
|
|
41
|
+
value: "human"
|
|
42
|
+
}],
|
|
43
|
+
onChange: (next) => {
|
|
44
|
+
setInnerMode(next);
|
|
45
|
+
onModeChange?.(next);
|
|
46
|
+
}
|
|
47
|
+
}),
|
|
48
|
+
/* @__PURE__ */ jsxs("div", {
|
|
49
|
+
className: styles.panel,
|
|
50
|
+
children: [
|
|
51
|
+
mode === "agent" && agents.length > 0 && /* @__PURE__ */ jsx("div", {
|
|
52
|
+
className: styles.agents,
|
|
53
|
+
children: agents.map(({ avatar, title }) => /* @__PURE__ */ jsx("span", {
|
|
54
|
+
className: styles.agent,
|
|
55
|
+
title,
|
|
56
|
+
children: renderLandingIcon(avatar, AVATAR_SIZE)
|
|
57
|
+
}, title))
|
|
58
|
+
}),
|
|
59
|
+
panel.description && /* @__PURE__ */ jsx("p", {
|
|
60
|
+
className: styles.description,
|
|
61
|
+
children: panel.description
|
|
62
|
+
}),
|
|
63
|
+
/* @__PURE__ */ jsx(Snippet, {
|
|
64
|
+
className: styles.code,
|
|
65
|
+
language: "bash",
|
|
66
|
+
prefix: shell ? "$" : void 0,
|
|
67
|
+
variant: "outlined",
|
|
68
|
+
children: panel.code
|
|
69
|
+
})
|
|
70
|
+
]
|
|
71
|
+
}),
|
|
72
|
+
footer && /* @__PURE__ */ jsx("div", {
|
|
73
|
+
className: styles.footer,
|
|
74
|
+
children: footer
|
|
75
|
+
})
|
|
76
|
+
]
|
|
77
|
+
});
|
|
78
|
+
});
|
|
79
|
+
AgentSkillCard.displayName = "AgentSkillCard";
|
|
80
|
+
//#endregion
|
|
81
|
+
export { AgentSkillCard as default };
|
|
82
|
+
|
|
83
|
+
//# sourceMappingURL=AgentSkillCard.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AgentSkillCard.mjs","names":[],"sources":["../../../src/awesome/AgentSkillCard/AgentSkillCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { Bot, UserRound } from 'lucide-react';\nimport { memo, useState } from 'react';\n\nimport { renderLandingIcon } from '@/awesome/landingIcon';\nimport Segmented from '@/base-ui/Segmented';\nimport Icon from '@/Icon';\nimport Snippet from '@/Snippet';\n\nimport { DEFAULT_SKILL_AGENTS } from './agents';\nimport { styles } from './style';\nimport type { AgentSkillCardMode, AgentSkillCardProps } from './type';\n\nconst AVATAR_SIZE = 28;\n\nconst AgentSkillCard = memo<AgentSkillCardProps>(\n ({\n agent,\n agents = DEFAULT_SKILL_AGENTS,\n className,\n defaultMode = 'agent',\n footer,\n human,\n mode: controlledMode,\n onModeChange,\n ...rest\n }) => {\n const [innerMode, setInnerMode] = useState<AgentSkillCardMode>(defaultMode);\n const mode = human ? (controlledMode ?? innerMode) : 'agent';\n const panel = mode === 'human' && human ? human : agent;\n const shell = panel.shell ?? mode === 'human';\n\n return (\n <div className={cx(styles.root, className)} {...rest}>\n {human && (\n <Segmented<AgentSkillCardMode>\n block\n size={'large'}\n value={mode}\n variant={'outlined'}\n options={[\n {\n icon: <Icon icon={Bot} size={16} />,\n label: agent.label ?? \"I'm an Agent\",\n value: 'agent',\n },\n {\n icon: <Icon icon={UserRound} size={16} />,\n label: human.label ?? \"I'm a Human\",\n value: 'human',\n },\n ]}\n onChange={(next) => {\n setInnerMode(next);\n onModeChange?.(next);\n }}\n />\n )}\n <div className={styles.panel}>\n {mode === 'agent' && agents.length > 0 && (\n <div className={styles.agents}>\n {agents.map(({ avatar, title }) => (\n <span className={styles.agent} key={title} title={title}>\n {renderLandingIcon(avatar, AVATAR_SIZE)}\n </span>\n ))}\n </div>\n )}\n {panel.description && <p className={styles.description}>{panel.description}</p>}\n <Snippet\n className={styles.code}\n language={'bash'}\n prefix={shell ? '$' : undefined}\n variant={'outlined'}\n >\n {panel.code}\n </Snippet>\n </div>\n {footer && <div className={styles.footer}>{footer}</div>}\n </div>\n );\n },\n);\n\nAgentSkillCard.displayName = 'AgentSkillCard';\n\nexport default AgentSkillCard;\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,cAAc;AAEpB,MAAM,iBAAiB,MACpB,EACC,OACA,SAAS,sBACT,WACA,cAAc,SACd,QACA,OACA,MAAM,gBACN,cACA,GAAG,WACC;CACJ,MAAM,CAAC,WAAW,gBAAgB,SAA6B,WAAW;CAC1E,MAAM,OAAO,QAAS,kBAAkB,YAAa;CACrD,MAAM,QAAQ,SAAS,WAAW,QAAQ,QAAQ;CAClD,MAAM,QAAQ,MAAM,SAAS,SAAS;CAEtC,OACE,qBAAC,OAAD;EAAK,WAAW,GAAG,OAAO,MAAM,SAAS;EAAG,GAAI;EAAhD,UAAA;GACG,SACC,oBAAC,WAAD;IACE,OAAA;IACA,MAAM;IACN,OAAO;IACP,SAAS;IACT,SAAS,CACP;KACE,MAAM,oBAAC,MAAD;MAAM,MAAM;MAAK,MAAM;KAAK,CAAA;KAClC,OAAO,MAAM,SAAS;KACtB,OAAO;IACT,GACA;KACE,MAAM,oBAAC,MAAD;MAAM,MAAM;MAAW,MAAM;KAAK,CAAA;KACxC,OAAO,MAAM,SAAS;KACtB,OAAO;IACT,CACF;IACA,WAAW,SAAS;KAClB,aAAa,IAAI;KACjB,eAAe,IAAI;IACrB;GACD,CAAA;GAEH,qBAAC,OAAD;IAAK,WAAW,OAAO;IAAvB,UAAA;KACG,SAAS,WAAW,OAAO,SAAS,KACnC,oBAAC,OAAD;MAAK,WAAW,OAAO;MACpB,UAAA,OAAO,KAAK,EAAE,QAAQ,YACrB,oBAAC,QAAD;OAAM,WAAW,OAAO;OAA0B;OAC/C,UAAA,kBAAkB,QAAQ,WAAW;MAClC,GAF8B,KAE9B,CACP;KACE,CAAA;KAEN,MAAM,eAAe,oBAAC,KAAD;MAAG,WAAW,OAAO;MAAc,UAAA,MAAM;KAAe,CAAA;KAC9E,oBAAC,SAAD;MACE,WAAW,OAAO;MAClB,UAAU;MACV,QAAQ,QAAQ,MAAM,KAAA;MACtB,SAAS;MAER,UAAA,MAAM;KACA,CAAA;IACN;;GACJ,UAAU,oBAAC,OAAD;IAAK,WAAW,OAAO;IAAS,UAAA;GAAY,CAAA;EACpD;;AAET,CACF;AAEA,eAAe,cAAc"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { ClaudeCode, Cline, Codex, Cursor, GeminiCLI, GithubCopilot, OpenCode, Windsurf } from "@lobehub/icons";
|
|
2
|
+
//#region src/awesome/AgentSkillCard/agents.ts
|
|
3
|
+
const DEFAULT_SKILL_AGENTS = [
|
|
4
|
+
{
|
|
5
|
+
avatar: ClaudeCode.Avatar,
|
|
6
|
+
title: "Claude Code"
|
|
7
|
+
},
|
|
8
|
+
{
|
|
9
|
+
avatar: Codex.Avatar,
|
|
10
|
+
title: "Codex"
|
|
11
|
+
},
|
|
12
|
+
{
|
|
13
|
+
avatar: Cursor.Avatar,
|
|
14
|
+
title: "Cursor"
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
avatar: GeminiCLI.Avatar,
|
|
18
|
+
title: "Gemini CLI"
|
|
19
|
+
},
|
|
20
|
+
{
|
|
21
|
+
avatar: GithubCopilot.Avatar,
|
|
22
|
+
title: "GitHub Copilot"
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
avatar: Windsurf.Avatar,
|
|
26
|
+
title: "Windsurf"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
avatar: Cline.Avatar,
|
|
30
|
+
title: "Cline"
|
|
31
|
+
},
|
|
32
|
+
{
|
|
33
|
+
avatar: OpenCode.Avatar,
|
|
34
|
+
title: "OpenCode"
|
|
35
|
+
}
|
|
36
|
+
];
|
|
37
|
+
//#endregion
|
|
38
|
+
export { DEFAULT_SKILL_AGENTS };
|
|
39
|
+
|
|
40
|
+
//# sourceMappingURL=agents.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"agents.mjs","names":[],"sources":["../../../src/awesome/AgentSkillCard/agents.ts"],"sourcesContent":["import {\n ClaudeCode,\n Cline,\n Codex,\n Cursor,\n GeminiCLI,\n GithubCopilot,\n OpenCode,\n Windsurf,\n} from '@lobehub/icons';\n\nimport type { AgentSkillCardAgent } from './type';\n\nexport const DEFAULT_SKILL_AGENTS: AgentSkillCardAgent[] = [\n { avatar: ClaudeCode.Avatar, title: 'Claude Code' },\n { avatar: Codex.Avatar, title: 'Codex' },\n { avatar: Cursor.Avatar, title: 'Cursor' },\n { avatar: GeminiCLI.Avatar, title: 'Gemini CLI' },\n { avatar: GithubCopilot.Avatar, title: 'GitHub Copilot' },\n { avatar: Windsurf.Avatar, title: 'Windsurf' },\n { avatar: Cline.Avatar, title: 'Cline' },\n { avatar: OpenCode.Avatar, title: 'OpenCode' },\n];\n"],"mappings":";;AAaA,MAAa,uBAA8C;CACzD;EAAE,QAAQ,WAAW;EAAQ,OAAO;CAAc;CAClD;EAAE,QAAQ,MAAM;EAAQ,OAAO;CAAQ;CACvC;EAAE,QAAQ,OAAO;EAAQ,OAAO;CAAS;CACzC;EAAE,QAAQ,UAAU;EAAQ,OAAO;CAAa;CAChD;EAAE,QAAQ,cAAc;EAAQ,OAAO;CAAiB;CACxD;EAAE,QAAQ,SAAS;EAAQ,OAAO;CAAW;CAC7C;EAAE,QAAQ,MAAM;EAAQ,OAAO;CAAQ;CACvC;EAAE,QAAQ,SAAS;EAAQ,OAAO;CAAW;AAC/C"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { AgentSkillCardAgent, AgentSkillCardMode, AgentSkillCardPanel, AgentSkillCardProps } from "./type.mjs";
|
|
2
|
+
import { DEFAULT_SKILL_AGENTS } from "./agents.mjs";
|
|
3
|
+
import AgentSkillCard from "./AgentSkillCard.mjs";
|
|
4
|
+
export { type AgentSkillCardAgent, type AgentSkillCardMode, type AgentSkillCardPanel, type AgentSkillCardProps, DEFAULT_SKILL_AGENTS, AgentSkillCard as default };
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
import { createStaticStyles } from "antd-style";
|
|
2
|
+
//#region src/awesome/AgentSkillCard/style.ts
|
|
3
|
+
const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
4
|
+
agent: css`
|
|
5
|
+
display: inline-flex;
|
|
6
|
+
flex: none;
|
|
7
|
+
border-radius: 8px;
|
|
8
|
+
transition: transform 140ms ease;
|
|
9
|
+
|
|
10
|
+
&:hover {
|
|
11
|
+
transform: translateY(-2px);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
@media (prefers-reduced-motion: reduce) {
|
|
15
|
+
&:hover {
|
|
16
|
+
transform: none;
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
`,
|
|
20
|
+
agents: css`
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-wrap: wrap;
|
|
23
|
+
gap: 14px;
|
|
24
|
+
justify-content: center;
|
|
25
|
+
`,
|
|
26
|
+
code: css`
|
|
27
|
+
inline-size: 100%;
|
|
28
|
+
text-align: start;
|
|
29
|
+
`,
|
|
30
|
+
description: css`
|
|
31
|
+
margin: 0;
|
|
32
|
+
|
|
33
|
+
font-size: 15px;
|
|
34
|
+
font-weight: 500;
|
|
35
|
+
line-height: 1.5;
|
|
36
|
+
color: ${cssVar.colorText};
|
|
37
|
+
text-align: center;
|
|
38
|
+
text-wrap: balance;
|
|
39
|
+
`,
|
|
40
|
+
footer: css`
|
|
41
|
+
display: flex;
|
|
42
|
+
flex-wrap: wrap;
|
|
43
|
+
gap: 16px;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
|
|
46
|
+
font-size: ${cssVar.fontSizeSM};
|
|
47
|
+
color: ${cssVar.colorTextTertiary};
|
|
48
|
+
|
|
49
|
+
a {
|
|
50
|
+
color: inherit;
|
|
51
|
+
text-decoration: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
a:hover {
|
|
55
|
+
color: ${cssVar.colorText};
|
|
56
|
+
}
|
|
57
|
+
`,
|
|
58
|
+
panel: css`
|
|
59
|
+
display: flex;
|
|
60
|
+
flex-direction: column;
|
|
61
|
+
gap: 16px;
|
|
62
|
+
`,
|
|
63
|
+
root: css`
|
|
64
|
+
display: flex;
|
|
65
|
+
flex-direction: column;
|
|
66
|
+
gap: 20px;
|
|
67
|
+
|
|
68
|
+
inline-size: 100%;
|
|
69
|
+
max-inline-size: 480px;
|
|
70
|
+
padding-block: 12px 16px;
|
|
71
|
+
padding-inline: 12px;
|
|
72
|
+
border: 1px solid ${cssVar.colorBorderSecondary};
|
|
73
|
+
border-radius: 16px;
|
|
74
|
+
|
|
75
|
+
background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);
|
|
76
|
+
backdrop-filter: blur(12px);
|
|
77
|
+
box-shadow:
|
|
78
|
+
0 1px 2px rgb(0 0 0 / 4%),
|
|
79
|
+
0 12px 32px rgb(0 0 0 / 6%);
|
|
80
|
+
`
|
|
81
|
+
}));
|
|
82
|
+
//#endregion
|
|
83
|
+
export { styles };
|
|
84
|
+
|
|
85
|
+
//# sourceMappingURL=style.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/awesome/AgentSkillCard/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n agent: css`\n display: inline-flex;\n flex: none;\n border-radius: 8px;\n transition: transform 140ms ease;\n\n &:hover {\n transform: translateY(-2px);\n }\n\n @media (prefers-reduced-motion: reduce) {\n &:hover {\n transform: none;\n }\n }\n `,\n agents: css`\n display: flex;\n flex-wrap: wrap;\n gap: 14px;\n justify-content: center;\n `,\n code: css`\n inline-size: 100%;\n text-align: start;\n `,\n description: css`\n margin: 0;\n\n font-size: 15px;\n font-weight: 500;\n line-height: 1.5;\n color: ${cssVar.colorText};\n text-align: center;\n text-wrap: balance;\n `,\n footer: css`\n display: flex;\n flex-wrap: wrap;\n gap: 16px;\n justify-content: center;\n\n font-size: ${cssVar.fontSizeSM};\n color: ${cssVar.colorTextTertiary};\n\n a {\n color: inherit;\n text-decoration: none;\n }\n\n a:hover {\n color: ${cssVar.colorText};\n }\n `,\n panel: css`\n display: flex;\n flex-direction: column;\n gap: 16px;\n `,\n root: css`\n display: flex;\n flex-direction: column;\n gap: 20px;\n\n inline-size: 100%;\n max-inline-size: 480px;\n padding-block: 12px 16px;\n padding-inline: 12px;\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: 16px;\n\n background: color-mix(in srgb, ${cssVar.colorBgElevated} 25%, transparent);\n backdrop-filter: blur(12px);\n box-shadow:\n 0 1px 2px rgb(0 0 0 / 4%),\n 0 12px 32px rgb(0 0 0 / 6%);\n `,\n}));\n"],"mappings":";;AAEA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,OAAO,GAAG;;;;;;;;;;;;;;;;CAgBV,QAAQ,GAAG;;;;;;CAMX,MAAM,GAAG;;;;CAIT,aAAa,GAAG;;;;;;aAML,OAAO,UAAU;;;;CAI5B,QAAQ,GAAG;;;;;;iBAMI,OAAO,WAAW;aACtB,OAAO,kBAAkB;;;;;;;;eAQvB,OAAO,UAAU;;;CAG9B,OAAO,GAAG;;;;;CAKV,MAAM,GAAG;;;;;;;;;wBASa,OAAO,qBAAqB;;;qCAGf,OAAO,gBAAgB;;;;;;AAM5D,EAAE"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { DivProps } from "../../types/index.mjs";
|
|
2
|
+
import { ElementType, ReactNode } from "react";
|
|
3
|
+
//#region src/awesome/AgentSkillCard/type.d.ts
|
|
4
|
+
type AgentSkillCardMode = 'agent' | 'human';
|
|
5
|
+
interface AgentSkillCardAgent {
|
|
6
|
+
/** An avatar component such as `ClaudeCode.Avatar` from `@lobehub/icons`, or a ready-made node. */
|
|
7
|
+
avatar: ElementType<{
|
|
8
|
+
size: number;
|
|
9
|
+
}> | ReactNode;
|
|
10
|
+
title: string;
|
|
11
|
+
}
|
|
12
|
+
interface AgentSkillCardPanel {
|
|
13
|
+
/** The text users copy: a prompt for agents, a shell command for humans. */
|
|
14
|
+
code: string;
|
|
15
|
+
/** One-line instruction above the code block. */
|
|
16
|
+
description?: ReactNode;
|
|
17
|
+
/** Tab label. Defaults to "I'm an Agent" / "I'm a Human". */
|
|
18
|
+
label?: ReactNode;
|
|
19
|
+
/** Renders the code with a `$` shell prompt. Defaults to true for the human panel. */
|
|
20
|
+
shell?: boolean;
|
|
21
|
+
}
|
|
22
|
+
interface AgentSkillCardProps extends DivProps {
|
|
23
|
+
/** Shown when the agent tab is active. */
|
|
24
|
+
agent: AgentSkillCardPanel;
|
|
25
|
+
/**
|
|
26
|
+
* Coding agents shown above the prompt. Pass an empty array to hide the row.
|
|
27
|
+
* @default DEFAULT_SKILL_AGENTS
|
|
28
|
+
*/
|
|
29
|
+
agents?: AgentSkillCardAgent[];
|
|
30
|
+
/** @default 'agent' */
|
|
31
|
+
defaultMode?: AgentSkillCardMode;
|
|
32
|
+
/** Extra content at the bottom of the card, e.g. links to skills.md and llms.txt. */
|
|
33
|
+
footer?: ReactNode;
|
|
34
|
+
/** Shown when the human tab is active. Without it the card has no tabs. */
|
|
35
|
+
human?: AgentSkillCardPanel;
|
|
36
|
+
mode?: AgentSkillCardMode;
|
|
37
|
+
onModeChange?: (mode: AgentSkillCardMode) => void;
|
|
38
|
+
}
|
|
39
|
+
//#endregion
|
|
40
|
+
export { AgentSkillCardAgent, AgentSkillCardMode, AgentSkillCardPanel, AgentSkillCardProps };
|
|
41
|
+
//# sourceMappingURL=type.d.mts.map
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { renderLandingLink } from "../landingLink.mjs";
|
|
3
|
+
import { styles } from "./style.mjs";
|
|
4
|
+
import { memo } from "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { cx } from "antd-style";
|
|
7
|
+
//#region src/awesome/BentoGrid/BentoCard.tsx
|
|
8
|
+
const BentoCard = memo(({ children, className, colSpan = 1, hint, href, renderLink, rowSpan = 1, style, title, ...rest }) => /* @__PURE__ */ jsxs("div", {
|
|
9
|
+
className: cx(styles.card, className),
|
|
10
|
+
"data-wide": colSpan > 2,
|
|
11
|
+
style: {
|
|
12
|
+
"--bento-col-span": colSpan,
|
|
13
|
+
"--bento-row-span": rowSpan,
|
|
14
|
+
...style
|
|
15
|
+
},
|
|
16
|
+
...rest,
|
|
17
|
+
children: [(title || hint) && /* @__PURE__ */ jsxs("div", {
|
|
18
|
+
className: styles.header,
|
|
19
|
+
children: [title && (href ? renderLandingLink(renderLink, {
|
|
20
|
+
children: title,
|
|
21
|
+
className: styles.title,
|
|
22
|
+
href
|
|
23
|
+
}) : /* @__PURE__ */ jsx("span", {
|
|
24
|
+
className: styles.title,
|
|
25
|
+
children: title
|
|
26
|
+
})), hint && /* @__PURE__ */ jsx("span", {
|
|
27
|
+
className: styles.hint,
|
|
28
|
+
children: hint
|
|
29
|
+
})]
|
|
30
|
+
}), /* @__PURE__ */ jsx("div", {
|
|
31
|
+
className: styles.body,
|
|
32
|
+
children
|
|
33
|
+
})]
|
|
34
|
+
}));
|
|
35
|
+
BentoCard.displayName = "BentoCard";
|
|
36
|
+
//#endregion
|
|
37
|
+
export { BentoCard as default };
|
|
38
|
+
|
|
39
|
+
//# sourceMappingURL=BentoCard.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"BentoCard.mjs","names":[],"sources":["../../../src/awesome/BentoGrid/BentoCard.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type CSSProperties, memo } from 'react';\n\nimport { renderLandingLink } from '@/awesome/landingLink';\n\nimport { styles } from './style';\nimport type { BentoCardProps } from './type';\n\nconst BentoCard = memo<BentoCardProps>(\n ({\n children,\n className,\n colSpan = 1,\n hint,\n href,\n renderLink,\n rowSpan = 1,\n style,\n title,\n ...rest\n }) => (\n <div\n className={cx(styles.card, className)}\n data-wide={colSpan > 2}\n style={\n { '--bento-col-span': colSpan, '--bento-row-span': rowSpan, ...style } as CSSProperties\n }\n {...rest}\n >\n {(title || hint) && (\n <div className={styles.header}>\n {title &&\n (href ? (\n renderLandingLink(renderLink, { children: title, className: styles.title, href })\n ) : (\n <span className={styles.title}>{title}</span>\n ))}\n {hint && <span className={styles.hint}>{hint}</span>}\n </div>\n )}\n <div className={styles.body}>{children}</div>\n </div>\n ),\n);\n\nBentoCard.displayName = 'BentoCard';\n\nexport default BentoCard;\n"],"mappings":";;;;;;;AAUA,MAAM,YAAY,MACf,EACC,UACA,WACA,UAAU,GACV,MACA,MACA,YACA,UAAU,GACV,OACA,OACA,GAAG,WAEH,qBAAC,OAAD;CACE,WAAW,GAAG,OAAO,MAAM,SAAS;CACpC,aAAW,UAAU;CACrB,OACE;EAAE,oBAAoB;EAAS,oBAAoB;EAAS,GAAG;CAAM;CAEvE,GAAI;CANN,UAAA,EAQI,SAAS,SACT,qBAAC,OAAD;EAAK,WAAW,OAAO;EAAvB,UAAA,CACG,UACE,OACC,kBAAkB,YAAY;GAAE,UAAU;GAAO,WAAW,OAAO;GAAO;EAAK,CAAC,IAEhF,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAQ,UAAA;EAAY,CAAA,IAE/C,QAAQ,oBAAC,QAAD;GAAM,WAAW,OAAO;GAAO,UAAA;EAAW,CAAA,CAChD;CAEP,CAAA,GAAA,oBAAC,OAAD;EAAK,WAAW,OAAO;EAAO;CAAc,CAAA,CACzC;AAET,CAAA,CAAA;AAEA,UAAU,cAAc"}
|