@tayacrystals/lore 0.1.0

package/components/docs/Breadcrumbs.astro

@@ -0,0 +1,41 @@
+---
+import { Icon } from "astro-icon/components";
+
+const BASE_URL = import.meta.env.BASE_URL || "/";
+const path = Astro.url.pathname.replace(BASE_URL.replace(/\/$/, ""), "").replace(/\/$/, "");
+const segments = path.split("/").filter(Boolean);
+
+function titleCase(s: string) {
+  return s
+    .split("-")
+    .map((w) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join(" ");
+}
+
+const crumbs = segments.map((seg, i) => ({
+  label: titleCase(seg),
+  href: BASE_URL + segments.slice(0, i + 1).join("/"),
+  current: i === segments.length - 1,
+}));
+---
+
+{
+  crumbs.length > 1 && (
+    <nav class="flex items-center gap-1 text-[13px] text-fd-muted-foreground mb-6" aria-label="Breadcrumb">
+      {crumbs.map((crumb, i) => (
+        <>
+          {i > 0 && (
+            <Icon name="lucide:chevron-right" class="w-3 h-3 opacity-50" />
+          )}
+          {crumb.current ? (
+            <span class="text-fd-foreground">{crumb.label}</span>
+          ) : (
+            <a href={crumb.href} class="hover:text-fd-foreground transition-colors">
+              {crumb.label}
+            </a>
+          )}
+        </>
+      ))}
+    </nav>
+  )
+}

package/components/docs/PrevNext.astro

@@ -0,0 +1,50 @@
+---
+import { Icon } from "astro-icon/components";
+import type { FlatNavItem } from "../../utils/navigation";
+
+interface Props {
+  prev: FlatNavItem | null;
+  next: FlatNavItem | null;
+}
+
+const { prev, next } = Astro.props;
+---
+
+{
+  (prev || next) && (
+    <div class="flex flex-col sm:flex-row justify-between gap-3 mt-12 pt-6 border-t border-fd-border">
+      {prev ? (
+        <a
+          href={prev.href}
+          class="group flex items-center gap-3 px-4 py-3 rounded-lg border border-fd-border hover:bg-fd-muted/50 transition-colors flex-1"
+        >
+          <Icon name="lucide:chevron-left" class="w-4 h-4 text-fd-muted-foreground shrink-0" />
+          <div class="min-w-0">
+            <span class="text-xs text-fd-muted-foreground block">Previous</span>
+            <span class="text-sm font-medium text-fd-foreground group-hover:text-fd-primary transition-colors truncate block">
+              {prev.label}
+            </span>
+          </div>
+        </a>
+      ) : (
+        <div class="flex-1" />
+      )}
+      {next ? (
+        <a
+          href={next.href}
+          class="group flex items-center justify-end gap-3 px-4 py-3 rounded-lg border border-fd-border hover:bg-fd-muted/50 transition-colors flex-1"
+        >
+          <div class="min-w-0 text-right">
+            <span class="text-xs text-fd-muted-foreground block">Next</span>
+            <span class="text-sm font-medium text-fd-foreground group-hover:text-fd-primary transition-colors truncate block">
+              {next.label}
+            </span>
+          </div>
+          <Icon name="lucide:chevron-right" class="w-4 h-4 text-fd-muted-foreground shrink-0" />
+        </a>
+      ) : (
+        <div class="flex-1" />
+      )}
+    </div>
+  )
+}

package/components/docs/Sidebar.astro

@@ -0,0 +1,28 @@
+---
+import SidebarItem from "./SidebarItem.astro";
+import SidebarGroup from "./SidebarGroup.astro";
+import type { SidebarEntry } from "../../utils/sidebar";
+
+interface Props {
+  entries: SidebarEntry[];
+  currentPath: string;
+}
+
+const { entries, currentPath } = Astro.props;
+const BASE_URL = import.meta.env.BASE_URL || "/";
+const docsHref = `${BASE_URL}docs`;
+---
+
+<div class="space-y-1">
+  <SidebarItem label="Overview" href={docsHref} active={currentPath === docsHref} />
+  {
+    entries.map((entry) => {
+      if (entry.type === "link") {
+        return <SidebarItem label={entry.label} href={entry.href} active={entry.href === currentPath} icon={entry.icon} />;
+      }
+      return (
+        <SidebarGroup label={entry.label} items={entry.items} currentPath={currentPath} depth={0} />
+      );
+    })
+  }
+</div>

package/components/docs/SidebarGroup.astro

@@ -0,0 +1,55 @@
+---
+import { Icon } from "astro-icon/components";
+import SidebarItem from "./SidebarItem.astro";
+import type { SidebarEntry } from "../../utils/sidebar";
+
+interface Props {
+  label: string;
+  items: SidebarEntry[];
+  currentPath: string;
+  depth?: number;
+}
+
+const { label, items, currentPath, depth = 0 } = Astro.props;
+
+function hasActiveDescendant(entries: SidebarEntry[], path: string): boolean {
+  for (const entry of entries) {
+    if (entry.type === "link" && entry.href === path) return true;
+    if (entry.type === "group" && hasActiveDescendant(entry.items, path)) return true;
+  }
+  return false;
+}
+
+const isOpen = hasActiveDescendant(items, currentPath);
+---
+
+{depth === 0 ? (
+  <div class="mt-4 first:mt-0">
+    <p class="px-2 mb-1 text-xs font-semibold text-fd-foreground/80 tracking-wide">{label}</p>
+    <div class="space-y-0.5">
+      {items.map((item) =>
+        item.type === "link" ? (
+          <SidebarItem label={item.label} href={item.href} active={item.href === currentPath} icon={item.icon} />
+        ) : (
+          <Astro.self label={item.label} items={item.items} currentPath={currentPath} depth={depth + 1} />
+        )
+      )}
+    </div>
+  </div>
+) : (
+  <details class="group/sub" open={isOpen}>
+    <summary class="flex items-center gap-1 px-2 py-1.5 text-[13px] font-medium text-fd-muted-foreground hover:text-fd-foreground cursor-pointer select-none list-none [&::-webkit-details-marker]:hidden">
+      <Icon name="lucide:chevron-right" class="w-3 h-3 shrink-0 transition-transform group-open/sub:rotate-90" />
+      {label}
+    </summary>
+    <div class="ml-3 pl-2 border-l border-fd-border/50 space-y-0.5 mt-0.5">
+      {items.map((item) =>
+        item.type === "link" ? (
+          <SidebarItem label={item.label} href={item.href} active={item.href === currentPath} icon={item.icon} />
+        ) : (
+          <Astro.self label={item.label} items={item.items} currentPath={currentPath} depth={depth + 1} />
+        )
+      )}
+    </div>
+  </details>
+)}

package/components/docs/SidebarItem.astro

@@ -0,0 +1,26 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  label: string;
+  href: string;
+  active: boolean;
+  icon?: string;
+}
+
+const { label, href, active, icon } = Astro.props;
+---
+
+<a
+  href={href}
+  class:list={[
+    "flex items-center gap-2 px-2 py-1.5 text-[13px] rounded-md transition-colors",
+    active
+      ? "bg-fd-primary/10 text-fd-primary font-medium"
+      : "text-fd-muted-foreground hover:text-fd-foreground hover:bg-fd-muted/60",
+  ]}
+  aria-current={active ? "page" : undefined}
+>
+  {icon && <Icon name={icon} class="w-3.5 h-3.5 shrink-0 opacity-60" />}
+  {label}
+</a>

