@ansiversa/components 0.0.18 → 0.0.19

package/index.ts

@@ -10,7 +10,18 @@ export { default as AvFeatureItem } from './src/AvFeatureItem.astro';
 export { default as AvFeatureList } from './src/AvFeatureList.astro';
 export { default as AvFooter } from './src/AvFooter.astro';
 export { default as AvInput } from './src/AvInput.astro';
+export { default as AvSelect } from './src/AvSelect.astro';
+export { default as AvTextarea } from './src/AvTextarea.astro';
 export { default as AvNavbar } from './src/AvNavbar.astro';
 export { default as AvNavbarActions } from './src/AvNavbarActions.astro';
 export { default as AvTimeline } from './src/AvTimeline.astro';
-
+export { default as AvBreadcrumb } from './src/AvBreadcrumb.astro';
+export { default as AvActionSwitcher } from './src/AvActionSwitcher.astro';
+export { default as AvPageHeader } from './src/AvPageHeader.astro';
+export { default as AvToolbar } from './src/AvToolbar.astro';
+export { default as AvEmptyState } from './src/AvEmptyState.astro';
+export { default as AvItemList } from './src/AvItemList.astro';
+export { default as AvChipList } from './src/AvChipList.astro';
+export { default as AvTemplateCard } from './src/AvTemplateCard.astro';
+export { default as AvTemplateGrid } from './src/AvTemplateGrid.astro';
+export { default as AvDrawer } from './src/AvDrawer.astro';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.18",
+  "version": "0.0.19",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {

package/src/AvActionSwitcher.astro

@@ -0,0 +1,177 @@
+---
+import AvButton from "./AvButton.astro";
+import AvCard from "./AvCard.astro";
+
+const actions = [
+  {
+    label: "Home",
+    description: "Learn what the builder offers and start a resume quickly.",
+    href: "/",
+  },
+  {
+    label: "Resume Templates",
+    description: "Pick a layout before you start editing.",
+    href: "/templates",
+  },
+  {
+    label: "Create Resume",
+    description: "Open the guided editor with your chosen template.",
+    href: "/app/resume/new",
+  },
+  {
+    label: "My Resumes",
+    description: "Review and edit saved resumes in one place.",
+    href: "/app/resumes",
+  },
+  {
+    label: "Edit Sample Resume",
+    description: "Jump into the sample editor to see the workflow.",
+    href: "/app/resume/r1",
+  },
+  {
+    label: "Download Sample PDF",
+    description: "Preview the PDF output for a resume.",
+    href: "/app/resume/r1/pdf",
+  },
+];
+---
+
+<div
+  class="av-action-switcher"
+  x-data="{ open: false }"
+  x-init="window.addEventListener('keydown', (event) => { if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') { event.preventDefault(); open = !open; } })"
+  @keydown.escape.window="open = false"
+  @click.outside="open = false"
+>
+  <button
+    class="av-action-switcher__toggle"
+    type="button"
+    aria-label="Open quick actions"
+    :aria-expanded="open"
+    aria-haspopup="true"
+    @keydown.enter.prevent="open = !open"
+    @click="open = !open"
+  >
+    <span x-show="!open">Open actions</span>
+    <span x-show="open">Close actions</span>
+  </button>
+
+  <div
+    class="av-action-switcher__panel"
+    x-show="open"
+    x-cloak
+    x-transition.origin.bottom.right
+    role="menu"
+    aria-label="Quick navigation"
+  >
+    <AvCard className="av-action-switcher__card">
+      <div class="av-action-switcher__header">
+        <p class="av-action-switcher__title">Quick actions</p>
+        <p class="av-action-switcher__subtitle">Move between pages without losing context.</p>
+      </div>
+      <ul class="av-action-switcher__list">
+        {actions.map((action) => (
+          <li role="none">
+            <div class="av-action-switcher__item">
+              <div class="av-action-switcher__item-text">
+                <p class="av-action-switcher__item-label">{action.label}</p>
+                <p class="av-action-switcher__item-description">{action.description}</p>
+              </div>
+              <AvButton href={action.href} size="sm" aria-label={`Go to ${action.label}`} role="menuitem">
+                Go
+              </AvButton>
+            </div>
+          </li>
+        ))}
+      </ul>
+    </AvCard>
+  </div>
+</div>
+
+<style>
+  .av-action-switcher {
+    position: fixed;
+    right: 1.5rem;
+    bottom: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    z-index: 40;
+  }
+
+  .av-action-switcher__toggle {
+    background: linear-gradient(135deg, #2563eb, #0ea5e9);
+    color: #fff;
+    border: none;
+    border-radius: 9999px;
+    padding: 0.75rem 1.25rem;
+    font-weight: 600;
+    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.25);
+    cursor: pointer;
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  .av-action-switcher__toggle:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.35);
+  }
+
+  .av-action-switcher__panel {
+    width: min(420px, calc(100vw - 2rem));
+    align-self: flex-end;
+  }
+
+  .av-action-switcher__card {
+    border: 1px solid rgb(226, 232, 240);
+    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.14);
+  }
+
+  .av-action-switcher__header {
+    margin-bottom: 0.75rem;
+  }
+
+  .av-action-switcher__title {
+    font-weight: 700;
+    color: rgb(15, 23, 42);
+  }
+
+  .av-action-switcher__subtitle {
+    font-size: 0.9375rem;
+    color: rgb(100, 116, 139);
+  }
+
+  .av-action-switcher__list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .av-action-switcher__item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.75rem;
+    border-radius: 0.75rem;
+    background-color: rgb(248, 250, 252);
+  }
+
+  .av-action-switcher__item-text {
+    display: grid;
+    gap: 0.25rem;
+  }
+
+  .av-action-switcher__item-label {
+    font-weight: 600;
+    color: rgb(30, 41, 59);
+  }
+
+  .av-action-switcher__item-description {
+    font-size: 0.9375rem;
+    color: rgb(100, 116, 139);
+  }
+
+  [x-cloak] {
+    display: none !important;
+  }
+</style>

