@parche/core 0.3.0-alpha.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Arthelokyo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,11 @@
+# @parche/core
+
+The Parche host: the engine that turns data-driven content into Astro pages.
+
+Part of [Parche](https://github.com/withparche/parche). See the repository for docs and examples.
+
+> Pre-1.0 — the public API is not yet stable.
+
+## License
+
+MIT © Arthelokyo

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@parche/core",
+  "version": "0.3.0-alpha.0",
+  "type": "module",
+  "exports": {
+    ".": "./src/integration/index.ts",
+    "./types": "./src/integration/types.ts",
+    "./config": "./src/types/config.ts",
+    "./fonts": "./src/config/fonts.ts",
+    "./styles": "./src/styles/base.css",
+    "./content": "./src/content/index.ts",
+    "./schemas": "./src/content/schemas.ts"
+  },
+  "dependencies": {
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.3",
+    "zod": "^4.4.3"
+  },
+  "peerDependencies": {
+    "astro": "^7.2.4"
+  },
+  "devDependencies": {
+    "astro": "^7.2.4",
+    "vite": "^8.0.0"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "description": "The Parche host: the engine that turns data-driven content into Astro pages.",
+  "license": "MIT",
+  "author": "Arthelokyo",
+  "homepage": "https://github.com/withparche/parche#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/withparche/parche.git",
+    "directory": "packages/core"
+  },
+  "bugs": {
+    "url": "https://github.com/withparche/parche/issues"
+  },
+  "keywords": [
+    "astro",
+    "parche",
+    "framework",
+    "design-system"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ]
+}

package/src/components/DynamicRenderer.astro

@@ -0,0 +1,96 @@
+---
+import { widgetMap } from 'parche:registry/widgets';
+import SectionWrapper from './SectionWrapper.astro';
+
+interface WrapperConfig {
+  id?: string;
+  isDark?: boolean;
+  bg?: string;
+  classes?: Record<string, unknown>;
+  as?: string;
+}
+
+interface Section {
+  widget: string;
+  props?: Record<string, any>;
+  wrapper?: false | WrapperConfig;
+}
+
+interface Props {
+  sections: Section[];
+  /** Optional Astro component that wraps each widget.
+   *  Receives `section` and `index` as props, renders the widget via <slot />. */
+  Wrapper?: any;
+}
+
+const { sections, Wrapper } = Astro.props;
+
+// ---- Image resolution: ~/assets/images/foo.png → optimized import ----
+const imageModules = import.meta.glob<{ default: ImageMetadata }>(
+  '/src/assets/images/**/*.{png,jpg,jpeg,gif,svg,webp,avif}',
+  { eager: true }
+);
+
+function resolveImage(src: string): string {
+  if (!src || !src.startsWith('@/assets/')) return src;
+  const fsPath = src.replace('@/', '/src/');
+  const meta = imageModules[fsPath]?.default;
+  return meta?.src ?? src;
+}
+
+/** Walk props and resolve any ~/assets/ image paths */
+function resolveProps(props: Record<string, any>): Record<string, any> {
+  const resolved = { ...props };
+  for (const [key, value] of Object.entries(resolved)) {
+    if (typeof value === 'string' && value.startsWith('@/assets/')) {
+      resolved[key] = resolveImage(value);
+    } else if (value && typeof value === 'object' && !Array.isArray(value) && 'src' in value && typeof value.src === 'string' && value.src.startsWith('@/assets/')) {
+      resolved[key] = { ...value, src: resolveImage(value.src) };
+    }
+  }
+  return resolved;
+}
+
+// Widgets that render full-bleed and manage their own padding — no wrapper by default
+const noWrapperWidgets = new Set(['Hero', 'Hero2', 'HeroText', 'Announcement', 'Note']);
+function widgetSkipsWrapper(name: string): boolean {
+  const key = name.includes('/') ? name.split('/').pop()! : name;
+  return noWrapperWidgets.has(key);
+}
+---
+
+{sections.map((section, index) => {
+  const Widget = widgetMap[section.widget];
+  if (!Widget) return null;
+
+  const props = resolveProps(section.props ?? {});
+
+  // Explicit wrapper config always wins. When omitted: Hero/Announcement skip, others get default wrapper.
+  const hasExplicitWrapper = section.wrapper !== undefined;
+  const useWrapper = hasExplicitWrapper
+    ? typeof section.wrapper === 'object' && section.wrapper !== null
+    : !widgetSkipsWrapper(section.widget);
+  const wrapperProps = typeof section.wrapper === 'object' && section.wrapper !== null ? section.wrapper : {};
+
+  if (Wrapper) {
+    return (
+      <Wrapper section={section} index={index}>
+        {useWrapper ? (
+          <SectionWrapper {...wrapperProps}>
+            <Widget {...props} />
+          </SectionWrapper>
+        ) : (
+          <Widget {...props} />
+        )}
+      </Wrapper>
+    );
+  }
+
+  return useWrapper ? (
+    <SectionWrapper {...wrapperProps}>
+      <Widget {...props} />
+    </SectionWrapper>
+  ) : (
+    <Widget {...props} />
+  );
+})}