package/components/docs/TableOfContents.astro

@@ -0,0 +1,82 @@
+---
+import type { TocItem } from "../../utils/toc";
+
+interface Props {
+  items: TocItem[];
+}
+
+const { items } = Astro.props;
+---
+
+<nav aria-label="Table of contents">
+  <p class="text-xs font-semibold text-fd-foreground/80 mb-3 tracking-wide">On this page</p>
+  <ul class="space-y-0.5 text-[13px] border-l border-fd-border" id="toc-list">
+    {
+      items.map((item) => (
+        <li>
+          <a
+            href={`#${item.slug}`}
+            class="toc-link block py-1 pl-3 -ml-px border-l border-transparent text-fd-muted-foreground hover:text-fd-foreground transition-colors"
+            data-slug={item.slug}
+          >
+            {item.text}
+          </a>
+          {item.children.length > 0 && (
+            <ul class="space-y-0.5">
+              {item.children.map((child) => (
+                <li>
+                  <a
+                    href={`#${child.slug}`}
+                    class="toc-link block py-1 pl-6 -ml-px border-l border-transparent text-fd-muted-foreground hover:text-fd-foreground transition-colors text-[12px]"
+                    data-slug={child.slug}
+                  >
+                    {child.text}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          )}
+        </li>
+      ))
+    }
+  </ul>
+</nav>
+
+<script>
+  const links = document.querySelectorAll<HTMLAnchorElement>(".toc-link");
+  const headings: { id: string; el: Element }[] = [];
+
+  links.forEach((link) => {
+    const slug = link.dataset.slug;
+    if (slug) {
+      const el = document.getElementById(slug);
+      if (el) headings.push({ id: slug, el });
+    }
+  });
+
+  function setActive(slug: string) {
+    links.forEach((link) => {
+      if (link.dataset.slug === slug) {
+        link.classList.add("text-fd-primary", "font-medium", "!border-fd-primary");
+        link.classList.remove("text-fd-muted-foreground", "border-transparent");
+      } else {
+        link.classList.remove("text-fd-primary", "font-medium", "!border-fd-primary");
+        link.classList.add("text-fd-muted-foreground", "border-transparent");
+      }
+    });
+  }
+
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          setActive(entry.target.id);
+          break;
+        }
+      }
+    },
+    { rootMargin: "-80px 0px -70% 0px" },
+  );
+
+  headings.forEach(({ el }) => observer.observe(el));
+</script>