package/src/AvBrand.astro

@@ -14,22 +14,39 @@ interface Props {
 
   /** Extra classes if needed */
   className?: string;
+
+  /** Additional HTML attributes */
+  [attrs: string]: any;
 }
 
 const {
-  href = "/",
+  href = (() => {
+    const rawDomain = (import.meta.env.ANSIVERSA_COOKIE_DOMAIN || "ansiversa.com").trim();
+    const normalizedDomain = rawDomain.replace(/^(https?:\/\/)/i, "").replace(/\/+$/, "");
+    const protocol = rawDomain.match(/^https?:\/\//i)
+      ? undefined
+      : import.meta.env.PROD
+        ? "https"
+        : "http";
+    const ROOT_URL = rawDomain.match(/^https?:\/\//i)
+      ? rawDomain.replace(/\/+$/, "")
+      : `${protocol}://${normalizedDomain}`;
+
+    return ROOT_URL;
+  })(),
   title = "ANSIVERSA",
   subtitle = "Curated Apps",
   logo = "/favicon.svg",
   className = "",
-} = Astro.props;
+  ...attrs
+} = Astro.props as Props;
 
 const classes = ["av-navbar-brand"];
 if (className) classes.push(className);
 const classAttr = classes.join(" ");
 ---
 
-<a href={href} class={classAttr}>
+<a href={href} class={classAttr} {...attrs}>
   <div class="av-navbar-brand__logo">
     <img src={logo} alt="Ansiversa logo" />
   </div>

package/src/AvBreadcrumb.astro

@@ -0,0 +1,110 @@
+---
+import AvButton from "./AvButton.astro";
+import AvContainer from "./AvContainer.astro";
+
+interface Crumb {
+  label: string;
+  href?: string;
+}
+
+interface Props {
+  items: Crumb[];
+  className?: string;
+  [attr: string]: any; // allow extra attrs like x-data, x-ref, etc.
+}
+
+const {
+  items,
+  className = "",
+  ...attrs
+} = Astro.props as Props;
+
+const rootClasses = ["av-breadcrumb"];
+if (className) rootClasses.push(className);
+const rootClassAttr = rootClasses.join(" ");
+---
+
+<nav class={rootClassAttr} aria-label="Breadcrumb" {...attrs}>
+  <AvContainer className="av-breadcrumb__container">
+    <ol class="av-breadcrumb__list">
+      {items.map((item, index) => {
+        const isLast = index === items.length - 1;
+
+        return (
+          <li
+            class="av-breadcrumb__item"
+            aria-current={isLast ? "page" : undefined}
+          >
+            {item.href && !isLast ? (
+              <AvButton
+                href={item.href}
+                variant="ghost"
+                size="sm"
+                className="av-breadcrumb__link"
+              >
+                {item.label}
+              </AvButton>
+            ) : (
+              <span class={isLast ? "av-breadcrumb__current" : "av-breadcrumb__label"}>
+                {item.label}
+              </span>
+            )}
+
+            {!isLast && (
+              <span class="av-breadcrumb__separator" aria-hidden="true">
+                /
+              </span>
+            )}
+          </li>
+        );
+      })}
+    </ol>
+  </AvContainer>
+</nav>
+
+<style>
+  .av-breadcrumb {
+    width: 100%;
+  }
+
+  .av-breadcrumb__container {
+    /* Left aligned by default – container just gives padding/max-width */
+  }
+
+  .av-breadcrumb__list {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+    padding: 0;
+    margin: 0;
+    list-style: none;
+    font-size: var(--ans-font-size-caption, 0.8125rem);
+    color: var(--ans-muted-fg, #6b7280);
+  }
+
+  .av-breadcrumb__item {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.25rem;
+    white-space: nowrap;
+  }
+
+  .av-breadcrumb__link {
+    padding-inline: 0.5rem;
+    padding-block: 0.25rem;
+  }
+
+  .av-breadcrumb__label {
+    color: var(--ans-muted-fg, #6b7280);
+  }
+
+  .av-breadcrumb__current {
+    font-weight: 500;
+    color: var(--ans-fg, #111827);
+  }
+
+  .av-breadcrumb__separator {
+    margin-inline: 0.125rem;
+    color: var(--ans-border-subtle, #d1d5db);
+  }
+</style>

package/src/AvCard.astro

@@ -4,11 +4,15 @@ interface Props {
   variant?: "default" | "auth" | "soft";
   /** Extra classes for the outer wrapper */
   className?: string;
+
+  /** Additional HTML attributes */
+  [attrs: string]: any;
 }
 
 const {
   variant = "default",
   className = "",
+  ...attrs
 } = Astro.props as Props;
 
 const classes: string[] = [];
@@ -33,6 +37,6 @@ if (className) {
 const classAttr = classes.join(" ");
 ---
 
-<div class={classAttr}>
+<div class={classAttr} {...attrs}>
   <slot />
 </div>

package/src/AvCheckbox.astro

@@ -14,6 +14,9 @@ interface Props {
   className?: string;
   /** Optional hint text below the checkbox */
   hint?: string;
+
+  /** Additional HTML attributes */
+  [attrs: string]: any;
 }
 
 const props = Astro.props as Props;
@@ -25,6 +28,7 @@ const {
   checked = false,
   className = "",
   hint = "",
+  ...attrs
 } = props;
 
 const id = props.id ?? name ?? `checkbox-${Math.random().toString(36).slice(2)}`;
@@ -42,6 +46,7 @@ if (className) wrapperClasses.push(className);
       class="av-checkbox"
       required={required}
       checked={checked}
+      {...attrs}
     />
     <span>
       {label ? label : <slot />}

package/src/AvChipList.astro

@@ -0,0 +1,18 @@
+---
+interface Chip {
+  id: string;
+  label: string;
+}
+
+interface Props {
+  chips: Chip[];
+}
+
+const { chips } = Astro.props as Props;
+---
+
+<div class="av-chip-list">
+  {chips.map((chip) => (
+    <span class="av-chip-list__chip">{chip.label}</span>
+  ))}
+</div>

package/src/AvContainer.astro

@@ -5,12 +5,16 @@ interface Props {
 
   /** Extra classes */
   className?: string;
+
+  /** Additional HTML attributes */
+  [attrs: string]: any;
 }
 
 const {
   size = "default",
   className = "",
-} = Astro.props;
+  ...attrs
+} = Astro.props as Props;
 
 // Base
 const classes = ["av-container"];
@@ -25,6 +29,6 @@ if (className) classes.push(className);
 const classAttr = classes.join(" ");
 ---
 
-<div class={classAttr}>
+<div class={classAttr} {...attrs}>
   <slot />
 </div>

package/src/AvDivider.astro

@@ -2,12 +2,18 @@
 interface Props {
   /** Extra classes for customization */
   className?: string;
+
+  /** Additional HTML attributes */
+  [attrs: string]: any;
 }
 
-const { className = "" } = Astro.props as Props;
+const {
+  className = "",
+  ...attrs
+} = Astro.props as Props;
 const classes = ["av-divider"];
 if (className) classes.push(className);
 const classAttr = classes.join(" ");
 ---
 
-<div class={classAttr} />
+<div class={classAttr} {...attrs} />

package/src/AvDrawer.astro

@@ -0,0 +1,133 @@
+---
+interface Props {
+  title?: string;
+  description?: string;
+}
+
+const { title, description } = Astro.props as Props;
+---
+
+<div class="av-drawer-root">
+  <div class="av-drawer-backdrop" aria-hidden="true"></div>
+  <aside
+    class="av-drawer"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby={title ? "av-drawer-title" : undefined}
+  >
+    <header class="av-drawer__header">
+      {title && (
+        <h2 id="av-drawer-title" class="av-drawer__title">
+          {title}
+        </h2>
+      )}
+      {description && <p class="av-drawer__description">{description}</p>}
+      <button
+        type="button"
+        class="av-drawer__close"
+        aria-label="Close"
+        x-on:click="$dispatch('close-drawer')"
+      >
+        <span aria-hidden="true">×</span>
+      </button>
+    </header>
+
+    <div class="av-drawer__body">
+      <slot />
+    </div>
+
+    <footer class="av-drawer__footer">
+      <slot name="footer" />
+    </footer>
+  </aside>
+</div>
+
+<style>
+  .av-drawer-root {
+    position: fixed;
+    inset: 0;
+    z-index: 40;
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .av-drawer-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(15, 23, 42, 0.55);
+    backdrop-filter: blur(2px);
+  }
+
+  .av-drawer {
+    position: relative;
+    width: 100%;
+    max-width: 420px;
+    height: 100%;
+    background: var(--av-surface, #020617);
+    border-left: 1px solid rgba(148, 163, 184, 0.35);
+    box-shadow: -12px 0 40px rgba(15, 23, 42, 0.7);
+    display: flex;
+    flex-direction: column;
+  }
+
+  .av-drawer__header {
+    padding: 1.25rem 1.5rem;
+    border-bottom: 1px solid rgba(51, 65, 85, 0.8);
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    position: relative;
+  }
+
+  .av-drawer__title {
+    font-size: 1rem;
+    font-weight: 600;
+    color: var(--av-fg-strong, #e5e7eb);
+  }
+
+  .av-drawer__description {
+    font-size: 0.875rem;
+    color: var(--av-fg-muted, #9ca3af);
+  }
+
+  .av-drawer__close {
+    position: absolute;
+    right: 1.25rem;
+    top: 1.1rem;
+    border-radius: 999px;
+    width: 1.75rem;
+    height: 1.75rem;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: var(--av-fg-muted, #9ca3af);
+    cursor: pointer;
+  }
+
+  .av-drawer__close:hover {
+    background: rgba(15, 23, 42, 0.8);
+    color: var(--av-fg-strong, #e5e7eb);
+  }
+
+  .av-drawer__body {
+    padding: 1.25rem 1.5rem;
+    flex: 1;
+    overflow-y: auto;
+  }
+
+  .av-drawer__footer {
+    padding: 0.75rem 1.5rem;
+    border-top: 1px solid rgba(51, 65, 85, 0.8);
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+  }
+
+  @media (max-width: 640px) {
+    .av-drawer {
+      max-width: 100%;
+    }
+  }
+</style>

package/src/AvEmptyState.astro

@@ -0,0 +1,25 @@
+---
+import AvButton from "./AvButton.astro";
+import AvCard from "./AvCard.astro";
+
+interface Props {
+  title: string;
+  description?: string;
+  ctaLabel?: string;
+  ctaHref?: string;
+}
+
+const { title, description, ctaLabel, ctaHref } = Astro.props as Props;
+---
+
+<AvCard className="av-empty-state">
+  <div class="av-empty-state__body">
+    <h3 class="av-empty-state__title">{title}</h3>
+    {description && <p class="av-empty-state__description">{description}</p>}
+    {ctaLabel && ctaHref && (
+      <AvButton href={ctaHref} variant="primary">
+        {ctaLabel}
+      </AvButton>
+    )}
+  </div>
+</AvCard>

package/src/AvFeatureItem.astro

@@ -4,11 +4,15 @@ interface Props {
   variant?: "primary" | "secondary" | "default";
   /** Extra classes for the item wrapper */
   className?: string;
+
+  /** Additional HTML attributes */
+  [attrs: string]: any;
 }
 
 const {
   variant = "default",
   className = "",
+  ...attrs
 } = Astro.props as Props;
 
 const itemClasses = ["av-feature-item"];
@@ -19,7 +23,7 @@ if (variant === "primary") dotClasses.push("av-feature-dot--primary");
 if (variant === "secondary") dotClasses.push("av-feature-dot--secondary");
 ---
 
-<div class={itemClasses.join(" ")}>
+<div class={itemClasses.join(" ")} {...attrs}>
   <span class={dotClasses.join(" ")}></span>
   <span>
     <slot />

package/src/AvFeatureList.astro

@@ -2,14 +2,20 @@
 interface Props {
   /** Extra classes for the list wrapper */
   className?: string;
+
+  /** Additional HTML attributes */
+  [attrs: string]: any;
 }
 
-const { className = "" } = Astro.props as Props;
+const {
+  className = "",
+  ...attrs
+} = Astro.props as Props;
 const classes = ["av-feature-list"];
 if (className) classes.push(className);
 const classAttr = classes.join(" ");
 ---
 
-<div class={classAttr}>
+<div class={classAttr} {...attrs}>
   <slot />
 </div>

package/src/AvFooter.astro

@@ -13,6 +13,9 @@ interface Props {
 
   /** Extra classes for the wrapper */
   className?: string;
+
+  /** Additional HTML attributes */
+  [attrs: string]: any;
 }
 
 const {
@@ -22,14 +25,15 @@ const {
   ],
   tagline = "Advanced Next-Gen Software Innovation and Versatility.",
   className = "",
-} = Astro.props;
+  ...attrs
+} = Astro.props as Props;
 
 const classes = ["av-footer"];
 if (className) classes.push(className);
 const classAttr = classes.join(" ");
 ---
 
-<footer class={classAttr}>
+<footer class={classAttr} {...attrs}>
   <div class="av-footer-inner">
     <p class="av-caption">
       © {new Date().getFullYear()} Ansiversa. All rights reserved.

package/src/AvInput.astro

@@ -12,6 +12,7 @@ interface Props {
   id?: string;
   hint?: string;
   autocomplete?: string;
+  [attrs: string]: any;
 }
 
 const props = Astro.props as Props;
@@ -29,6 +30,7 @@ const {
   id = name ?? `input-${Math.random().toString(36).slice(2)}`,
   hint = "",
   autocomplete,
+  ...attrs 
 } = props;
 
 const wrapperClasses = ["av-form-group", "av-input-wrapper"];
@@ -63,6 +65,7 @@ const isPassword = type === "password";
       required={required}
       disabled={disabled}
       autocomplete={autocomplete}
+      {...attrs}
     />
 
     <!-- PASSWORD TOGGLE BUTTON -->

package/src/AvItemList.astro

@@ -0,0 +1,25 @@
+---
+interface Item {
+  id: string;
+  title: string;
+  subtitle?: string;
+  meta?: string;
+  isCurrent?: boolean;
+}
+
+interface Props {
+  items: Item[];
+}
+
+const { items } = Astro.props as Props;
+---
+
+<ul class="av-item-list">
+  {items.map((item) => (
+    <li class="av-item-list__item" data-current={item.isCurrent ? "true" : undefined}>
+      <p class="av-item-list__title">{item.title}</p>
+      {item.subtitle && <p class="av-item-list__subtitle">{item.subtitle}</p>}
+      {item.meta && <p class="av-item-list__meta">{item.meta}</p>}
+    </li>
+  ))}
+</ul>

package/src/AvNavbar.astro

@@ -2,18 +2,22 @@
 interface Props {
   /** Extra classes for the header element */
   className?: string;
+
+  /** Additional HTML attributes */
+  [attrs: string]: any;
 }
 
 const {
   className = "",
-} = Astro.props;
+  ...attrs
+} = Astro.props as Props;
 
 const classes = ["av-navbar"];
 if (className) classes.push(className);
 const classAttr = classes.join(" ");
 ---
 
-<header class={classAttr}>
+<header class={classAttr} {...attrs}>
   <div class="av-navbar-inner">
     <slot />
   </div>

package/src/AvNavbarActions.astro

@@ -17,9 +17,16 @@ interface User {
 interface Props {
   className?: string;
   user?: User;
+
+  /** Additional HTML attributes */
+  [attrs: string]: any;
 }
 
-const { className = "", user } = Astro.props as Props;
+const {
+  className = "",
+  user,
+  ...attrs
+} = Astro.props as Props;
 
 const classes = ["av-navbar-actions"];
 if (className) classes.push(className);
@@ -87,7 +94,7 @@ const userInitial =
   (user?.name?.charAt(0) ?? user?.email?.charAt(0) ?? "?").toUpperCase();
 ---
 
-<div class={classAttr}>
+<div class={classAttr} {...attrs}>
   <!-- Left: Always visible -->
   {baseLinks.map((item) => (
     <AvButton

package/src/AvPageHeader.astro

@@ -0,0 +1,42 @@
+---
+import AvButton from "./AvButton.astro";
+import AvContainer from "./AvContainer.astro";
+
+interface Action {
+  label: string;
+  href: string;
+  variant?: string;
+}
+
+interface Props {
+  title: string;
+  description?: string;
+  primaryAction?: Action;
+  secondaryAction?: Action;
+}
+
+const { title, description, primaryAction, secondaryAction } = Astro.props as Props;
+---
+
+<section class="av-page-header">
+  <AvContainer className="av-page-header__container">
+    <div class="av-page-header__body">
+      <h1 class="av-page-header__title">{title}</h1>
+      {description && <p class="av-page-header__description">{description}</p>}
+      {(primaryAction || secondaryAction) && (
+        <div class="av-page-header__actions">
+          {primaryAction && (
+            <AvButton href={primaryAction.href} variant={primaryAction.variant ?? "primary"}>
+              {primaryAction.label}
+            </AvButton>
+          )}
+          {secondaryAction && (
+            <AvButton href={secondaryAction.href} variant={secondaryAction.variant ?? "ghost"}>
+              {secondaryAction.label}
+            </AvButton>
+          )}
+        </div>
+      )}
+    </div>
+  </AvContainer>
+</section>

package/src/AvSelect.astro

@@ -0,0 +1,59 @@
+---
+interface Props {
+  label?: string;
+  name?: string;
+  required?: boolean;
+  disabled?: boolean;
+  className?: string;
+  selectClass?: string;
+  id?: string;
+  hint?: string;
+
+  /** Additional HTML attributes */
+  [attrs: string]: any;
+}
+
+const props = Astro.props as Props;
+
+const {
+  label,
+  name,
+  required = false,
+  disabled = false,
+  className = "",
+  selectClass = "",
+  id = name ?? `select-${Math.random().toString(36).slice(2)}`,
+  hint = "",
+  ...attrs
+} = props;
+
+const wrapperClasses: string[] = ["av-form-group", "av-input-wrapper"];
+if (className) wrapperClasses.push(className);
+
+const selectClasses: string[] = ["av-input"];
+if (selectClass) selectClasses.push(selectClass);
+---
+
+<div class={wrapperClasses.join(" ")}>
+  {label && (
+    <label class="av-input-label" for={id}>
+      {label}
+      {required && <span class="av-input-required">*</span>}
+    </label>
+  )}
+
+  <div class="av-input-select-wrapper">
+    <select
+      id={id}
+      name={name}
+      class={selectClasses.join(" ")}
+      disabled={disabled}
+      required={required}
+      {...attrs}
+    >
+      <slot />
+    </select>
+  </div>
+
+  {hint && <p class="av-form-hint">{hint}</p>}
+</div>

package/src/AvTemplateCard.astro

@@ -0,0 +1,24 @@
+---
+import AvButton from "./AvButton.astro";
+import AvCard from "./AvCard.astro";
+
+interface Props {
+  name: string;
+  description: string;
+  accentClass?: string;
+  href?: string;
+}
+
+const { name, description, accentClass, href = "#" } = Astro.props as Props;
+---
+
+<AvCard className={`av-template-card ${accentClass ?? ""}`.trim()}>
+  <div class="av-template-card__header">
+    <p class="av-template-card__name">{name}</p>
+    <span class="av-template-card__accent" aria-hidden="true"></span>
+  </div>
+  <p class="av-template-card__description">{description}</p>
+  <div class="av-template-card__actions">
+    <AvButton href={href}>Use Template</AvButton>
+  </div>
+</AvCard>

package/src/AvTemplateGrid.astro

@@ -0,0 +1,9 @@
+---
+import AvContainer from "./AvContainer.astro";
+---
+
+<AvContainer className="av-template-grid">
+  <div class="av-template-grid__items">
+    <slot />
+  </div>
+</AvContainer>

package/src/AvTextarea.astro

@@ -0,0 +1,35 @@
+---
+interface Props {
+  label?: string;
+  name?: string;
+  placeholder?: string;
+  rows?: number;
+  value?: string;
+  required?: boolean;
+
+  /** Additional HTML attributes */
+  [attrs: string]: any;
+}
+
+const {
+  label,
+  name,
+  placeholder,
+  rows = 4,
+  value,
+  required,
+  ...attrs
+} = Astro.props as Props;
+---
+
+<div class="av-field">
+  {label ? <label class="av-field__label">{label}</label> : null}
+  <textarea
+    class="av-textarea"
+    placeholder={placeholder}
+    rows={rows}
+    name={name}
+    required={required}
+    {...attrs}
+  >{value}</textarea>
+</div>

package/src/AvTimeline.astro

@@ -7,12 +7,23 @@ export interface TimelineItem {
 
 interface Props {
   items: TimelineItem[];
+  className?: string;
+
+  /** Additional HTML attributes */
+  [attrs: string]: any;
 }
 
-const { items = [] } = Astro.props;
+const {
+  items = [],
+  className = "",
+  ...attrs
+} = Astro.props as Props;
+
+const classes = ["av-timeline"];
+if (className) classes.push(className);
 ---
 
-<div class="av-timeline">
+<div class={classes.join(" ")} {...attrs}>
   {items.map((item, index) => (
     <div
       class={`av-timeline-row${

package/src/AvToolbar.astro

@@ -0,0 +1,42 @@
+---
+import AvButton from "./AvButton.astro";
+import AvContainer from "./AvContainer.astro";
+import AvDivider from "./AvDivider.astro";
+
+interface ToolbarAction {
+  label: string;
+  href: string;
+}
+
+interface Props {
+  saveStatus: "idle" | "saving" | "saved";
+  lastSavedAt?: string;
+  actions?: ToolbarAction[];
+}
+
+const { saveStatus, lastSavedAt, actions = [] } = Astro.props as Props;
+
+const statusLabel =
+  saveStatus === "saving" ? "Saving…" : saveStatus === "saved" ? "Changes saved" : "Not saved yet";
+---
+
+<div class="av-toolbar">
+  <AvContainer className="av-toolbar__container">
+    <div class="av-toolbar__status">
+      <span class="av-toolbar__status-dot" data-state={saveStatus}></span>
+      <span class="av-toolbar__status-text">{statusLabel}</span>
+      {lastSavedAt && <span class="av-toolbar__meta">{lastSavedAt}</span>}
+    </div>
+
+    {actions.length > 0 && (
+      <div class="av-toolbar__actions">
+        {actions.map((action) => (
+          <AvButton variant="ghost" href={action.href} size="sm">
+            {action.label}
+          </AvButton>
+        ))}
+      </div>
+    )}
+  </AvContainer>
+  <AvDivider />
+</div>