@modern-js/devtools-client 2.34.0 → 2.35.1

package/src/.eslintrc.js

@@ -1,3 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
 // eslint-disable-next-line import/no-commonjs
 module.exports = {
   root: true,
@@ -6,4 +7,7 @@ module.exports = {
     tsconfigRootDir: __dirname,
     project: ['../tsconfig.json'],
   },
+  rules: {
+    curly: 'off',
+  },
 };

package/src/components/Breadcrumbs.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Button, Flex } from '@radix-ui/themes';
+import { ChevronRightIcon } from '@radix-ui/react-icons';
+import type { ButtonProps } from '@radix-ui/themes/dist/cjs/components/button';
+
+export type BreadcrumbButtonProps = ButtonProps &
+  React.RefAttributes<HTMLButtonElement>;
+
+export const BreadcrumbButton: React.FC<BreadcrumbButtonProps> = props => {
+  return <Button color="gray" size="1" variant="ghost" {...props} />;
+};
+
+export interface BreadcrumbsProps {
+  children?: React.ReactElement[];
+}
+
+export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children = [] }) => {
+  const elements: React.ReactElement[] = [];
+  for (const child of children) {
+    elements.push(child);
+    if (child !== children.at(-1)) {
+      elements.push(<Connector key={`${child.key}__connector`} />);
+    }
+  }
+  return (
+    <Flex align="center" gap="1">
+      {elements}
+    </Flex>
+  );
+};
+
+(Breadcrumbs as any).Button = BreadcrumbButton;
+
+export default Breadcrumbs as typeof Breadcrumbs & {
+  Button: typeof BreadcrumbButton;
+};
+
+const Connector = styled(ChevronRightIcon)({
+  width: 'var(--font-size-2)',
+  height: 'var(--font-size-2)',
+  color: 'var(--gray-6)',
+});

package/src/components/ObjectInspector.tsx

@@ -0,0 +1,37 @@
+import styled from '@emotion/styled';
+import { Box } from '@radix-ui/themes';
+import type { Theme } from 'react-base16-styling';
+import { JSONTree } from 'react-json-tree';
+
+const theme: Theme = {
+  scheme: 'tomorrow',
+  author: 'chris kempson (http://chriskempson.com)',
+  base00: 'transparent',
+  base01: '#282a2e',
+  base02: '#373b41',
+  base03: '#969896',
+  base04: '#b4b7b4',
+  base05: '#c5c8c6',
+  base06: '#e0e0e0',
+  base07: '#ffffff',
+  base08: '#cc6666',
+  base09: '#de935f',
+  base0A: '#f0c674',
+  base0B: '#b5bd68',
+  base0C: '#8abeb7',
+  base0D: '#81a2be',
+  base0E: '#b294bb',
+  base0F: '#a3685a',
+};
+
+const Container = styled(Box)({
+  fontSize: 'var(--font-size-2)',
+});
+
+export const ObjectInspector: typeof JSONTree = props => {
+  return (
+    <Container>
+      <JSONTree theme={theme} {...props} />
+    </Container>
+  );
+};

package/src/constants.tsx

@@ -0,0 +1,34 @@
+import {
+  HomeIcon,
+  MixerHorizontalIcon,
+  FileTextIcon,
+  CubeIcon,
+} from '@radix-ui/react-icons';
+import { InternalTab } from './types';
+
+export const getDefaultTabs = (): InternalTab[] => [
+  {
+    name: 'overview',
+    title: 'Overview',
+    icon: <HomeIcon />,
+    view: { type: 'builtin', url: '/overview' },
+  },
+  {
+    name: 'config',
+    title: 'Config',
+    icon: <MixerHorizontalIcon />,
+    view: { type: 'builtin', url: '/config' },
+  },
+  {
+    name: 'pages',
+    title: 'Pages',
+    icon: <FileTextIcon />,
+    view: { type: 'builtin', url: '/pages' },
+  },
+  {
+    name: 'context',
+    title: 'Context',
+    icon: <CubeIcon />,
+    view: { type: 'builtin', url: '/context' },
+  },
+];

package/src/routes/RootTabs.tsx