package/components/global/SearchModal.astro

@@ -0,0 +1,159 @@
+---
+import { Icon } from "astro-icon/components";
+---
+
+<dialog
+  id="search-dialog"
+  class="fixed inset-0 z-50 m-0 w-full h-full max-w-full max-h-full bg-transparent p-0 open:flex items-start justify-center pt-[15vh]"
+>
+  <div class="absolute inset-0 bg-black/50 backdrop-blur-sm" id="search-backdrop"></div>
+  <div class="relative w-full max-w-xl mx-4 bg-fd-popover rounded-2xl shadow-2xl border border-fd-border overflow-hidden">
+    <!-- Search header -->
+    <div class="flex items-center gap-3 px-4 border-b border-fd-border">
+      <Icon name="lucide:search" class="w-5 h-5 text-fd-muted-foreground shrink-0" />
+      <input
+        id="search-input"
+        type="search"
+        placeholder="Search documentation..."
+        class="flex-1 py-4 bg-transparent text-fd-foreground placeholder:text-fd-muted-foreground outline-none text-sm"
+        autocomplete="off"
+      />
+      <kbd class="hidden sm:inline-flex items-center rounded border border-fd-border bg-fd-muted px-1.5 py-0.5 text-[10px] font-mono text-fd-muted-foreground">
+        ESC
+      </kbd>
+    </div>
+
+    <!-- Search results -->
+    <div id="search-results" class="max-h-80 overflow-y-auto p-2 scrollbar-thin">
+      <div class="text-center py-8 text-sm text-fd-muted-foreground" id="search-empty">
+        Start typing to search...
+      </div>
+    </div>
+
+    <!-- Footer -->
+    <div class="flex items-center gap-4 px-4 py-2.5 border-t border-fd-border text-xs text-fd-muted-foreground">
+      <span class="flex items-center gap-1">
+        <kbd class="inline-flex items-center rounded border border-fd-border bg-fd-muted px-1 py-0.5 font-mono">↵</kbd>
+        to select
+      </span>
+      <span class="flex items-center gap-1">
+        <kbd class="inline-flex items-center rounded border border-fd-border bg-fd-muted px-1 py-0.5 font-mono">↑↓</kbd>
+        to navigate
+      </span>
+      <span class="flex items-center gap-1">
+        <kbd class="inline-flex items-center rounded border border-fd-border bg-fd-muted px-1 py-0.5 font-mono">esc</kbd>
+        to close
+      </span>
+    </div>
+  </div>
+</dialog>
+
+<script>
+  const dialog = document.getElementById("search-dialog") as HTMLDialogElement;
+  const input = document.getElementById("search-input") as HTMLInputElement;
+  const backdrop = document.getElementById("search-backdrop");
+  const results = document.getElementById("search-results");
+  const empty = document.getElementById("search-empty");
+  let pagefind: any = null;
+
+  async function loadPagefind() {
+    if (pagefind) return pagefind;
+    try {
+      // pagefind = await import("/pagefind/pagefind.js");
+      // await pagefind.init();
+    } catch {
+      // Pagefind not available in dev mode
+      pagefind = null;
+    }
+    return pagefind;
+  }
+
+  function openSearch() {
+    dialog?.showModal();
+    input?.focus();
+    loadPagefind();
+  }
+
+  function closeSearch() {
+    dialog?.close();
+    if (input) input.value = "";
+    if (results && empty) {
+      results.innerHTML = "";
+      results.appendChild(empty);
+      empty.textContent = "Start typing to search...";
+    }
+  }
+
+  // Triggers
+  document.getElementById("search-trigger")?.addEventListener("click", openSearch);
+  document.getElementById("search-trigger-mobile")?.addEventListener("click", openSearch);
+  backdrop?.addEventListener("click", closeSearch);
+
+  // Keyboard shortcut
+  document.addEventListener("keydown", (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+      e.preventDefault();
+      if (dialog?.open) closeSearch();
+      else openSearch();
+    }
+    if (e.key === "Escape" && dialog?.open) {
+      closeSearch();
+    }
+  });
+
+  // Search input
+  let debounce: ReturnType<typeof setTimeout>;
+  input?.addEventListener("input", () => {
+    clearTimeout(debounce);
+    debounce = setTimeout(async () => {
+      const query = input.value.trim();
+      if (!query || !results) {
+        if (results && empty) {
+          results.innerHTML = "";
+          results.appendChild(empty);
+          empty.textContent = query ? "No results found." : "Start typing to search...";
+        }
+        return;
+      }
+
+      const pf = await loadPagefind();
+      if (!pf) {
+        if (results && empty) {
+          results.innerHTML = "";
+          results.appendChild(empty);
+          empty.textContent = "Search is available after building the site.";
+        }
+        return;
+      }
+
+      const search = await pf.search(query);
+      results.innerHTML = "";
+
+      if (search.results.length === 0) {
+        results.appendChild(empty!);
+        empty!.textContent = "No results found.";
+        return;
+      }
+
+      for (const result of search.results.slice(0, 8)) {
+        const data = await result.data();
+        const a = document.createElement("a");
+        a.href = data.url;
+        a.className =
+          "block px-3 py-2.5 rounded-lg hover:bg-fd-muted transition-colors group";
+        a.innerHTML = `
+          <div class="font-medium text-sm text-fd-foreground group-hover:text-fd-primary transition-colors">${data.meta.title || "Untitled"}</div>
+          <div class="text-xs text-fd-muted-foreground mt-0.5 line-clamp-1">${data.excerpt}</div>
+        `;
+        a.addEventListener("click", closeSearch);
+        results.appendChild(a);
+      }
+    }, 200);
+  });
+</script>
+
+<style>
+  dialog::backdrop {
+    background: transparent;
+  }
+</style>

