@gradial/aci 0.1.20-preview.3 → 0.1.20

package/templates/astro/template/.aci.yaml

@@ -0,0 +1,27 @@
+version: "1"
+siteId: "site_astro"
+framework: astro
+
+source:
+  root: "./"
+  outDir: "dist"
+  publicDir: "public"
+
+componentRegistry: ./src/cms/contracts/components/index.ts
+layoutRegistry: ./src/cms/contracts/layouts/index.ts
+
+capabilities:
+  staticRender: true
+  ssr: true
+  ssrIslands: true
+  clientIslands: true
+  fragmentRender: true
+
+routes:
+  cmsManaged: "/[...slug]"
+  frameworkOwned:
+    - "/api/*"
+    - "/_astro/*"
+    - "/storybook/*"
+
+rendererProtocol: stdio-json

package/templates/astro/template/.storybook/main.ts

@@ -0,0 +1,79 @@
+import { dirname, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import tailwindcss from '@tailwindcss/postcss';
+
+const sharedRoot = fileURLToPath(new URL('../src', import.meta.url));
+
+function withSharedAlias(alias: any) {
+  if (Array.isArray(alias)) {
+    return [...alias, { find: '@shared', replacement: sharedRoot }];
+  }
+
+  return {
+    ...alias,
+    '@shared': sharedRoot
+  };
+}
+
+const config = {
+  stories: ['../src/**/*.stories.@(ts|mdx)'],
+  addons: ['@storybook/addon-docs'],
+  framework: {
+    name: '@storybook-astro/framework',
+    options: {}
+  },
+  core: {
+    builder: '@storybook/builder-vite'
+  },
+  staticDirs: ['../public'],
+  viteFinal: async (config: any) => {
+    const astroComponentPaths = new Set<string>();
+    const buildServerPlugin = config.plugins?.flat().find(
+      (p: any) => p?.name === 'storybook-astro:build-server'
+    );
+
+    if (buildServerPlugin) {
+      const origWriteBundle = buildServerPlugin.writeBundle;
+      buildServerPlugin.writeBundle = async function(this: any, ...args: any[]) {
+        for (const componentPath of astroComponentPaths) {
+          buildServerPlugin.resolveId?.call(
+            this,
+            componentPath,
+            componentPath
+          );
+        }
+        return origWriteBundle?.apply(this, args);
+      };
+    }
+
+    config.plugins = [
+      {
+        name: 'storybook-astro:resolve-compat',
+        enforce: 'pre' as const,
+        resolveId(id: string, importer: string | undefined) {
+          if (id?.endsWith('.astro') && importer) {
+            astroComponentPaths.add(resolve(dirname(importer), id));
+          }
+          return undefined;
+        }
+      },
+      ...config.plugins
+    ];
+
+    return {
+      ...config,
+      resolve: {
+        ...config.resolve,
+        alias: withSharedAlias(config.resolve?.alias)
+      },
+      css: {
+        ...config.css,
+        postcss: {
+          plugins: [tailwindcss()]
+        }
+      }
+    };
+  }
+};
+
+export default config;

package/templates/astro/template/.storybook/manager.ts

@@ -0,0 +1,6 @@
+import { addons } from 'storybook/manager-api';
+import { themes } from 'storybook/theming';
+
+addons.setConfig({
+  theme: themes.dark
+});

package/templates/astro/template/.storybook/preview.ts

@@ -0,0 +1,33 @@
+import '../src/design-system/styles.css';
+
+const preview = {
+  globalTypes: {
+    theme: {
+      description: 'Theme for components',
+      toolbar: {
+        title: 'Theme',
+        icon: 'sun',
+        items: ['light', 'dark'],
+        dynamicTitle: true
+      }
+    }
+  },
+  decorators: [
+    (storyFn: any, context: any) => {
+      const theme = context.globals.theme || 'light';
+      document.body.setAttribute('data-visual-root', '');
+      document.body.className = `theme-${theme} min-h-screen bg-[var(--color-surface-default)]`;
+      return storyFn();
+    }
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    options: {
+      storySort: {
+        order: ['Core Atomic Blocks', 'Composition', '*']
+      }
+    }
+  }
+};
+
+export default preview;

package/templates/astro/template/astro.config.mjs

@@ -0,0 +1,37 @@
+import path from 'node:path';
+import { defineConfig } from 'astro/config';
+import node from '@astrojs/node';
+import tailwindcss from '@tailwindcss/postcss';
+import { withAci } from '@gradial/aci/astro';
+
+const pageRuntimeBuild = process.env.ACI_CODE_ARTIFACT_BUILD === '1';
+const rawBasePath = String(process.env.ACI_SITE_BASE_PATH || '').trim().replace(/\/+$/g, '');
+const base = rawBasePath
+  ? rawBasePath.startsWith('/') ? rawBasePath : `/${rawBasePath}`
+  : '/';
+const rawOutDir = String(process.env.ACI_ASTRO_OUT_DIR || '').trim();
+const rawCacheDir = String(process.env.ACI_ASTRO_CACHE_DIR || '').trim();
+const outDir = rawOutDir
+  ? (path.isAbsolute(rawOutDir) ? rawOutDir : `./${rawOutDir}`)
+  : 'dist';
+
+export default defineConfig({
+  adapter: pageRuntimeBuild ? node({ mode: 'middleware' }) : undefined,
+  integrations: [withAci()],
+  srcDir: './src',
+  outDir,
+  cacheDir: rawCacheDir
+    ? (path.isAbsolute(rawCacheDir) ? rawCacheDir : `./${rawCacheDir}`)
+    : undefined,
+  output: pageRuntimeBuild ? 'server' : 'static',
+  trailingSlash: 'always',
+  base,
+  devToolbar: { enabled: false },
+  vite: {
+    css: {
+      postcss: {
+        plugins: [tailwindcss()],
+      },
+    },
+  },
+});

package/templates/astro/template/package.json.tmpl

@@ -0,0 +1,41 @@
+{
+  "name": "{{siteName}}",
+  "version": "{{version}}",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "astro dev --host 0.0.0.0",
+    "build": "astro build",
+    "preview": "ACI_CONTENT_ROOT=./.aci/compiled astro preview --host 0.0.0.0",
+    "typecheck": "ACI_CONTENT_ROOT=./.aci/compiled astro check --tsconfig ./tsconfig.json",
+    "aci:compile": "node ./node_modules/@gradial/aci/bin/aci.js build --compile-only",
+    "content:compile": "node ./node_modules/@gradial/aci/bin/aci.js build --skip-code --content ./.content --out ./.aci/compiled",
+    "aci:build": "node ./node_modules/@gradial/aci/bin/aci.js build --content ./.content",
+    "aci:doctor": "node ./node_modules/@gradial/aci/bin/aci.js doctor",
+    "aci:validate": "node ./node_modules/@gradial/aci/bin/aci.js build --validate-only",
+    "storybook": "storybook dev -p 6006",
+    "build:storybook": "storybook build"
+  },
+  "dependencies": {
+    "@gradial/aci": "^0.1.20",
+    "js-yaml": "^4.1.0",
+    "marked": "^18.0.3",
+    "zod": "^4.0.0"
+  },
+  "devDependencies": {
+    "@astrojs/check": "^0.9.8",
+    "@astrojs/node": "^10.1.4",
+    "@tailwindcss/postcss": "^4.2.4",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^25.8.0",
+    "astro": "^6.1.9",
+    "tailwindcss": "^4.2.4",
+    "tsx": "^4.20.0",
+    "typescript": "5.9.3",
+    "vite": "^7.2.7",
+    "storybook": "^10.0.0",
+    "@storybook-astro/framework": "^1.6.0",
+    "@storybook/addon-docs": "^10.0.0",
+    "@storybook/builder-vite": "^10.0.0"
+  }
+}