@@ -0,0 +1,148 @@
+import { Suspense } from 'react';
+import styled from '@emotion/styled';
+import { useSnapshot } from 'valtio';
+import { Outlet, useNavigate, useLocation } from '@modern-js/runtime/router';
+import { Box, Text, Button } from '@radix-ui/themes';
+import _ from 'lodash';
+import { GearIcon, HomeIcon } from '@radix-ui/react-icons';
+import { useStore } from '@/stores';
+import { InternalTab } from '@/types';
+import Breadcrumbs from '@/components/Breadcrumbs';
+
+export const RootTabs: React.FC = () => {
+  const $store = useStore();
+  const tabs = useSnapshot($store.tabs);
+
+  const navigate = useNavigate();
+  const location = useLocation();
+  const currentTabName = location.pathname.split('/').filter(Boolean)[0];
+  const currentTab = _.find(tabs, { name: currentTabName });
+
+  const handleClick = (tab: InternalTab) => {
+    if (tab.view.type === 'builtin') {
+      navigate(tab.view.url);
+    } else {
+      throw new Error('Unimplemented.');
+    }
+  };
+
+  return (
+    <TabRoot>
+      <TabNavigator>
+        <TabList style={{ touchAction: 'none' }}>
+          <TabBrand>
+            <IconBox>🌰</IconBox>
+            DevTools
+          </TabBrand>
+        </TabList>
+        <TabList>
+          {tabs.map(tab => (
+            <TabTrigger
+              key={tab.name}
+              value={tab.name}
+              onClick={() => handleClick(tab as any)}
+            >
+              <IconBox>{tab.icon as any}</IconBox>
+              {tab.title}
+            </TabTrigger>
+          ))}
+        </TabList>
+        <Box grow="1" />
+        <SettingButton>
+          <GearIcon />
+          <Text>Settings</Text>
+        </SettingButton>
+      </TabNavigator>
+      <TabContent>
+        <Box grow="0">
+          <Breadcrumbs>
+            <Breadcrumbs.Button onClick={() => navigate('overview')}>
+              <HomeIcon />
+            </Breadcrumbs.Button>
+            <Breadcrumbs.Button>{currentTab?.title}</Breadcrumbs.Button>
+          </Breadcrumbs>
+        </Box>
+        <Box grow="1" style={{ overflow: 'hidden' }}>
+          <Suspense fallback={<div>loading...</div>}>
+            <Outlet />
+          </Suspense>
+        </Box>
+      </TabContent>
+    </TabRoot>
+  );
+};
+
+const SettingButton = styled(Button)({
+  '--accent-9': 'var(--gray-5)',
+  '--accent-10': 'var(--gray-6)',
+});
+
+const IconBox = styled(Box)({
+  width: '2rem',
+  height: '2rem',
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+});
+
+const TabNavigator = styled(Box)({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: 'var(--block-gap)',
+});
+
+const TabRoot = styled(Box)({
+  '--block-gap': '0.5rem',
+  '--block-color': '#121212',
+  display: 'flex',
+  padding: 'var(--block-gap)',
+  gap: 'var(--block-gap)',
+  alignItems: 'stretch',
+  height: '100%',
+  width: '100%',
+});
+
+const TabList = styled(Box)({
+  flex: 'none',
+  width: '10rem',
+  height: 'min-content',
+  backgroundColor: 'var(--block-color)',
+  borderRadius: 'var(--radius-4)',
+});
+
+const TabTrigger = styled.button({
+  border: 'none',
+  backgroundColor: 'transparent',
+  display: 'flex',
+  alignItems: 'center',
+  height: '3rem',
+  width: '100%',
+  color: 'var(--gray-11)',
+  fontSize: 'var(--font-size-2)',
+  transition: 'color 200ms',
+  fontWeight: 'bold',
+  cursor: 'pointer',
+  ':focus': {
+    color: 'white',
+  },
+});
+
+const TabBrand = styled(TabTrigger)({
+  color: 'var(--gray-10)',
+  cursor: 'default',
+  ':focus': {
+    color: 'var(--gray-10)',
+  },
+});
+
+const TabContent = styled(Box)({
+  flex: 1,
+  flexDirection: 'column',
+  alignItems: 'stretch',
+  display: 'flex',
+  gap: 'var(--space-3)',
+  overflow: 'hidden',
+  backgroundColor: 'var(--block-color)',
+  borderRadius: 'var(--radius-4)',
+  padding: '1rem',
+});