package/components/mdx/Accordion.astro

@@ -0,0 +1,20 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  title: string;
+  open?: boolean;
+}
+
+const { title, open = false } = Astro.props;
+---
+
+<details class="my-4 rounded-lg border border-fd-border group" open={open}>
+  <summary class="flex items-center justify-between cursor-pointer px-4 py-3 text-sm font-medium hover:bg-fd-muted/50 transition-colors rounded-lg select-none list-none [&::-webkit-details-marker]:hidden">
+    <span>{title}</span>
+    <Icon name="lucide:chevron-down" class="w-4 h-4 text-fd-muted-foreground transition-transform group-open:rotate-180" />
+  </summary>
+  <div class="px-4 pb-4 text-sm [&>p]:mb-2">
+    <slot />
+  </div>
+</details>

package/components/mdx/Callout.astro

@@ -0,0 +1,53 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  type?: "note" | "warning" | "tip" | "danger";
+  title?: string;
+}
+
+const { type = "note", title } = Astro.props;
+
+const styles = {
+  note: {
+    bg: "bg-blue-500/5 dark:bg-blue-500/10",
+    border: "border-blue-500/20",
+    iconColor: "text-blue-500",
+    icon: "lucide:info",
+  },
+  warning: {
+    bg: "bg-amber-500/5 dark:bg-amber-500/10",
+    border: "border-amber-500/20",
+    iconColor: "text-amber-500",
+    icon: "lucide:triangle-alert",
+  },
+  tip: {
+    bg: "bg-emerald-500/5 dark:bg-emerald-500/10",
+    border: "border-emerald-500/20",
+    iconColor: "text-emerald-500",
+    icon: "lucide:lightbulb",
+  },
+  danger: {
+    bg: "bg-red-500/5 dark:bg-red-500/10",
+    border: "border-red-500/20",
+    iconColor: "text-red-500",
+    icon: "lucide:octagon-alert",
+  },
+};
+
+const c = styles[type];
+---
+
+<div class:list={[
+  "my-4 flex gap-3 rounded-lg border px-4 py-3",
+  title ? "items-start" : "items-center",
+  c.border, c.bg,
+]}>
+  <Icon name={c.icon} class={`w-5 h-5 shrink-0 ${c.iconColor}`} />
+  <div class="min-w-0 flex-1">
+    {title && <p class={`font-medium text-sm mb-1 ${c.iconColor}`}>{title}</p>}
+    <div class="callout-content text-sm text-fd-foreground/90">
+      <slot />
+    </div>
+  </div>
+</div>