package/templates/astro/template/src/cms/contracts/layouts/index.ts

@@ -0,0 +1,18 @@
+import { defineLayoutContract, slot, fragmentDefault } from '@gradial/aci';
+
+const layoutContracts = [
+  defineLayoutContract({
+    name: 'default',
+    slots: [
+      slot('header', false),
+      slot('main', true),
+      slot('footer', false),
+    ],
+    defaults: {
+      header: [fragmentDefault('navbar')],
+      footer: [fragmentDefault('site-footer')],
+    },
+  }),
+];
+
+export default layoutContracts;

package/templates/astro/template/src/cms/registry.ts

@@ -0,0 +1,28 @@
+import { createRegistry } from '@gradial/aci';
+import { homeHeroContract } from './contracts/components/homeHero.contract';
+import { containerContract } from './contracts/components/container.contract';
+import { buttonContract } from './contracts/components/button.contract';
+import { siteNavigationContract } from './contracts/components/siteNavigation.contract';
+import { siteFooterContract } from './contracts/components/siteFooter.contract';
+import { featureGridContract } from './contracts/components/featureGrid.contract';
+import { featureCardContract } from './contracts/components/featureCard.contract';
+import { statsBarContract } from './contracts/components/statsBar.contract';
+import HomeHero from '../components/sections/HomeHero.astro';
+import ContainerSection from '../components/sections/ContainerSection.astro';
+import ButtonBlock from '../components/elements/ButtonBlock.astro';
+import Header from '../components/chrome/Header.astro';
+import Footer from '../components/chrome/Footer.astro';
+import FeatureGrid from '../components/sections/FeatureGrid.astro';
+import FeatureCard from '../components/sections/FeatureCard.astro';
+import StatsBar from '../components/sections/StatsBar.astro';
+
+export const registry = createRegistry([
+  [homeHeroContract, HomeHero],
+  [containerContract, ContainerSection],
+  [buttonContract, ButtonBlock],
+  [siteNavigationContract, Header],
+  [siteFooterContract, Footer],
+  [featureGridContract, FeatureGrid],
+  [featureCardContract, FeatureCard],
+  [statsBarContract, StatsBar],
+]);