package/src/routes/config/builder/resolved/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return (
+    <ObjectInspector
+      data={store.builder.config.resolved}
+      sortObjectKeys={true}
+    />
+  );
+};
+
+export default Page;

package/src/routes/config/builder/transformed/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return (
+    <ObjectInspector
+      data={store.builder.config.transformed}
+      sortObjectKeys={true}
+    />
+  );
+};
+
+export default Page;

package/src/routes/config/bundler/resolved/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return (
+    <ObjectInspector
+      data={store.bundler.config.resolved}
+      sortObjectKeys={true}
+    />
+  );
+};
+
+export default Page;

package/src/routes/config/bundler/transformed/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return (
+    <ObjectInspector
+      data={store.bundler.config.transformed}
+      sortObjectKeys={true}
+    />
+  );
+};
+
+export default Page;

package/src/routes/config/framework/resolved/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return (
+    <ObjectInspector
+      data={store.framework.config.resolved}
+      sortObjectKeys={true}
+    />
+  );
+};
+
+export default Page;

package/src/routes/config/framework/transformed/page.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return (
+    <ObjectInspector
+      data={store.framework.config.transformed}
+      sortObjectKeys={true}
+    />
+  );
+};
+
+export default Page;

package/src/routes/config/layout.tsx

@@ -0,0 +1,68 @@
+import { Suspense } from 'react';
+import { Outlet, useNavigate } from '@modern-js/runtime/router';
+import { Box, ScrollArea, Select } from '@radix-ui/themes';
+import styled from '@emotion/styled';
+
+export default function Layout() {
+  const navigate = useNavigate();
+  const handleSelect = (route: string) => {
+    navigate(route);
+  };
+  return (
+    <Container>
+      <Box grow="0">
+        <Select.Root
+          onValueChange={handleSelect}
+          defaultValue="builder/transformed"
+        >
+          <Select.Trigger />
+          <Select.Content position="popper">
+            <Select.Group>
+              <Select.Label>Framework</Select.Label>
+              <Select.Item value="framework/resolved">
+                Resolved Framework Config
+              </Select.Item>
+              <Select.Item value="framework/transformed">
+                Transformed Framework Config
+              </Select.Item>
+            </Select.Group>
+            <Select.Separator />
+            <Select.Group>
+              <Select.Label>Builder</Select.Label>
+              <Select.Item value="builder/resolved">
+                Resolved Builder Config
+              </Select.Item>
+              <Select.Item value="builder/transformed">
+                Transformed Builder Config
+              </Select.Item>
+            </Select.Group>
+            <Select.Separator />
+            <Select.Group>
+              <Select.Label>Bundler</Select.Label>
+              <Select.Item value="bundler/resolved">
+                Resolved Bundler Configs
+              </Select.Item>
+              <Select.Item value="bundler/transformed">
+                Transformed Bundler Configs
+              </Select.Item>
+            </Select.Group>
+          </Select.Content>
+        </Select.Root>
+      </Box>
+      <Box grow="1" asChild>
+        <ScrollArea scrollbars="both">
+          <Suspense fallback={'loading...'}>
+            <Outlet />
+          </Suspense>
+        </ScrollArea>
+      </Box>
+    </Container>
+  );
+}
+
+const Container = styled(Box)({
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'stretch',
+});

package/src/routes/config/page.loader.ts

@@ -0,0 +1,7 @@
+import { LoaderFunctionArgs, redirect } from '@modern-js/runtime/router';
+import { resolveURL } from 'ufo';
+
+export default ({ request }: LoaderFunctionArgs) => {
+  const target = resolveURL(request.url, './builder/transformed');
+  return redirect(target);
+};

package/src/routes/config/page.tsx

@@ -0,0 +1 @@
+export default null;

package/src/routes/context/builder/page.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return <ObjectInspector data={store.builder.context} sortObjectKeys={true} />;
+};
+
+export default Page;

package/src/routes/context/framework/page.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { useSnapshot } from 'valtio';
+import { useStore } from '@/stores';
+import { ObjectInspector } from '@/components/ObjectInspector';
+
+const Page: React.FC = () => {
+  const $store = useStore();
+  const store = useSnapshot($store);
+  return (
+    <ObjectInspector data={store.framework.context} sortObjectKeys={true} />
+  );
+};
+
+export default Page;