package/components/mdx/Card.astro

@@ -0,0 +1,26 @@
+---
+import { Icon } from "astro-icon/components";
+
+interface Props {
+  title: string;
+  href?: string;
+  icon?: string;
+}
+
+const { title, href, icon } = Astro.props;
+const Tag = href ? "a" : "div";
+---
+
+<Tag
+  href={href}
+  class:list={[
+    "block rounded-lg border border-fd-border p-4 transition-colors",
+    href && "hover:border-fd-primary/50 hover:bg-fd-muted/50",
+  ]}
+>
+  {icon && <Icon name={icon} class="w-5 h-5 mb-2 text-fd-primary" />}
+  <h3 class="font-semibold text-sm mb-1">{title}</h3>
+  <div class="text-sm text-fd-muted-foreground [&>p]:mb-0">
+    <slot />
+  </div>
+</Tag>

package/components/mdx/CardGrid.astro

@@ -0,0 +1,16 @@
+---
+interface Props {
+  cols?: 2 | 3;
+}
+
+const { cols = 2 } = Astro.props;
+---
+
+<div
+  class:list={[
+    "grid gap-4 my-5 not-prose",
+    cols === 3 ? "sm:grid-cols-2 lg:grid-cols-3" : "sm:grid-cols-2",
+  ]}
+>
+  <slot />
+</div>

package/components/mdx/CodeTabs.astro