package/src/components/LayoutRenderer.astro

@@ -0,0 +1,65 @@
+---
+import { widgetMap } from 'parche:registry/widgets';
+import DynamicRenderer from 'parche:DynamicRenderer';
+
+interface WrapperConfig {
+  id?: string;
+  isDark?: boolean;
+  bg?: string;
+  classes?: Record<string, unknown>;
+  as?: string;
+}
+
+interface Section {
+  widget: string;
+  props?: Record<string, any>;
+  wrapper?: false | WrapperConfig;
+}
+
+interface Props {
+  layoutSections: Section[];
+  pageSections?: Section[];
+  PageTemplateComponent?: any;
+  pageData?: any;
+  PageMarkdownContent?: any;
+  pageTemplate?: string;
+  SectionWrapper?: any;
+  mainId?: string;
+}
+
+const {
+  layoutSections,
+  pageSections,
+  PageTemplateComponent,
+  pageData,
+  PageMarkdownContent,
+  pageTemplate = 'dynamic',
+  SectionWrapper: PreviewWrapper,
+  mainId,
+} = Astro.props;
+---
+
+{layoutSections.map((section) => {
+  if (section.widget === 'layout/Main') {
+    return (
+      <main id="main-content" class="flex-1">
+        <div id={mainId}>
+          {pageTemplate === 'dynamic' && pageSections && (
+            <DynamicRenderer sections={pageSections} Wrapper={PreviewWrapper} />
+          )}
+          {PageTemplateComponent && (
+            <PageTemplateComponent data={pageData}>
+              {PageMarkdownContent && <PageMarkdownContent />}
+            </PageTemplateComponent>
+          )}
+          <slot />
+        </div>
+      </main>
+    );
+  }
+
+  const Widget = widgetMap[section.widget];
+  if (!Widget) return null;
+
+  return <Widget {...(section.props ?? {})} />;
+})}

package/src/components/SectionWrapper.astro

@@ -0,0 +1,46 @@
+---
+/**
+ * Default section wrapper used by DynamicRenderer.
+ * Provides: configurable HTML tag, background layer, isDark per-widget,
+ * responsive container with padding, and class overrides via twMerge.
+ */
+import type { HTMLTag } from 'astro/types';
+import { twMerge } from 'tailwind-merge';
+
+interface Props {
+  id?: string;
+  isDark?: boolean;
+  bg?: string;
+  classes?: Record<string, unknown>;
+  as?: string;
+}
+
+const { id, isDark = false, bg, classes = {}, as = 'section' } = Astro.props;
+
+const Tag = as as HTMLTag;
+const containerClass = (classes.container as string) ?? '';
+---
+
+<Tag class="relative not-prose scroll-mt-[72px]" {...id ? { id } : {}}>
+  {bg && (
+    <div class="absolute inset-0 pointer-events-none -z-[1]" aria-hidden="true">
+      <Fragment set:html={bg} />
+    </div>
+  )}
+  {isDark && !bg && (
+    <div class="absolute inset-0 pointer-events-none -z-[1]" aria-hidden="true">
+      <div class="absolute inset-0 bg-neutral-900 dark:bg-transparent" />
+    </div>
+  )}
+  <div
+    class:list={[
+      twMerge(
+        'relative mx-auto max-w-7xl px-4 md:px-6 py-12 md:py-16 lg:py-20',
+        containerClass,
+      ),
+      { dark: isDark },
+    ]}
+  >
+    <slot />
+  </div>
+</Tag>

