create-fate 0.0.0 → 1.0.0

package/templates/fate/drizzle/README.md

@@ -0,0 +1,112 @@
+<p align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="/public/fate-logo-dark.svg">
+    <source media="(prefers-color-scheme: light)" srcset="/public/fate-logo.svg">
+    <img alt="Logo" src="/public/fate-logo.svg" width="50%">
+  </picture>
+</p>
+
+**_fate_** is a modern data client for React inspired by [Relay](https://relay.dev/) and [GraphQL](https://graphql.org/). It combines view composition, normalized caching, data masking, Async React features, and type-safe data fetching.
+
+Check out [fate.technology](https://fate.technology) for documentation, examples, and guides.
+
+# _fate_ Quick Start Template
+
+Create a new fate app with Vite+:
+
+```bash
+vp create fate my-app --template drizzle
+```
+
+## Getting Started with _fate_
+
+Read the [Getting Started Guide](https://fate.technology/guide/core-concepts) to learn how to use _fate_ in your React applications.
+
+## Technologies
+
+This template combines the Nakazawa Tech's [Web App Template](https://github.com/nkzw-tech/web-app-template) and [Server Template](https://github.com/nkzw-tech/server-template) into a monorepo, with unified tooling and _fate_ as the data client. It uses tRPC with Drizzle.
+
+_This template lives on the edge._ It's a turbocharged starting point on top of an already optimized stack. It uses TypeScript Go, Vite+, and ships with sensible defaults to unlock an incredibly fast development experience. It follows the principles laid out in [Building Scalable Applications](https://www.youtube.com/watch?v=rxPTEko8J7c&t=36s).
+
+Next to [_fate_](https://fate.technology), it comes with the following technologies:
+
+### Client Technologies
+
+- [Vite 8](https://vitejs.dev/)
+- [React](https://reactjs.org/) with [React Compiler](https://react.dev/learn/react-compiler) enabled
+- [Tailwind](https://tailwindcss.com/)
+- [fbtee](https://github.com/nkzw-tech/fbtee) for i18n
+- [Better Auth](https://www.better-auth.com/) for authentication
+- [Void Pages Router](https://void.cloud/docs)
+- [TypeScript](https://www.typescriptlang.org)
+- [pnpm](https://pnpm.io/)
+
+### Server Technologies
+
+- [Drizzle](https://orm.drizzle.team/) as the ORM.
+- [tRPC](https://trpc.io/) for type-safe APIs.
+- [Hono](https://hono.dev/)
+- [Better Auth](https://better-auth.com/) for Authentication.
+
+### Folder Structure
+
+- `client/` - The React client application using _fate_.
+- `server/` - The fate server using tRPC with Drizzle.
+
+## Initial Setup
+
+You'll need Node.js 24+ and [Vite+](https://viteplus.dev/guide/).
+
+Install dependencies:
+
+```bash
+vp install
+```
+
+Review `server/.env`, which is copied from `server/.env.example` when the app is created. The default local values expect:
+
+- Postgres at `postgresql://fate:echo@localhost:5432/fate`.
+- The server at `http://localhost:9000`.
+- The client at `http://localhost:5173`.
+
+Start Postgres with Docker:
+
+```bash
+docker-compose up -d
+```
+
+Alternatively, create the database manually:
+
+```SQL
+CREATE ROLE fate WITH LOGIN PASSWORD 'echo';
+CREATE DATABASE fate;
+ALTER DATABASE fate OWNER TO fate;
+```
+
+Then set up the schema, seed data, translations, and generated fate client:
+
+```bash
+vp run dev:setup
+```
+
+Start the app:
+
+```bash
+vp run dev
+```
+
+The client runs at `http://localhost:5173` and the server runs at `http://localhost:9000`. tRPC requests go to `/trpc`; fate live updates use the SSE endpoint under `/fate/live`.
+
+## Development
+
+Common commands from the project root:
+
+- `vp run dev` starts the client and server together.
+- `vp run dev:client` starts only the client.
+- `vp run dev:server` starts only the server.
+- `vp run dev:setup` pushes the Drizzle schema, seeds the database, runs fbtee setup, and regenerates the fate client.
+- `vp run fate:generate` regenerates `client/.fate/client.generated.ts` after changing server views, roots, or routers.
+- `vp run drizzle` opens Drizzle Kit commands for the server package.
+- `vp check --fix` formats, lints, and type-checks the workspace.
+- `vp test` runs the test suite.
+- `vp run build` builds the client and server.

package/templates/fate/drizzle/_gitignore

@@ -0,0 +1,20 @@
+.fate/
+**/.fate/
+.void/
+**/.void/
+.eslintcache
+.pnpm-debug.log
+**/node_modules/
+/node_modules/
+client/.enum_manifest.json
+client/dist/
+client/source_strings.json
+client/src/translations/
+coverage/
+dist/
+server/.env
+server/.prod.env
+server/dist/
+server/src/prisma/prisma-client/
+tsconfig.tsbuildinfo
+vite.config.ts.timestamp-*

package/templates/fate/drizzle/client/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@app/client",
+  "version": "0.0.1",
+  "private": true,
+  "author": "Christoph Nakazawa <christoph.pojer@gmail.com>",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/nkzw-tech/fate.git"
+  },
+  "type": "module",
+  "scripts": {
+    "build": "vp build",
+    "dev": "vp dev",
+    "dev:setup": "vp run fbtee:all",
+    "fate:generate": "vp exec fate generate",
+    "fbtee:all": "vpx fbtee collect && vpx fbtee translate"
+  },
+  "dependencies": {
+    "@app/server": "workspace:*",
+    "@hono/node-server": "^2.0.1",
+    "@nkzw/core": "^1.3.1",
+    "@nkzw/define-env": "^1.1.0",
+    "@nkzw/stack": "^2.3.2",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@trpc/client": "^11.17.0",
+    "@void/react": "^0.7.5",
+    "better-auth": "^1.6.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "fbtee": "^1.7.4",
+    "lucide-react": "^1.14.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "react-error-boundary": "^6.1.1",
+    "react-fate": "latest",
+    "tailwind-merge": "^3.5.0",
+    "void": "^0.7.5"
+  },
+  "devDependencies": {
+    "@nkzw/babel-preset-fbtee": "^1.7.4",
+    "@rolldown/plugin-babel": "^0.2.3",
+    "@tailwindcss/vite": "^4.2.4",
+    "@trpc/server": "^11.17.0",
+    "@types/babel__core": "^7.20.5",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "tailwindcss": "^4.2.4",
+    "vite": "catalog:",
+    "vite-plus": "catalog:"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not op_mini all"
+  ]
+}

package/templates/fate/drizzle/client/pages/index.tsx

@@ -0,0 +1,96 @@
+import Stack, { VStack } from '@nkzw/stack';
+import { ConnectionRef, useListView, useRequest } from 'react-fate';
+import cx from '../src/lib/cx.tsx';
+import { Button } from '../src/ui/Button.tsx';
+import Card from '../src/ui/Card.tsx';
+import H2 from '../src/ui/H2.tsx';
+import Link from '../src/ui/Link.tsx';
+import { PostCard, PostView } from '../src/ui/PostCard.tsx';
+import Section from '../src/ui/Section.tsx';
+import UserCard, { UserView } from '../src/ui/UserCard.tsx';
+
+const PostConnectionView = {
+  args: { first: 3 },
+  items: {
+    node: PostView,
+  },
+  pagination: {
+    hasNext: true,
+  },
+};
+
+const PostFeed = ({ posts: postsRef }: { posts: ConnectionRef<'Post'> }) => {
+  const [posts, loadNext] = useListView(PostConnectionView, postsRef);
+
+  return posts.length ? (
+    <VStack gap={16}>
+      <H2 className="pl-5">
+        <fbt desc="Latest posts header">Latest posts</fbt>
+      </H2>
+      <VStack gap={32}>
+        {posts.map(({ node }) => (
+          <PostCard key={node.id} post={node} />
+        ))}
+        {loadNext ? (
+          <Stack center>
+            <Button onClick={loadNext} variant="ghost">
+              <fbt desc="Load more posts button">Load more posts</fbt>
+            </Button>
+          </Stack>
+        ) : null}
+      </VStack>
+    </VStack>
+  ) : null;
+};
+
+export default function HomePage() {
+  const { posts, viewer } = useRequest({
+    posts: { list: PostConnectionView },
+    viewer: { view: UserView },
+  });
+
+  return (
+    <Section gap={32}>
+      <div
+        className={cx('grid gap-8 lg:items-stretch', viewer?.id ? 'lg:grid-cols-[1.6fr_1fr]' : '')}
+      >
+        <Card className="border border-white/20 bg-linear-to-r from-blue-500 to-sky-500 text-white dark:from-blue-600 dark:to-sky-600">
+          <Stack alignCenter gap={12} wrap>
+            <span className="squircle bg-white/20 px-2 py-1 text-xs font-semibold tracking-widest uppercase">
+              <span className="lowercase italic">fate</span> demo
+            </span>
+          </Stack>
+          <div className="space-y-3">
+            <h1 className="text-3xl leading-tight font-semibold text-balance lg:text-4xl">
+              <fbt desc="Description of fate">
+                fate is a modern data client for React inspired by Relay and GraphQL.
+              </fbt>
+            </h1>
+            <p className="text-sm text-white/80 lg:text-base">
+              <fbt desc="Tagline for fate">
+                fate combines view composition, normalized caching, data masking, Async React
+                features, and type-safe data fetching.
+              </fbt>
+            </p>
+          </div>
+          <Stack alignCenter gap={12} wrap>
+            {!viewer?.id && (
+              <>
+                <Button asChild size="sm" variant="secondary">
+                  <Link className="squircle px-4 py-2 text-sm font-semibold" to="/login">
+                    <fbt desc="Login button">Login</fbt>
+                  </Link>
+                </Button>
+                <span className="text-sm text-white/80">
+                  <fbt desc="Login button label">Sign in to post comments.</fbt>
+                </span>
+              </>
+            )}
+          </Stack>
+        </Card>
+        {viewer?.id && <UserCard user={viewer} />}
+      </div>
+      <PostFeed posts={posts} />
+    </Section>
+  );
+}

package/templates/fate/drizzle/client/pages/layout.tsx

@@ -0,0 +1,104 @@
+/// <reference types="fbtee/ReactTypes.d.ts" />
+
+import '../src/App.css';
+import Stack from '@nkzw/stack';
+import { httpBatchLink } from '@trpc/client';
+import { createLocaleContext } from 'fbtee';
+import { ReactNode, Suspense, useMemo } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { FateClient } from 'react-fate';
+import { createFateClient } from 'react-fate/client';
+import AvailableLanguages from '../src/lib/AvailableLanguages.tsx';
+import env from '../src/lib/env.tsx';
+import Card from '../src/ui/Card.tsx';
+import Error from '../src/ui/Error.tsx';
+import Header from '../src/ui/Header.tsx';
+import Section from '../src/ui/Section.tsx';
+import AuthClient from '../src/user/AuthClient.tsx';
+
+const Thinking = () => (
+  <Section>
+    <Stack center className="animate-pulse text-gray-500 italic" verticalPadding={48}>
+      <fbt desc="Text for thinking/loading screen">Thinking...</fbt>
+    </Stack>
+  </Section>
+);
+
+const LocaleContext = createLocaleContext({
+  availableLanguages: AvailableLanguages,
+  clientLocales: [navigator.language, ...navigator.languages],
+  loadLocale: async (locale: string) => {
+    if (locale !== 'en_US' && AvailableLanguages.has(locale)) {
+      return (await import(`../src/translations/${locale}.json`)).default[locale];
+    }
+
+    return {};
+  },
+});
+
+export default function Layout({ children }: { children: ReactNode }) {
+  const { data: session, isPending } = AuthClient.useSession();
+  const userId = session?.user.id;
+
+  const fate = useMemo(
+    () =>
+      createFateClient({
+        links: [
+          httpBatchLink({
+            fetch: (input, init) =>
+              fetch(input, {
+                ...init,
+                credentials: userId ? 'include' : undefined,
+              }),
+            url: `${env('SERVER_URL')}/trpc`,
+          }),
+        ],
+        liveUrl: `${env('SERVER_URL')}/fate`,
+        ...(userId
+          ? {
+              fetch: (input: RequestInfo | URL, init?: RequestInit) =>
+                fetch(input, {
+                  ...init,
+                  credentials: 'include',
+                }),
+            }
+          : null),
+      }),
+    [userId],
+  );
+
+  if (isPending) {
+    return (
+      <LocaleContext>
+        <div className="min-h-screen bg-background text-foreground">
+          <div className="min-h-screen bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.08),transparent_35%),radial-gradient(circle_at_80%_0,rgba(99,102,241,0.08),transparent_28%)]">
+            <Thinking />
+          </div>
+        </div>
+      </LocaleContext>
+    );
+  }
+
+  return (
+    <LocaleContext>
+      <FateClient client={fate} key={userId}>
+        <div className="min-h-screen bg-background text-foreground">
+          <div className="min-h-screen bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.08),transparent_35%),radial-gradient(circle_at_80%_0,rgba(99,102,241,0.08),transparent_28%)]">
+            <Header />
+            <ErrorBoundary
+              fallbackRender={({ error }) => (
+                <Section>
+                  <Card>
+                    <Error error={error} />
+                  </Card>
+                </Section>
+              )}
+            >
+              <Suspense fallback={<Thinking />}>{children}</Suspense>
+            </ErrorBoundary>
+          </div>
+        </div>
+      </FateClient>
+    </LocaleContext>
+  );
+}

package/templates/fate/drizzle/client/pages/login.tsx

@@ -0,0 +1,107 @@
+import Stack, { VStack } from '@nkzw/stack';
+import { useRouter } from '@void/react';
+import { fbs } from 'fbtee';
+import { ExternalLinkIcon } from 'lucide-react';
+import { useActionState, useEffect, useState } from 'react';
+import { AsyncButton } from '../src/ui/Button.tsx';
+import Card from '../src/ui/Card.tsx';
+import H2 from '../src/ui/H2.tsx';
+import Input from '../src/ui/Input.tsx';
+import Section from '../src/ui/Section.tsx';
+import AuthClient from '../src/user/AuthClient.tsx';
+
+export default function LoginPage() {
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+  const router = useRouter();
+  const { data: session } = AuthClient.useSession();
+
+  const [, signInAction] = useActionState(async () => {
+    await AuthClient.signIn.email(
+      {
+        email,
+        password,
+      },
+      {
+        onError: () => {},
+        onRequest: () => {},
+        onSuccess: () => {
+          router.flushAll();
+          void router.visit('/', { replace: true });
+        },
+      },
+    );
+
+    return null;
+  }, null);
+
+  useEffect(() => {
+    if (session) {
+      router.flushAll();
+      void router.visit('/', { replace: true });
+    }
+  }, [router, session]);
+
+  if (session) {
+    return null;
+  }
+
+  return (
+    <Section>
+      <VStack center gap={16}>
+        <H2 className="pl-5">
+          <fbt desc="Sign In headline">Sign In</fbt>
+        </H2>
+        <Stack gap={32} wrap>
+          <Card className="w-84">
+            <Stack gap vertical>
+              <VStack action={signInAction} as="form" gap={12}>
+                <Input
+                  className="w-48"
+                  name="email"
+                  onChange={(e) => setEmail(e.target.value)}
+                  placeholder={fbs('email', 'Email placeholder')}
+                  type="email"
+                  value={email}
+                />
+                <Input
+                  className="w-48"
+                  name="password"
+                  onChange={(e) => setPassword(e.target.value)}
+                  placeholder={fbs('password', 'Password placeholder')}
+                  type="password"
+                  value={password}
+                />
+                <div>
+                  <AsyncButton type="submit" variant="outline">
+                    <fbt desc="Sign in button">Sign In</fbt>
+                  </AsyncButton>
+                </div>
+              </VStack>
+            </Stack>
+          </Card>
+          <Card className="w-84">
+            <p>
+              <fbt desc="Login details">
+                Try one of the
+                <Stack
+                  alignCenter
+                  as="a"
+                  className="inline-flex! px-1 underline hover:no-underline"
+                  gap={4}
+                  href="https://github.com/nkzw-tech/fate/blob/main/packages/create-fate/templates/fate/drizzle/server/src/drizzle/seedData.ts#L1"
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  Example Accounts
+                  <ExternalLinkIcon className="h-4 w-4" />
+                </Stack>{' '}
+                in the seed data.
+              </fbt>
+            </p>
+          </Card>
+        </Stack>
+      </VStack>
+    </Section>
+  );
+}

package/templates/fate/drizzle/client/pages/post/[id].tsx

@@ -0,0 +1,22 @@
+import { useParams } from '@void/react';
+import { useRequest } from 'react-fate';
+import { PostCard, PostView } from '../../src/ui/PostCard.tsx';
+import Section from '../../src/ui/Section.tsx';
+
+export default function PostPage() {
+  const { id } = useParams<{ id: string }>();
+
+  if (!id) {
+    throw new Error('fate: Post ID is required.');
+  }
+
+  const { post } = useRequest({
+    post: { id, view: PostView },
+  });
+
+  return (
+    <Section>
+      <PostCard detail post={post} />
+    </Section>
+  );
+}

package/templates/fate/drizzle/client/pages/search.tsx

@@ -0,0 +1,95 @@
+import type { Comment, Post } from '@app/server/src/trpc/views.ts';
+import Stack, { VStack } from '@nkzw/stack';
+import { fbs } from 'fbtee';
+import { Suspense, useDeferredValue, useState } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
+import { useRequest, useView, view, ViewRef } from 'react-fate';
+import cx from '../src/lib/cx.tsx';
+import Card from '../src/ui/Card.tsx';
+import CommentCard, { CommentView } from '../src/ui/CommentCard.tsx';
+import Error from '../src/ui/Error.tsx';
+import Input from '../src/ui/Input.tsx';
+import Section from '../src/ui/Section.tsx';
+
+const CommentPostView = view<Post>()({
+  commentCount: true,
+  id: true,
+  title: true,
+});
+
+const CommentSearchView = view<Comment>()({
+  ...CommentView,
+  id: true,
+  post: CommentPostView,
+});
+
+const CommentResult = ({ comment: commentRef }: { comment: ViewRef<'Comment'> }) => {
+  const comment = useView(CommentSearchView, commentRef);
+  const post = useView(CommentPostView, comment.post);
+
+  return <CommentCard comment={comment} link post={post} />;
+};
+
+const SearchResults = ({ isStale, query }: { isStale: boolean; query: string }) => {
+  const { commentSearch } = useRequest({
+    commentSearch: { args: { query }, list: CommentSearchView },
+  });
+
+  if (commentSearch.length === 0) {
+    return (
+      <p>
+        <fbt desc="No matches text">
+          No matches for{' '}
+          <i>
+            &quot;<fbt:param name="query">{query}</fbt:param>&quot;
+          </i>
+        </fbt>
+      </p>
+    );
+  }
+
+  return (
+    <VStack className={cx(isStale && 'opacity-50')} gap={12}>
+      {commentSearch.map((comment) => (
+        <CommentResult comment={comment} key={comment.id} />
+      ))}
+    </VStack>
+  );
+};
+
+export default function SearchPage() {
+  const [query, setQuery] = useState('');
+  const deferredQuery = useDeferredValue(query);
+  const isStale = query !== deferredQuery;
+
+  return (
+    <Section>
+      <Card>
+        <Stack alignCenter between gap={16}>
+          <Input
+            className="w-64"
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder={fbs('Search comments...', 'Search input placeholder')}
+            ref={(ref) => ref?.focus()}
+            value={query}
+          />
+          <div className="text-xs text-muted-foreground">
+            <fbt desc="Slowdown label explanation">500ms artificial slowdown</fbt>
+          </div>
+        </Stack>
+
+        <ErrorBoundary FallbackComponent={Error}>
+          <Suspense
+            fallback={
+              <h2>
+                <fbt desc="Text for thinking/loading screen">Thinking…</fbt>
+              </h2>
+            }
+          >
+            {query.trim().length > 0 ? <SearchResults isStale={isStale} query={query} /> : null}
+          </Suspense>
+        </ErrorBoundary>
+      </Card>
+    </Section>
+  );
+}

package/templates/fate/drizzle/client/public/icon.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMax" viewBox="0 0 160 160"><path d="M108.301 17.465h.272c1.797-.005 3.563.177 5.331.496l.349.063c5.588 1.02 10.731 3.447 15.201 6.933l.347.267c1.579 1.26 3.083 2.684 4.386 4.227l.161.186c4.018 4.719 6.924 10.686 7.767 16.852l.033.239c.262 1.848.351 3.688.352 5.551l.001.307c-.001 1.623-.092 3.188-.386 4.788l-.05.292c-1.003 5.874-3.476 11.447-7.286 16.034l-.29.358c-1.422 1.721-3.011 3.382-4.797 4.729l-.444.354c-3.046 2.405-6.436 4.147-10.084 5.442l-.497.186c-1.766.627-3.615.974-5.465 1.266l-.364.058c-1.591.238-3.185.286-4.791.281h-.499l-1.339-.002h-1.408c-.886-.001-1.772-.001-2.656-.003-3.085-.001-6.163-.005-9.247-.008v-12.78l3.606-.006 2.282-.007c1.205-.006 2.407-.01 3.611-.011.878 0 1.754-.003 2.63-.007.462-.002.928-.005 1.389-.002 6.302.01 12.003-1.72 16.65-6.117l.291-.272c3.951-3.807 6.097-9.302 6.241-14.736.04-3.078-.476-6.048-1.68-8.892l-.104-.244c-2.382-5.559-6.98-9.439-12.504-11.675-2.204-.816-4.522-1.16-6.863-1.134-.301.004-.606.004-.909.001-1.677.003-3.304.127-4.924.591l-.331.098c-2.625.758-5.093 1.928-7.254 3.607l-.323.249c-1.046.817-2.031 1.682-2.873 2.71l-.154.179c-2.354 2.782-3.9 5.988-4.727 9.529l-.054.229c-.391 1.8-.423 3.633-.42 5.471l-.001.74c.002 1.4.001 2.801-.004 4.201l-.004 3.779c0 1.824-.001 3.649-.003 5.473l-.006 2.813-.005 6.076-.001.267-.008 8.614c-.001 2.023-.004 4.045-.006 6.066v.259l-.004 2.55-.006 5.46c0 1.331-.001 2.658-.003 3.985-.002.72-.002 1.438-.002 2.156 0 .658 0 1.317-.002 1.978v.708c.004 2.098-.07 4.214-.545 6.263l-.077.359-.161.716c-.071.302-.136.605-.199.909-.55 2.538-1.6 5.067-2.832 7.348l-.214.42c-.965 1.921-2.22 3.714-3.574 5.38l-.152.183c-.78.973-1.639 1.866-2.519 2.751l-.308.313a25.81 25.81 0 0 1-2.226 1.955l-.22.179c-3.698 2.953-7.975 5.044-12.538 6.262-.212.056-.422.115-.631.176-8.366 2.287-17.8.738-25.278-3.512-3.639-2.122-7.171-4.945-9.721-8.307-.121-.15-.241-.298-.356-.448a36.247 36.247 0 0 1-2.605-3.814l-.144-.234c-.889-1.466-1.562-3.034-2.222-4.617l-.11-.265c-3.253-7.791-2.911-17.367.184-25.133.865-2.069 1.869-4.089 3.123-5.951l.172-.261a31.91 31.91 0 0 1 2.547-3.29l.229-.263c.13-.152.266-.304.396-.452l.425-.493c1.216-1.389 2.593-2.615 4.068-3.723.208-.157.414-.315.62-.476 1.184-.901 2.437-1.665 3.729-2.4l.272-.159c1.586-.893 3.235-1.573 4.934-2.21l.253-.097c4.232-1.567 8.615-1.836 13.079-1.82 1.359 0 2.732.002 4.093.007 1.209.005 2.417.006 3.621.006 1.899.002 3.794.007 5.688.012v12.78l-3.612.013-2.282.011c-1.201.005-2.401.012-3.61.016-.876.003-1.751.005-2.629.013-.463.002-.924.005-1.387.006-4.322.005-8.193.592-12.033 2.662l-.217.114c-1.458.773-2.697 1.731-3.908 2.849-.206.185-.413.362-.63.535-.435.376-.794.788-1.16 1.232l-.153.18a21.18 21.18 0 0 0-4.474 8.651l-.094.342c-.42 1.682-.54 3.395-.536 5.127v.272c.019 5.672 2.392 10.671 6.206 14.769l.215.237c3.296 3.453 8.483 5.917 13.247 6.046.448.008.896.01 1.345.01.276 0 .553.003.835.005 4.917.019 9.864-1.73 13.577-4.995l.303-.267c.299-.263.592-.527.881-.799l.262-.247c.787-.756 1.451-1.599 2.104-2.474l.151-.201c1.929-2.606 3.117-5.723 3.635-8.909l.059-.362c.194-1.296.21-2.573.207-3.883l.003-.74v-2.02c0-.73 0-1.459.005-2.188v-3.782c0-1.827.004-3.654.007-5.481 0-.939 0-1.877.004-2.816l.003-6.082v-.268c.005-2.876.008-5.75.008-8.627l.013-8.883c.004-1.823.004-3.646.004-5.469 0-1.33.004-2.659.004-3.989.003-.721.003-1.442.003-2.159v-1.98c.005-.237.005-.473 0-.711-.011-8.523 3.072-17.023 8.941-23.268.244-.263.483-.531.717-.805.416-.48.861-.918 1.324-1.352l.252-.232a26.259 26.259 0 0 1 2.184-1.812l.46-.349c1.39-1.058 2.837-1.951 4.375-2.775l.318-.172c5.005-2.666 10.5-3.877 16.15-3.889Z" style="transform-box:fill-box;transform-origin:50% 50%" transform="rotate(-31 0 0)"/></svg>