package/templates/astro/template/src/components/chrome/Footer.astro

@@ -0,0 +1,107 @@
+---
+import Container from '../elements/Container.astro';
+import Logo from '../elements/Logo.astro';
+
+interface FooterLink {
+  id: string;
+  label: string;
+  href: string;
+}
+
+interface FooterGroup {
+  id: string;
+  title: string;
+  links: FooterLink[];
+}
+
+interface FooterColumn {
+  id: string;
+  title?: string;
+  groups?: FooterGroup[];
+  links?: FooterLink[];
+}
+
+interface Props {
+  brandHref: string;
+  brandLabel?: string;
+  brandLogo?: { src: string; alt?: string } | null;
+  social?: Array<FooterLink & { icon?: string }>;
+  columns?: FooterColumn[];
+  legalLinks?: FooterLink[];
+  copyright?: string;
+}
+
+const {
+  brandHref,
+  brandLabel = 'Gradial',
+  brandLogo = null,
+  social = [],
+  columns = [],
+  legalLinks = [],
+  copyright = ''
+} = Astro.props;
+
+function columnGroups(column: FooterColumn): FooterGroup[] {
+  if (column.groups?.length) {
+    return column.groups;
+  }
+
+  return [{
+    id: column.id,
+    title: column.title || '',
+    links: column.links || []
+  }];
+}
+---
+
+<footer class="bm-footer [font-family:var(--font-family-base)] text-fg" id="footer">
+  <Container className="py-[var(--spacing-footer-y)]">
+    <div class="grid gap-12 pb-24 md:grid-cols-[var(--footer-grid-columns)] lg:gap-24">
+      <a href={brandHref} class="self-start">
+        <Logo
+          label={brandLabel}
+          src={brandLogo?.src || ''}
+          alt={brandLogo?.alt || brandLabel}
+          className="w-[var(--width-logo-footer-mobile)] md:w-[var(--width-logo-footer)]"
+        />
+      </a>
+      <div class="grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
+        {columns.map((column) => (
+          <div class="space-y-10">
+            {columnGroups(column).map((group) => (
+              <section class="space-y-5" aria-label={group.title}>
+                <h2 class="text-[length:var(--text-size-body-small)] font-[var(--font-weight-semibold)] text-fg-muted">{group.title}</h2>
+                <ul class="space-y-4 text-[length:var(--text-size-body-small)] font-[var(--font-weight-semibold)] leading-body text-fg">
+                  {group.links.map((link) => (
+                    <li><a class="transition hover:text-link-hover" href={link.href}>{link.label}</a></li>
+                  ))}
+                </ul>
+              </section>
+            ))}
+          </div>
+        ))}
+        <section class="space-y-5" aria-label="Social">
+          <h2 class="text-[length:var(--text-size-body-small)] font-[var(--font-weight-semibold)] text-fg-muted">Social</h2>
+          <ul class="space-y-4 text-[length:var(--text-size-body-small)] font-[var(--font-weight-semibold)] text-fg">
+            {social.map((item) => (
+              <li>
+                <a class="inline-flex items-center gap-2 transition hover:text-link-hover" href={item.href}>
+                  <span class="min-w-5 text-[length:var(--text-size-caption)] text-fg-muted">{item.icon || item.label.slice(0, 1)}</span>
+                  <span>{item.label}</span>
+                </a>
+              </li>
+            ))}
+          </ul>
+        </section>
+      </div>
+    </div>
+    <div class="flex flex-col gap-6 border-t border-edge pt-8 text-[length:var(--text-size-caption)] font-[var(--font-weight-semibold)] text-fg-muted md:flex-row md:items-center md:justify-between">
+      <ul class="flex flex-wrap gap-x-9 gap-y-3 text-fg">
+        {legalLinks.map((link) => (
+          <li><a class="transition hover:text-link-hover" href={link.href}>{link.label}</a></li>
+        ))}
+      </ul>
+      <p>{copyright}</p>
+    </div>
+  </Container>
+</footer>