package/src/components/common/LocaleSwitcher.astro

@@ -0,0 +1,168 @@
+---
+import { locales, defaultLocale } from 'parche:config/i18n';
+import { buildSlugMap, getAlternateUrls, resolvePageFromSlug } from 'parche:utils/i18n';
+
+// Only render when there are multiple locales configured
+const hasMultipleLocales = Array.isArray(locales) && locales.length > 1;
+
+let alternates: Array<{ locale: string; href: string; path: string }> = [];
+let hasAlternates = false;
+
+if (hasMultipleLocales) {
+  // Reverse-lookup the current page from the URL to find pageKey
+  const pathname = Astro.url.pathname.replace(/\/$/, '') || '';
+  const urlSlug = pathname.startsWith('/') ? pathname.slice(1) : pathname;
+
+  const resolved = await resolvePageFromSlug(urlSlug || undefined, defaultLocale);
+
+  if (resolved) {
+    const slugMap = await buildSlugMap();
+    alternates = getAlternateUrls(resolved.pageKey, slugMap, defaultLocale, Astro.site);
+    hasAlternates = alternates.length > 1;
+  }
+}
+
+const currentLocale = Astro.currentLocale || defaultLocale;
+
+/**
+ * Get the native display name for a locale using Intl.DisplayNames.
+ * e.g. 'es' → 'español', 'en' → 'English'
+ */
+function getLocaleName(locale: string): string {
+  try {
+    const display = new Intl.DisplayNames([locale], { type: 'language' });
+    const name = display.of(locale) || locale;
+    return name.charAt(0).toUpperCase() + name.slice(1);
+  } catch {
+    return locale.toUpperCase();
+  }
+}
+
+const currentName = getLocaleName(currentLocale);
+
+// Build full list of other locales, marking which ones have alternates
+const allOtherLocales = hasMultipleLocales
+  ? (locales as Array<string | { path: string; codes: string[] }>)
+      .map((l) => typeof l === 'string' ? l : l.codes[0])
+      .filter((l) => l !== currentLocale)
+      .map((locale) => {
+        const alt = alternates.find((a) => a.locale === locale);
+        return { locale, href: alt?.path, disabled: !alt };
+      })
+  : [];
+---
+
+{hasMultipleLocales && (
+  <div class="relative" data-locale-switcher>
+    <button
+      type="button"
+      class="inline-flex items-center gap-1.5 text-sm font-medium text-muted hover:text-heading transition-colors px-2 h-8 rounded-md hover:bg-black/5 dark:hover:bg-white/5 cursor-pointer"
+      aria-expanded="false"
+      aria-haspopup="true"
+      aria-label={`Language: ${currentName}`}
+      data-locale-trigger
+    >
+      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="12" cy="12" r="10"></circle>
+        <path d="M2 12h20"></path>
+        <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path>
+      </svg>
+      {/* <span class="uppercase text-xs font-semibold">{currentLocale}</span> */}
+    </button>
+
+    <div
+      class="absolute right-0 top-full pt-1 opacity-0 invisible translate-y-1 transition-all duration-200 z-50"
+      role="menu"
+      data-locale-panel
+    >
+      <div class="bg-surface border border-border rounded-lg shadow-lg py-1 min-w-[150px]">
+        {/* Current locale (shown as active) */}
+        <div class="flex items-center justify-between px-3 py-2 text-sm font-medium text-heading bg-black/5 dark:bg-white/5">
+          <span>{currentName}</span>
+          <svg class="w-3.5 h-3.5 text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="20 6 9 17 4 12"></polyline>
+          </svg>
+        </div>
+
+        {/* Other locales */}
+        {allOtherLocales.map((item) =>
+          item.disabled ? (
+            <span
+              class="flex items-center px-3 py-2 text-sm text-muted/40 cursor-default"
+              role="menuitem"
+              aria-disabled="true"
+            >
+              {getLocaleName(item.locale)}
+            </span>
+          ) : (
+            <a
+              href={item.href}
+              class="flex items-center px-3 py-2 text-sm text-muted hover:text-heading hover:bg-black/5 dark:hover:bg-white/5 transition-colors no-underline"
+              role="menuitem"
+              hreflang={item.locale}
+            >
+              {getLocaleName(item.locale)}
+            </a>
+          )
+        )}
+      </div>
+    </div>
+  </div>
+)}
+
+<script>
+  function initLocaleSwitchers() {
+    document.querySelectorAll('[data-locale-switcher]').forEach((switcher) => {
+      if ((switcher as any)._localeSwitcherInit) return;
+      (switcher as any)._localeSwitcherInit = true;
+
+      const trigger = switcher.querySelector('[data-locale-trigger]') as HTMLButtonElement;
+      const panel = switcher.querySelector('[data-locale-panel]') as HTMLElement;
+      if (!trigger || !panel) return;
+
+      let isOpen = false;
+
+      const open = () => {
+        isOpen = true;
+        trigger.setAttribute('aria-expanded', 'true');
+        panel.classList.remove('opacity-0', 'invisible', 'translate-y-1');
+        panel.classList.add('opacity-100', 'visible', 'translate-y-0');
+      };
+
+      const close = () => {
+        isOpen = false;
+        trigger.setAttribute('aria-expanded', 'false');
+        panel.classList.add('opacity-0', 'invisible', 'translate-y-1');
+        panel.classList.remove('opacity-100', 'visible', 'translate-y-0');
+      };
+
+      // Toggle on click
+      trigger.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        isOpen ? close() : open();
+      });
+
+      // Prevent clicks inside the panel from closing it
+      panel.addEventListener('click', (e) => e.stopPropagation());
+
+      // Close on Escape
+      switcher.addEventListener('keydown', (e: Event) => {
+        const ke = e as KeyboardEvent;
+        if (ke.key === 'Escape' && isOpen) {
+          close();
+          trigger.focus();
+        }
+      });
+
+      // Close when clicking outside
+      document.addEventListener('click', (e) => {
+        if (isOpen && !switcher.contains(e.target as Node)) close();
+      });
+    });
+  }
+
+  // Run on initial load and after each client-side navigation
+  initLocaleSwitchers();
+  document.addEventListener('astro:page-load', initLocaleSwitchers);
+</script>