package/src/routes/context/layout.tsx

@@ -0,0 +1,38 @@
+import { Suspense } from 'react';
+import { Outlet, useNavigate } from '@modern-js/runtime/router';
+import { Box, ScrollArea, Select } from '@radix-ui/themes';
+import styled from '@emotion/styled';
+
+export default function Layout() {
+  const navigate = useNavigate();
+  const handleSelect = (route: string) => {
+    navigate(route);
+  };
+  return (
+    <Container>
+      <Box grow="0">
+        <Select.Root onValueChange={handleSelect} defaultValue="builder">
+          <Select.Trigger />
+          <Select.Content position="popper">
+            <Select.Item value="framework">Framework Context</Select.Item>
+            <Select.Item value="builder">Builder Context</Select.Item>
+          </Select.Content>
+        </Select.Root>
+      </Box>
+      <Box grow="1" asChild>
+        <ScrollArea scrollbars="both">
+          <Suspense fallback={'loading...'}>
+            <Outlet />
+          </Suspense>
+        </ScrollArea>
+      </Box>
+    </Container>
+  );
+}
+
+const Container = styled(Box)({
+  height: '100%',
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'stretch',
+});

package/src/routes/context/page.loader.ts

@@ -0,0 +1,7 @@
+import { LoaderFunctionArgs, redirect } from '@modern-js/runtime/router';
+import { resolveURL } from 'ufo';
+
+export default ({ request }: LoaderFunctionArgs) => {
+  const target = resolveURL(request.url, './builder');
+  return redirect(target);
+};

package/src/routes/context/page.tsx

@@ -0,0 +1 @@
+export default null;

package/src/routes/layout.css

@@ -0,0 +1,3 @@
+body {
+  margin: 0;
+}

package/src/routes/layout.tsx

@@ -0,0 +1,25 @@
+import '@radix-ui/themes/styles.css';
+import './layout.css';
+import styled from '@emotion/styled';
+import { Box, Theme } from '@radix-ui/themes';
+import { RootTabs } from './RootTabs';
+import { StoreContextProvider } from '@/stores';
+
+export default function Layout() {
+  return (
+    <StoreContextProvider>
+      <Theme appearance="dark" className="dark">
+        <AppContainer>
+          <RootTabs />
+        </AppContainer>
+      </Theme>
+    </StoreContextProvider>
+  );
+}
+
+const AppContainer = styled(Box)({
+  width: '100vw',
+  height: '100vh',
+  overflow: 'hidden',
+  backgroundColor: '#090909',
+});

package/src/routes/overview/heading.svg