package/templates/astro/template/src/components/chrome/Header.astro

@@ -0,0 +1,94 @@
+---
+import Button from '../elements/Button.astro';
+import Container from '../elements/Container.astro';
+import Icon from '../elements/Icon.astro';
+import Logo from '../elements/Logo.astro';
+
+interface NavItem {
+  id: string;
+  label: string;
+  href: string;
+}
+
+interface UtilityItem extends NavItem {
+  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+}
+
+interface Props {
+  brandHref: string;
+  brandLabel?: string;
+  brandLogo?: { src: string; alt?: string } | null;
+  navigation?: NavItem[];
+  utilities?: UtilityItem[];
+}
+
+const {
+  brandHref,
+  brandLabel = 'Gradial',
+  brandLogo = null,
+  navigation = [],
+  utilities = []
+} = Astro.props;
+---
+
+<header class="bm-header sticky top-0 z-[var(--z-header)] [font-family:var(--font-family-base)] text-fg">
+  <a
+    href="#content-main"
+    class="sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-10 focus:rounded-button focus:bg-white focus:px-4 focus:py-2 focus:text-black"
+  >
+    Skip to main content
+  </a>
+  <Container className="flex min-h-[var(--height-header)] items-center justify-between gap-4">
+    <a href={brandHref} class="shrink-0">
+      <Logo label={brandLabel} src={brandLogo?.src || ''} alt={brandLogo?.alt || brandLabel} />
+    </a>
+    <nav class="hidden items-center gap-9 text-[length:var(--text-size-body-small)] font-[var(--font-weight-semibold)] text-fg-muted lg:flex" aria-label="Primary">
+      {navigation.map((item) => (
+        <a class="transition hover:text-link-hover" href={item.href}>{item.label}</a>
+      ))}
+    </nav>
+    <div class="flex shrink-0 items-center gap-3">
+      <div class="hidden items-center gap-3 sm:flex">
+        {utilities.map((item) => (
+          <Button href={item.href} variant={item.variant || 'outline'}>{item.label}</Button>
+        ))}
+      </div>
+      <div class="lg:hidden">
+        <input id="site-mobile-nav" class="peer sr-only" type="checkbox" />
+        <label
+          for="site-mobile-nav"
+          class="inline-grid size-11 cursor-pointer place-items-center rounded-button border border-edge text-fg transition hover:text-link-hover"
+          aria-label="Open main navigation"
+        >
+          <Icon name="menu" className="size-6" />
+        </label>
+        <div class="bm-mobile-nav pointer-events-none fixed inset-0 z-[var(--z-overlay)] flex translate-x-full flex-col px-[var(--spacing-container)] py-5 text-fg opacity-0 transition duration-300 ease-out peer-checked:pointer-events-auto peer-checked:translate-x-0 peer-checked:opacity-100">
+          <div class="flex min-h-[var(--height-header)] items-center justify-between gap-4">
+            <a href={brandHref} class="shrink-0">
+              <Logo label={brandLabel} src={brandLogo?.src || ''} alt={brandLogo?.alt || brandLabel} />
+            </a>
+            <label
+              for="site-mobile-nav"
+              class="inline-grid size-11 cursor-pointer place-items-center rounded-button border border-edge text-fg transition hover:text-link-hover"
+              aria-label="Close main navigation"
+            >
+              <Icon name="close" className="size-6" />
+            </label>
+          </div>
+          <nav class="grid flex-1 content-center gap-4 py-10 font-[var(--font-weight-bold)] text-[length:var(--mobile-nav-link-size)] leading-[var(--mobile-nav-link-line-height)] text-fg" aria-label="Mobile main navigation">
+            {navigation.map((item) => (
+              <a class="transition hover:text-link-hover" href={item.href}>{item.label}</a>
+            ))}
+          </nav>
+          {utilities.length ? (
+            <div class="grid gap-3 border-t border-edge pt-5 sm:hidden">
+              {utilities.map((item) => (
+                <Button href={item.href} variant={item.variant || 'outline'} className="w-full">{item.label}</Button>
+              ))}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    </div>
+  </Container>
+</header>

package/templates/astro/template/src/components/elements/AtomicBlock.astro

@@ -0,0 +1,15 @@
+---
+import type { KernelAtomicBlock } from '@gradial/aci/content';
+import ButtonBlock from './ButtonBlock.astro';
+
+interface Props {
+  block: KernelAtomicBlock;
+}
+
+const { block } = Astro.props;
+const props = (block.props || {}) as any;
+---
+
+{block.component === 'button' ? (
+  <ButtonBlock {...props} />
+) : null}

package/templates/astro/template/src/components/elements/AtomicBlocks.astro

@@ -0,0 +1,16 @@
+---
+import type { KernelAtomicBlock } from '@gradial/aci/content';
+import AtomicBlock from './AtomicBlock.astro';
+
+interface Props {
+  blocks?: KernelAtomicBlock[];
+}
+
+const { blocks = [] } = Astro.props;
+---
+
+<div class="flex flex-wrap gap-4">
+  {blocks.map((block) => (
+    <AtomicBlock {block} />
+  ))}
+</div>

package/templates/astro/template/src/components/elements/Button.astro

@@ -0,0 +1,51 @@
+---
+interface Props {
+  href: string;
+  variant?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'ghost';
+  className?: string;
+  target?: string;
+  rel?: string;
+}
+
+const { href, variant = 'primary', className = '', target, rel } = Astro.props;
+
+const variantTokens = {
+  primary: {
+    background: 'var(--button-primary-bg)',
+    border: 'var(--button-primary-border)',
+    color: 'var(--button-primary-text)'
+  },
+  secondary: {
+    background: 'var(--button-secondary-bg)',
+    border: 'var(--button-secondary-border)',
+    color: 'var(--button-secondary-text)'
+  },
+  outline: {
+    background: 'var(--button-outline-bg)',
+    border: 'var(--button-outline-border)',
+    color: 'var(--button-outline-text)'
+  },
+  tertiary: {
+    background: 'var(--button-tertiary-bg)',
+    border: 'var(--button-tertiary-border)',
+    color: 'var(--button-tertiary-text)'
+  },
+  ghost: {
+    background: 'transparent',
+    border: 'transparent',
+    color: 'var(--color-fg)'
+  }
+}[variant];
+
+const tokenStyle = `background-color: ${variantTokens.background}; border-color: ${variantTokens.border}; color: ${variantTokens.color};`;
+---
+
+<a
+  class={`inline-flex min-h-10 items-center justify-center rounded-button border px-[var(--spacing-button-x)] py-[var(--spacing-button-y)] [font-family:var(--font-family-base)] text-[length:var(--text-button)] font-[var(--font-weight-semibold)] leading-button transition duration-200 hover:opacity-85 ${className}`}
+  href={href}
+  target={target}
+  rel={rel}
+  style={tokenStyle}
+>
+  <slot />
+</a>

package/templates/astro/template/src/components/elements/ButtonBlock.astro

@@ -0,0 +1,25 @@
+---
+import Button from '../elements/Button.astro';
+import Icon from '../elements/Icon.astro';
+import type { ContentProps } from '../../cms/contracts/components/button.contract';
+
+type Props = ContentProps;
+
+const {
+  label,
+  href,
+  variant = 'primary',
+  newWindow = false,
+  icon = '',
+  iconPosition = 'before',
+  className = ''
+} = Astro.props;
+const target = newWindow ? '_blank' : undefined;
+const rel = newWindow ? 'noreferrer' : undefined;
+---
+
+<Button {href} {variant} {target} {rel} {className}>
+  {icon && iconPosition === 'before' ? <Icon name={icon} className="mr-2 size-4" /> : null}
+  <span>{label}</span>
+  {icon && iconPosition === 'after' ? <Icon name={icon} className="ml-2 size-4" /> : null}
+</Button>

package/templates/astro/template/src/components/elements/Container.astro

@@ -0,0 +1,11 @@
+---
+interface Props {
+  className?: string;
+}
+
+const { className = '' } = Astro.props;
+---
+
+<div class={`mx-auto w-full max-w-container px-[var(--spacing-container)] ${className}`}>
+  <slot />
+</div>

package/templates/astro/template/src/components/elements/Icon.astro

@@ -0,0 +1,31 @@
+---
+interface Props {
+  name: 'auto_awesome' | 'hub' | 'speed' | string;
+  className?: string;
+}
+
+const { name, className = '' } = Astro.props;
+
+const paths: Record<string, string> = {
+  arrow_forward: 'M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z',
+  auto_awesome: 'M480-80 376-376 80-480l296-104 104-296 104 296 296 104-296 104L480-80Zm0-167 64-177 177-64-177-64-64-177-64 177-177 64 177 64 64 177ZM760-560l-40-120-120-40 120-40 40-120 40 120 120 40-120 40-40 120Z',
+  close: 'm256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z',
+  globe: 'M480-80q-82 0-155-31.5t-127.5-86q-54.5-54.5-86-127.5T80-480q0-82 31.5-155t86-127.5q54.5-54.5 127.5-86T480-880q82 0 155 31.5t127.5 86q54.5 54.5 86 127.5T880-480q0 82-31.5 155t-86 127.5q-54.5 54.5-127.5 86T480-80Zm0-80q139-36 209.5-131.5T760-480H520v-280q-64 8-117 38.5T320-640h-40q-54 77-87 153.5T160-480q0 131.5 69.5 227T480-160Zm0 80q-83 0-156-31.5t-127-86q-54.5-54.5-86-127T80-480q0-83 31.5-156t86-127q54.5-54.5 127-86T480-880q83 0 156 31.5t127 86q54.5 54.5 86 127T880-480q0 83-31.5 156t-86 127q-54.5 54.5-127 86T480-80Z',
+  hub: 'M200-120q-50 0-85-35t-35-85q0-39 22.5-70t57.5-43v-254q-35-12-57.5-43T80-720q0-50 35-85t85-35q39 0 70 22.5t43 57.5h334q12-35 43-57.5t70-22.5q50 0 85 35t35 85q0 39-22.5 70T800-607v254q35 12 57.5 43t22.5 70q0 50-35 85t-85 35q-39 0-70-22.5T647-200H313q-12 35-43 57.5T200-120Zm0-80q17 0 28.5-11.5T240-240q0-17-11.5-28.5T200-280q-17 0-28.5 11.5T160-240q0 17 11.5 28.5T200-200Zm0-480q17 0 28.5-11.5T240-720q0-17-11.5-28.5T200-760q-17 0-28.5 11.5T160-720q0 17 11.5 28.5T200-680Zm560 480q17 0 28.5-11.5T800-240q0-17-11.5-28.5T760-280q-17 0-28.5 11.5T720-240q0 17 11.5 28.5T760-200Zm0-480q17 0 28.5-11.5T800-720q0-17-11.5-28.5T760-760q-17 0-28.5 11.5T720-720q0 17 11.5 28.5T760-680ZM313-280h334q9-26 29-46t44-27v-254q-24-7-44-27t-29-46H313q-9 26-29 46t-44 27v254q24 7 44 27t29 46Z',
+  menu: 'M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z',
+  setup: 'M480-240 640-96l-40-200 160-120-200-80-80-200-80 200-200 80 160 120-40 200 160-144ZM160-280l120-72 72 120-192-48Z',
+  speed: 'M418-340q24 24 62 23.5t56-27.5l224-336-336 224q-27 18-28 55t22 61Zm62-460q59 0 113.5 16.5T696-734l-76 48q-32-17-68-25.5T480-720q-133 0-226.5 93.5T160-400q0 42 11.5 83t32.5 77h552q21-36 32.5-77t11.5-83q0-36-8.5-72T766-540l48-76q33 48 49.5 102.5T880-400q0 57-16.5 110T816-192q-11 17-30 24.5t-40 7.5H214q-21 0-40-7.5T144-192q-31-45-47.5-98T80-400q0-83 31.5-155.5t86-127Q252-737 324.5-768.5T480-800Z'
+};
+
+const path = paths[name] || paths.arrow_forward;
+---
+
+<svg
+  class={className}
+  viewBox="0 -960 960 960"
+  aria-hidden="true"
+  focusable="false"
+  fill="currentColor"
+>
+  <path d={path} />
+</svg>

package/templates/astro/template/src/components/elements/Logo.astro

@@ -0,0 +1,29 @@
+---
+interface Props {
+  label?: string;
+  src?: string;
+  alt?: string;
+  className?: string;
+}
+
+const { label = 'Gradial', src = '', alt = '', className = '' } = Astro.props;
+const imageClass = className || 'w-[var(--width-logo-mobile)] md:w-[var(--width-logo)]';
+---
+
+{src ? (
+  <img
+    class={`h-auto max-w-none object-contain ${imageClass}`}
+    src={src}
+    alt={alt || label}
+    loading="eager"
+    decoding="async"
+    style="filter: var(--logo-filter);"
+  />
+) : (
+  <span
+    class={`inline-flex items-center [font-family:var(--font-family-heading)] text-[length:var(--text-size-brand)] font-[var(--font-weight-bold)] leading-none text-fg ${className}`}
+    aria-label={label}
+  >
+    <span>{label}</span>
+  </span>
+)}