@@ -0,0 +1,129 @@
+---
+interface Props {
+  id?: string;
+}
+
+const { id = "tabs-" + Math.random().toString(36).slice(2, 8) } = Astro.props;
+const tabs = await Astro.slots.render("default");
+const labels: string[] = [];
+
+// Extract labels from Tab components
+const labelMatches = tabs.matchAll(/data-tab-label="([^"]+)"/g);
+for (const match of labelMatches) {
+  labels.push(match[1]);
+}
+---
+
+<div class="code-tabs" data-tabs-id={id}>
+  <!-- Tab buttons -->
+  <div class="code-tabs-header" role="tablist">
+    {
+      labels.map((label, i) => (
+        <button
+          role="tab"
+          class="code-tabs-trigger"
+          data-tab-index={i}
+          aria-selected={i === 0 ? "true" : "false"}
+        >
+          {label}
+        </button>
+      ))
+    }
+  </div>
+  <!-- Tab panels -->
+  <div class="code-tabs-panels" set:html={tabs} />
+</div>
+
+<style>
+  .code-tabs {
+    border: 1px solid var(--color-fd-border);
+    border-radius: 0.5rem;
+    overflow: hidden;
+    margin-top: 0;
+    margin-bottom: 1rem;
+  }
+
+  .code-tabs-header {
+    display: flex;
+    background-color: var(--color-fd-muted);
+    border-bottom: 1px solid var(--color-fd-border);
+  }
+
+  .code-tabs-trigger {
+    padding: 0.375rem 0.75rem;
+    font-size: 0.8rem;
+    font-family: var(--font-sans);
+    font-weight: 500;
+    color: var(--color-fd-muted-foreground);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    transition: color 0.15s;
+    border-bottom: 2px solid transparent;
+    margin-bottom: -1px;
+  }
+
+  .code-tabs-trigger:hover {
+    color: var(--color-fd-foreground);
+  }
+
+  .code-tabs-trigger[aria-selected="true"] {
+    color: var(--color-fd-foreground);
+    border-bottom-color: var(--color-fd-primary);
+  }
+
+  /* Strip EC styling from nested code blocks */
+  .code-tabs-panels :global(.expressive-code) {
+    margin: 0 !important;
+  }
+
+  .code-tabs-panels :global(.expressive-code .frame) {
+    --ec-brdRad: 0 !important;
+    --ec-brdWd: 0 !important;
+    box-shadow: none !important;
+    border: none !important;
+    border-radius: 0 !important;
+  }
+
+  .code-tabs-panels :global(.expressive-code figcaption.header) {
+    display: none !important;
+  }
+
+  .code-tabs-panels :global(pre) {
+    margin: 0 !important;
+    border-radius: 0 !important;
+  }
+
+  .code-tabs-panels :global(figure.frame) {
+    margin: 0 !important;
+    border-radius: 0 !important;
+  }
+</style>
+
+<script>
+  document.querySelectorAll<HTMLElement>(".code-tabs").forEach((wrapper) => {
+    const triggers = wrapper.querySelectorAll<HTMLButtonElement>(".code-tabs-trigger");
+    const panels = wrapper.querySelectorAll<HTMLElement>(":scope > .code-tabs-panels > .tab-panel");
+    const id = wrapper.dataset.tabsId || "";
+
+    function activate(index: number) {
+      triggers.forEach((t, i) => {
+        t.setAttribute("aria-selected", String(i === index));
+      });
+      panels.forEach((p, i) => {
+        p.classList.toggle("hidden", i !== index);
+      });
+      if (id) localStorage.setItem(`tab-${id}`, String(index));
+    }
+
+    triggers.forEach((trigger) => {
+      trigger.addEventListener("click", () => {
+        activate(Number(trigger.dataset.tabIndex));
+      });
+    });
+
+    // Restore from localStorage or default to first tab
+    const stored = id ? localStorage.getItem(`tab-${id}`) : null;
+    activate(stored !== null ? Number(stored) : 0);
+  });
+</script>