package/src/components/common/OptimizedImage.astro

@@ -0,0 +1,41 @@
+---
+import { Image } from 'astro:assets';
+
+interface Props {
+  src: string | ImageMetadata;
+  alt: string;
+  width?: number;
+  height?: number;
+  loading?: 'eager' | 'lazy';
+  fetchpriority?: 'high' | 'low' | 'auto';
+  class?: string;
+  widths?: number[];
+  sizes?: string;
+}
+
+const {
+  src,
+  alt,
+  width = 600,
+  height = 400,
+  loading = 'lazy',
+  fetchpriority,
+  class: className = '',
+  widths = [400, 600, 800],
+  sizes = '(max-width: 768px) 100vw, 50vw',
+} = Astro.props;
+---
+
+<Image
+  src={src}
+  alt={alt}
+  width={width}
+  height={height}
+  loading={loading}
+  fetchpriority={fetchpriority}
+  class={className}
+  widths={widths}
+  sizes={sizes}
+  format="webp"
+  quality={80}
+/>

package/src/components/common/ThemePanel.astro

@@ -0,0 +1,152 @@
+---
+import { themes as configuredThemes } from 'parche:config/themes';
+
+interface ThemeOption {
+  label: string;
+  value: string;
+}
+
+interface Props {
+  themes?: ThemeOption[];
+}
+
+const { themes = configuredThemes } = Astro.props;
+---
+
+{themes.length > 1 && (
+  <theme-panel>
+    {/* Floating trigger button */}
+    <button
+      type="button"
+      data-panel-trigger
+      class="fixed bottom-5 right-5 z-50 w-11 h-11 rounded-full bg-surface border border-border shadow-lg flex items-center justify-center cursor-pointer hover:bg-primary hover:text-white hover:border-primary transition-all duration-200"
+      aria-label="Theme settings"
+    >
+      <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <circle cx="13.5" cy="6.5" r="0.5" fill="currentColor"></circle>
+        <circle cx="17.5" cy="10.5" r="0.5" fill="currentColor"></circle>
+        <circle cx="8.5" cy="7.5" r="0.5" fill="currentColor"></circle>
+        <circle cx="6.5" cy="12.5" r="0.5" fill="currentColor"></circle>
+        <path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.563-2.512 5.563-5.563C22 6.5 17.5 2 12 2Z"></path>
+      </svg>
+    </button>
+
+    {/* Panel overlay */}
+    <div
+      data-panel-overlay
+      class="fixed inset-0 z-50 bg-black/10 hidden transition-opacity"
+    ></div>
+
+    {/* Panel content */}
+    <div
+      data-panel-content
+      class="fixed bottom-20 right-5 z-50 w-64 bg-surface border border-border rounded-xl shadow-2xl p-4 hidden transition-all duration-200 opacity-0 translate-y-2"
+    >
+      {/* Header */}
+      <div class="flex items-center justify-between mb-4">
+        <span class="type-caption font-semibold text-heading">Style</span>
+        <button
+          type="button"
+          data-panel-close
+          class="w-6 h-6 flex items-center justify-center rounded-md text-muted hover:text-heading hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors cursor-pointer"
+          aria-label="Close"
+        >
+          <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <line x1="18" y1="6" x2="6" y2="18"></line>
+            <line x1="6" y1="6" x2="18" y2="18"></line>
+          </svg>
+        </button>
+      </div>
+
+      {/* Theme grid */}
+      <div class="space-y-1">
+        {themes.map((theme) => (
+          <button
+            type="button"
+            data-theme-value={theme.value}
+            class="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-left cursor-pointer transition-colors text-muted hover:bg-neutral-100 dark:hover:bg-neutral-800"
+          >
+            <span
+              class="w-4 h-4 rounded-full border-2 border-border flex items-center justify-center shrink-0"
+              data-theme-radio
+            >
+              <span class="w-2 h-2 rounded-full bg-primary hidden" data-theme-dot></span>
+            </span>
+            <span class="type-caption">{theme.label}</span>
+          </button>
+        ))}
+      </div>
+    </div>
+  </theme-panel>
+)}
+
+<script>
+  class ThemePanelElement extends HTMLElement {
+    private isOpen = false;
+
+    connectedCallback() {
+      const trigger = this.querySelector('[data-panel-trigger]') as HTMLElement;
+      const overlay = this.querySelector('[data-panel-overlay]') as HTMLElement;
+      const content = this.querySelector('[data-panel-content]') as HTMLElement;
+      const closeBtn = this.querySelector('[data-panel-close]') as HTMLElement;
+      const themeButtons = this.querySelectorAll<HTMLElement>('[data-theme-value]');
+
+      if (!trigger || !content) return;
+
+      // Toggle panel
+      const toggle = (open?: boolean) => {
+        this.isOpen = open ?? !this.isOpen;
+        if (this.isOpen) {
+          overlay?.classList.remove('hidden');
+          content.classList.remove('hidden');
+          requestAnimationFrame(() => {
+            content.classList.remove('opacity-0', 'translate-y-2');
+          });
+        } else {
+          content.classList.add('opacity-0', 'translate-y-2');
+          overlay?.classList.add('hidden');
+          setTimeout(() => content.classList.add('hidden'), 200);
+        }
+      };
+
+      trigger.addEventListener('click', () => toggle());
+      overlay?.addEventListener('click', () => toggle(false));
+      closeBtn?.addEventListener('click', () => toggle(false));
+
+      // Theme selection
+      const currentTheme = document.documentElement.getAttribute('data-theme') || '';
+      const updateTheme = (active: string) => {
+        themeButtons.forEach((btn) => {
+          const isActive = btn.dataset.themeValue === active;
+          const dot = btn.querySelector('[data-theme-dot]') as HTMLElement;
+          if (dot) dot.classList.toggle('hidden', !isActive);
+          btn.classList.toggle('text-heading', isActive);
+          btn.classList.toggle('bg-neutral-100', isActive);
+          btn.classList.toggle('text-muted', !isActive);
+        });
+      };
+      updateTheme(currentTheme);
+
+      themeButtons.forEach((btn) => {
+        btn.addEventListener('click', () => {
+          const value = btn.dataset.themeValue || '';
+          if (value) {
+            document.documentElement.setAttribute('data-theme', value);
+            localStorage.setItem('site-theme', value);
+          } else {
+            document.documentElement.removeAttribute('data-theme');
+            localStorage.removeItem('site-theme');
+          }
+          updateTheme(value);
+        });
+      });
+
+      // Close on Escape
+      document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape' && this.isOpen) toggle(false);
+      });
+    }
+  }
+
+  customElements.define('theme-panel', ThemePanelElement);
+</script>