@@ -0,0 +1,12 @@
+<svg width="455.127" height="76.954" viewBox="0 0 455.127 76.954" xmlns="http://www.w3.org/2000/svg">
+  <g id="svgGroup" stroke-linecap="round" fill-rule="evenodd" font-size="9pt" stroke="#d6d8db" stroke-width="0.25mm" fill="#d6d8db" style="stroke:#d6d8db;stroke-width:0.25mm;fill:#d6d8db">
+    <path d="M 23.096 75.977 L 0 75.977 L 0 4.59 L 24.707 4.59 A 55.919 55.919 0 0 1 33.49 5.243 Q 38.313 6.01 42.334 7.681 A 32.184 32.184 0 0 1 44.238 8.545 Q 52.246 12.5 56.421 20.117 A 32.438 32.438 0 0 1 59.678 29.175 Q 60.481 33.044 60.581 37.488 A 56.775 56.775 0 0 1 60.596 38.77 A 55.441 55.441 0 0 1 59.943 47.517 Q 58.856 54.315 55.957 59.473 Q 51.318 67.725 42.896 71.851 Q 34.473 75.977 23.096 75.977 Z M 24.902 20.166 L 19.287 20.166 L 19.287 60.156 L 23.584 60.156 A 23.978 23.978 0 0 0 28.389 59.707 Q 33.591 58.641 36.475 55.054 A 15.925 15.925 0 0 0 39.053 50.244 Q 40.576 45.85 40.576 39.453 A 40.21 40.21 0 0 0 40.342 34.984 Q 39.94 31.39 38.843 28.687 A 14.688 14.688 0 0 0 36.837 25.153 A 11.922 11.922 0 0 0 33.643 22.29 A 13.658 13.658 0 0 0 29.587 20.664 Q 27.856 20.259 25.845 20.184 A 24.996 24.996 0 0 0 24.902 20.166 Z" id="0" vector-effect="non-scaling-stroke"/>
+    <path d="M 123.291 44.971 L 123.291 53.467 L 89.16 53.467 A 10.988 10.988 0 0 0 90.044 57.31 A 9.877 9.877 0 0 0 92.407 60.596 Q 95.41 63.379 101.27 63.379 Q 106.445 63.379 110.767 62.354 A 42.981 42.981 0 0 0 116.273 60.633 A 52.544 52.544 0 0 0 119.678 59.18 L 119.678 72.9 Q 115.674 75 110.938 75.977 A 41.172 41.172 0 0 1 107.079 76.567 Q 103.519 76.953 98.975 76.953 A 40.077 40.077 0 0 1 90.603 76.113 A 32.226 32.226 0 0 1 84.033 73.975 A 22.906 22.906 0 0 1 73.657 64.746 Q 70.368 59.314 69.938 51.19 A 47.413 47.413 0 0 1 69.873 48.682 Q 69.873 38.721 73.291 32.3 A 22.599 22.599 0 0 1 78.792 25.436 A 21.455 21.455 0 0 1 82.861 22.778 A 28.536 28.536 0 0 1 91.334 20.114 A 37.588 37.588 0 0 1 97.168 19.678 Q 105.083 19.678 110.877 22.388 A 24.328 24.328 0 0 1 111.084 22.485 Q 116.943 25.293 120.117 30.908 A 23.114 23.114 0 0 1 122.498 37.231 Q 123.13 40.033 123.258 43.284 A 42.733 42.733 0 0 1 123.291 44.971 Z M 89.551 41.455 L 105.957 41.455 A 11.664 11.664 0 0 0 105.553 38.576 A 10.108 10.108 0 0 0 104.98 37.012 Q 104.053 35.01 102.271 33.838 A 6.912 6.912 0 0 0 99.862 32.861 A 9.817 9.817 0 0 0 97.852 32.666 A 8.801 8.801 0 0 0 94.934 33.133 A 7.628 7.628 0 0 0 92.212 34.79 A 7.286 7.286 0 0 0 90.54 37.211 Q 90.08 38.257 89.817 39.557 A 16.942 16.942 0 0 0 89.551 41.455 Z" id="1" vector-effect="non-scaling-stroke"/>
+    <path d="M 167.48 75.977 L 148.584 75.977 L 127.49 20.654 L 147.412 20.654 L 156.787 53.369 Q 156.924 53.78 157.254 55.389 A 112.258 112.258 0 0 1 157.3 55.615 A 19.061 19.061 0 0 1 157.591 57.518 A 14.863 14.863 0 0 1 157.666 58.984 L 158.008 58.984 A 14.573 14.573 0 0 1 158.26 56.239 A 13.298 13.298 0 0 1 158.35 55.811 Q 158.611 54.652 158.787 53.893 A 136.744 136.744 0 0 1 158.887 53.467 L 168.701 20.654 L 188.574 20.654 L 167.48 75.977 Z" id="2" vector-effect="non-scaling-stroke"/>
+    <path d="M 227.783 20.361 L 227.783 75.977 L 208.496 75.977 L 208.496 20.361 L 191.064 20.361 L 191.064 4.59 L 245.166 4.59 L 245.166 20.361 L 227.783 20.361 Z" id="3" vector-effect="non-scaling-stroke"/>
+    <path d="M 306.662 54.35 A 43.23 43.23 0 0 0 307.08 48.193 Q 307.08 43.89 306.302 40.21 A 26.737 26.737 0 0 0 303.54 32.666 A 23.91 23.91 0 0 0 293.799 22.998 A 27.016 27.016 0 0 0 287.599 20.615 A 32.596 32.596 0 0 0 279.639 19.678 A 37.958 37.958 0 0 0 272.777 20.269 A 27.435 27.435 0 0 0 264.771 22.998 A 22.673 22.673 0 0 0 255.2 32.666 A 24.588 24.588 0 0 0 254.552 33.991 Q 251.855 39.95 251.855 48.193 A 41.077 41.077 0 0 0 252.243 53.961 A 30.674 30.674 0 0 0 253.882 60.498 A 28.789 28.789 0 0 0 254.738 62.531 A 24.022 24.022 0 0 0 259.619 69.531 A 24.539 24.539 0 0 0 268.335 75.073 A 28.236 28.236 0 0 0 272.567 76.29 A 33.502 33.502 0 0 0 279.346 76.953 A 39.162 39.162 0 0 0 284.365 76.643 A 30.239 30.239 0 0 0 290.918 75.073 A 26.901 26.901 0 0 0 291.395 74.893 A 23.287 23.287 0 0 0 299.658 69.531 Q 303.271 65.869 305.176 60.498 A 32.011 32.011 0 0 0 306.662 54.35 Z M 271.24 48.193 Q 271.24 52.93 272.07 56.177 Q 272.9 59.424 274.731 61.108 A 6.244 6.244 0 0 0 277.833 62.637 A 8.91 8.91 0 0 0 279.541 62.793 A 8.544 8.544 0 0 0 281.524 62.575 A 5.857 5.857 0 0 0 284.277 61.108 A 7.765 7.765 0 0 0 285.716 59.186 Q 286.195 58.303 286.547 57.212 A 15.643 15.643 0 0 0 286.841 56.177 A 24.171 24.171 0 0 0 287.332 53.532 Q 287.527 52.055 287.601 50.353 A 49.717 49.717 0 0 0 287.646 48.193 A 46.12 46.12 0 0 0 287.536 44.893 Q 287.348 42.279 286.841 40.283 Q 286.035 37.109 284.253 35.498 A 6.007 6.007 0 0 0 281.618 34.133 Q 280.696 33.904 279.609 33.888 A 11.184 11.184 0 0 0 279.443 33.887 A 8.132 8.132 0 0 0 276.824 34.285 Q 274.568 35.049 273.292 37.277 A 8.551 8.551 0 0 0 273.169 37.5 A 13.288 13.288 0 0 0 272.091 40.319 Q 271.24 43.492 271.24 48.193 Z" id="4" vector-effect="non-scaling-stroke"/>
+    <path d="M 370.382 54.35 A 43.23 43.23 0 0 0 370.801 48.193 Q 370.801 43.89 370.023 40.21 A 26.737 26.737 0 0 0 367.261 32.666 A 23.91 23.91 0 0 0 357.52 22.998 A 27.016 27.016 0 0 0 351.32 20.615 A 32.596 32.596 0 0 0 343.359 19.678 A 37.958 37.958 0 0 0 336.497 20.269 A 27.435 27.435 0 0 0 328.491 22.998 A 22.673 22.673 0 0 0 318.921 32.666 A 24.588 24.588 0 0 0 318.273 33.991 Q 315.576 39.95 315.576 48.193 A 41.077 41.077 0 0 0 315.964 53.961 A 30.674 30.674 0 0 0 317.603 60.498 A 28.789 28.789 0 0 0 318.458 62.531 A 24.022 24.022 0 0 0 323.34 69.531 A 24.539 24.539 0 0 0 332.056 75.073 A 28.236 28.236 0 0 0 336.287 76.29 A 33.502 33.502 0 0 0 343.066 76.953 A 39.162 39.162 0 0 0 348.086 76.643 A 30.239 30.239 0 0 0 354.639 75.073 A 26.901 26.901 0 0 0 355.116 74.893 A 23.287 23.287 0 0 0 363.379 69.531 Q 366.992 65.869 368.896 60.498 A 32.011 32.011 0 0 0 370.382 54.35 Z M 334.961 48.193 Q 334.961 52.93 335.791 56.177 Q 336.621 59.424 338.452 61.108 A 6.244 6.244 0 0 0 341.553 62.637 A 8.91 8.91 0 0 0 343.262 62.793 A 8.544 8.544 0 0 0 345.245 62.575 A 5.857 5.857 0 0 0 347.998 61.108 A 7.765 7.765 0 0 0 349.437 59.186 Q 349.916 58.303 350.268 57.212 A 15.643 15.643 0 0 0 350.562 56.177 A 24.171 24.171 0 0 0 351.052 53.532 Q 351.248 52.055 351.322 50.353 A 49.717 49.717 0 0 0 351.367 48.193 A 46.12 46.12 0 0 0 351.256 44.893 Q 351.068 42.279 350.562 40.283 Q 349.756 37.109 347.974 35.498 A 6.007 6.007 0 0 0 345.339 34.133 Q 344.416 33.904 343.329 33.888 A 11.184 11.184 0 0 0 343.164 33.887 A 8.132 8.132 0 0 0 340.545 34.285 Q 338.289 35.049 337.013 37.277 A 8.551 8.551 0 0 0 336.89 37.5 A 13.288 13.288 0 0 0 335.811 40.319 Q 334.961 43.492 334.961 48.193 Z" id="5" vector-effect="non-scaling-stroke"/>
+    <path d="M 400.781 0 L 400.781 75.977 L 381.689 75.977 L 381.689 0 L 400.781 0 Z" id="6" vector-effect="non-scaling-stroke"/>
+    <path d="M 411.719 73.877 L 411.719 58.594 A 46.942 46.942 0 0 0 422.363 62.036 Q 426.83 62.901 429.739 63.053 A 22.453 22.453 0 0 0 430.908 63.086 A 23.338 23.338 0 0 0 432.541 63.033 Q 434.538 62.892 435.62 62.378 A 3.273 3.273 0 0 0 436.357 61.909 A 2.089 2.089 0 0 0 437.109 60.254 Q 437.109 59.033 436.108 58.179 A 6.393 6.393 0 0 0 435.444 57.691 Q 434.691 57.202 433.504 56.638 A 34.704 34.704 0 0 0 432.544 56.201 Q 430.581 55.341 427.402 54.024 A 655.312 655.312 0 0 0 425.342 53.174 Q 420.752 51.27 417.7 49.023 A 15.29 15.29 0 0 1 414.486 45.872 A 13.596 13.596 0 0 1 413.135 43.652 A 14.224 14.224 0 0 1 412.024 40.293 Q 411.703 38.727 411.638 36.922 A 25.946 25.946 0 0 1 411.621 35.986 A 16.624 16.624 0 0 1 412.394 30.782 A 13.104 13.104 0 0 1 417.871 23.779 Q 423.083 20.359 431.115 19.791 A 46.937 46.937 0 0 1 434.424 19.678 A 44.511 44.511 0 0 1 441.957 20.296 A 38.904 38.904 0 0 1 444.727 20.874 A 56.912 56.912 0 0 1 451.218 22.917 A 69.134 69.134 0 0 1 454.736 24.365 L 449.512 36.67 Q 445.41 34.814 441.211 33.691 Q 437.323 32.652 434.9 32.575 A 11.911 11.911 0 0 0 434.521 32.568 Q 432.275 32.568 431.055 33.154 A 2.789 2.789 0 0 0 430.465 33.526 A 1.672 1.672 0 0 0 429.834 34.863 A 2.288 2.288 0 0 0 430.42 36.394 A 3.206 3.206 0 0 0 430.688 36.67 Q 431.337 37.263 432.872 37.997 A 28.563 28.563 0 0 0 433.936 38.477 Q 436.328 39.502 440.918 41.357 A 51.888 51.888 0 0 1 444.568 42.989 Q 446.261 43.83 447.675 44.717 A 27.253 27.253 0 0 1 448.901 45.532 A 14.95 14.95 0 0 1 452.141 48.593 A 13.247 13.247 0 0 1 453.589 50.928 A 14.028 14.028 0 0 1 454.64 54.032 Q 455.127 56.238 455.127 58.984 A 20.16 20.16 0 0 1 454.465 64.243 A 16.821 16.821 0 0 1 452.783 68.311 A 14.139 14.139 0 0 1 448.563 72.827 A 19.641 19.641 0 0 1 445.288 74.658 A 23.27 23.27 0 0 1 440.768 76.101 Q 438.568 76.58 435.986 76.79 A 52.548 52.548 0 0 1 431.738 76.953 A 94.534 94.534 0 0 1 426.473 76.814 Q 423.644 76.656 421.167 76.318 A 42.222 42.222 0 0 1 413.509 74.513 A 48.282 48.282 0 0 1 411.719 73.877 Z" id="7" vector-effect="non-scaling-stroke"/>
+  </g>
+</svg>