@acms-subir/core 0.3.3-next.20260929113209 → 0.3.4

package/section-library/pricing/section.json

@@ -0,0 +1,117 @@
+{
+  "type": "pricing",
+  "definition": {
+    "name": "Pricing",
+    "version": 1,
+    "component": "sections/Pricing.astro",
+    "description": "Plans or tiers side by side, one can be highlighted.",
+    "variants": [
+      "default"
+    ],
+    "fields": {
+      "heading": {
+        "label": "Heading",
+        "type": "text",
+        "default": "Plans"
+      },
+      "intro": {
+        "label": "Intro",
+        "type": "textarea",
+        "default": ""
+      },
+      "plans": {
+        "label": "Plans",
+        "type": "list",
+        "itemLabel": "name",
+        "max": 6,
+        "fields": {
+          "name": {
+            "label": "Name",
+            "type": "text"
+          },
+          "price": {
+            "label": "Price",
+            "type": "text",
+            "placeholder": "$20",
+            "translatable": false
+          },
+          "period": {
+            "label": "Per",
+            "type": "text",
+            "placeholder": "month"
+          },
+          "description": {
+            "label": "Description",
+            "type": "textarea"
+          },
+          "features": {
+            "label": "Included (one per line)",
+            "type": "textarea"
+          },
+          "cta": {
+            "label": "Button",
+            "type": "link"
+          },
+          "featured": {
+            "label": "Highlight this plan",
+            "type": "toggle"
+          }
+        }
+      }
+    },
+    "category": "Info",
+    "example": {
+      "plans": [
+        {
+          "name": "Drop-in",
+          "price": "$15",
+          "period": "class",
+          "features": "Any class\nMat included",
+          "cta": {
+            "label": "Book a class",
+            "href": "/book"
+          }
+        },
+        {
+          "name": "Monthly",
+          "price": "$90",
+          "period": "month",
+          "features": "Unlimited classes\nFree workshop",
+          "cta": {
+            "label": "Join",
+            "href": "/join"
+          },
+          "featured": true
+        }
+      ]
+    }
+  },
+  "example": {
+    "variant": "default",
+    "data": {
+      "plans": [
+        {
+          "name": "Drop-in",
+          "price": "$15",
+          "period": "class",
+          "features": "Any class\nMat included",
+          "cta": {
+            "label": "Book a class",
+            "href": "/book"
+          }
+        },
+        {
+          "name": "Monthly",
+          "price": "$90",
+          "period": "month",
+          "features": "Unlimited classes\nFree workshop",
+          "cta": {
+            "label": "Join",
+            "href": "/join"
+          },
+          "featured": true
+        }
+      ]
+    }
+  }
+}

package/section-library/questions/Questions.astro

@@ -0,0 +1,38 @@
+---
+import type { SectionProps } from '@acms-subir/core/theme';
+interface Q { question: string; answer: string }
+interface Data { heading: string; intro: string; questions: Q[] }
+const { data, variant } = Astro.props as SectionProps<Data>;
+const questions = data.questions.filter((q) => q.question);
+---
+<div class:list={['faq', `is-${variant}`]}>
+  <header class="faq-head">
+    <h2>{data.heading}</h2>
+    {data.intro && <p>{data.intro}</p>}
+  </header>
+  <div class="faq-list">
+    {questions.map((q) => (
+      <details class="faq-item">
+        <summary>{q.question}</summary>
+        <!-- answer is sanitized rich text from the core -->
+        <div class="faq-answer" set:html={q.answer} />
+      </details>
+    ))}
+  </div>
+</div>
+<style>
+  .faq-head h2 { margin: 0; }
+  .faq-head p { margin: 0.5rem 0 0; color: var(--muted); max-width: 60ch; }
+  .faq-list { margin-top: 1.5rem; border-top: 1px solid var(--line); }
+  .is-two-column { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 2rem; }
+  .is-two-column .faq-list { margin-top: 0; }
+  .faq-item { border-bottom: 1px solid var(--line); }
+  summary { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem 0; cursor: pointer; font-weight: 600; font-size: 1.05rem; list-style: none; }
+  summary::-webkit-details-marker { display: none; }
+  summary::after { content: '+'; color: var(--muted); font-weight: 400; font-size: 1.3rem; line-height: 1; transition: transform 0.15s; }
+  details[open] summary::after { transform: rotate(45deg); }
+  .faq-answer { padding: 0 0 1rem; color: var(--muted); }
+  .faq-answer :global(p) { margin: 0 0 0.6rem; }
+  .faq-answer :global(a) { color: var(--accent-text, var(--accent)); }
+  @media (max-width: 760px) { .is-two-column { grid-template-columns: 1fr; gap: 1rem; } }
+</style>

package/section-library/questions/section.json

@@ -0,0 +1,69 @@
+{
+  "type": "questions",
+  "definition": {
+    "name": "Questions",
+    "version": 1,
+    "component": "sections/Questions.astro",
+    "description": "Questions and answers that open on click. Answers can have links and lists.",
+    "variants": [
+      "accordion",
+      "two-column"
+    ],
+    "fields": {
+      "heading": {
+        "label": "Heading",
+        "type": "text",
+        "default": "Questions"
+      },
+      "intro": {
+        "label": "Intro",
+        "type": "textarea",
+        "default": ""
+      },
+      "questions": {
+        "label": "Questions",
+        "type": "list",
+        "itemLabel": "question",
+        "max": 40,
+        "fields": {
+          "question": {
+            "label": "Question",
+            "type": "text"
+          },
+          "answer": {
+            "label": "Answer",
+            "type": "richtext"
+          }
+        }
+      }
+    },
+    "category": "Info",
+    "example": {
+      "questions": [
+        {
+          "question": "Where do I park?",
+          "answer": "<p>Free parking behind the building on Elm St.</p>"
+        },
+        {
+          "question": "What about my kids?",
+          "answer": "<p>Kids’ church runs during the 10:00 service for ages 3–11.</p>"
+        }
+      ]
+    }
+  },
+  "example": {
+    "variant": "accordion",
+    "data": {
+      "questions": [
+        {
+          "question": "Where do I park?",
+          "answer": "<p>Free parking behind the building on Elm St.</p>"
+        },
+        {
+          "question": "What about my kids?",
+          "answer": "<p>Kids’ church runs during the 10:00 service for ages 3–11.</p>"
+        }
+      ]
+    }
+  }
+}

package/section-library/service-times/ServiceTimes.astro

@@ -0,0 +1,42 @@
+---
+import type { SectionProps } from '@acms-subir/core/theme';
+import { formatTime } from '@acms-subir/core/theme';
+interface Service { title: string; day: string; time: string; note: string; streamed: boolean }
+interface Data { heading: string; intro: string; services: Service[]; footnote: string }
+const { data, variant, settings } = Astro.props as SectionProps<Data>;
+const services = data.services.filter((s) => s.title);
+const locale = settings.locale || 'en-US';
+---
+<div class:list={['times', `is-${variant}`]}>
+  <header class="times-head">
+    <h2>{data.heading}</h2>
+    {data.intro && <p>{data.intro}</p>}
+  </header>
+  <ul class="times-list">
+    {services.map((s) => (
+      <li class="times-item">
+        <span class="times-when"><span class="times-day">{s.day}</span> <span class="times-time">{formatTime(s.time, locale)}</span></span>
+        <b class="times-title">{s.title}</b>
+        {s.note && <span class="times-note">{s.note}</span>}
+        {s.streamed && <span class="times-live"><i aria-hidden="true"></i>Streamed online</span>}
+      </li>
+    ))}
+  </ul>
+  {data.footnote && <p class="times-foot">{data.footnote}</p>}
+</div>
+<style>
+  .times-head h2 { margin: 0; }
+  .times-head p { margin: 0.5rem 0 0; color: var(--muted); max-width: 60ch; }
+  .times-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
+  .times-item { display: flex; flex-direction: column; gap: 0.3rem; padding: 1.1rem 1.2rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
+  .times-when { font-size: 0.85rem; font-weight: 600; color: var(--accent-text, var(--accent)); letter-spacing: 0.02em; }
+  .times-title { font-family: var(--font-heading); font-size: 1.2rem; line-height: 1.25; }
+  .times-note { color: var(--muted); font-size: 0.95rem; }
+  .times-live { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.25rem; font-size: 0.8rem; color: var(--muted); }
+  .times-live i { width: 7px; height: 7px; border-radius: 2px; background: var(--danger, #d33); }
+  .times.is-strip .times-list { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
+  .times.is-strip .times-item { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 1rem; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0.9rem 0; }
+  .times.is-strip .times-when { min-width: 11rem; }
+  .times.is-strip .times-title { font-size: 1.05rem; }
+  .times-foot { margin: 1rem 0 0; font-size: 0.9rem; color: var(--muted); }
+</style>

package/section-library/service-times/section.json

@@ -0,0 +1,127 @@
+{
+  "type": "service-times",
+  "definition": {
+    "name": "Service times",
+    "version": 1,
+    "component": "sections/ServiceTimes.astro",
+    "description": "Weekly gatherings with day, time and a short note. Edit the list any time.",
+    "variants": [
+      "cards",
+      "strip"
+    ],
+    "fields": {
+      "heading": {
+        "label": "Heading",
+        "type": "text",
+        "default": "Join us this week"
+      },
+      "intro": {
+        "label": "Intro",
+        "type": "textarea",
+        "default": ""
+      },
+      "services": {
+        "label": "Services",
+        "type": "list",
+        "itemLabel": "title",
+        "max": 12,
+        "fields": {
+          "title": {
+            "label": "Name",
+            "type": "text"
+          },
+          "day": {
+            "label": "Day",
+            "type": "select",
+            "options": [
+              "Sunday",
+              "Monday",
+              "Tuesday",
+              "Wednesday",
+              "Thursday",
+              "Friday",
+              "Saturday",
+              "Daily",
+              "Weekdays"
+            ],
+            "default": "Sunday",
+            "translatable": true
+          },
+          "time": {
+            "label": "Time",
+            "type": "time",
+            "default": "10:00"
+          },
+          "note": {
+            "label": "Note",
+            "type": "text",
+            "placeholder": "Ages 12–18, pizza after"
+          },
+          "streamed": {
+            "label": "Streamed online",
+            "type": "toggle"
+          }
+        }
+      },
+      "footnote": {
+        "label": "Small print",
+        "type": "text",
+        "default": ""
+      }
+    },
+    "category": "Events & times",
+    "example": {
+      "services": [
+        {
+          "title": "Sunday Worship",
+          "day": "Sunday",
+          "time": "10:00",
+          "note": "Kids’ program included",
+          "streamed": true
+        },
+        {
+          "title": "Youth Night",
+          "day": "Wednesday",
+          "time": "19:00",
+          "note": "Ages 12–18, pizza after",
+          "streamed": false
+        },
+        {
+          "title": "Morning Prayer",
+          "day": "Friday",
+          "time": "07:00",
+          "note": "Chapel",
+          "streamed": false
+        }
+      ]
+    }
+  },
+  "example": {
+    "variant": "cards",
+    "data": {
+      "services": [
+        {
+          "title": "Sunday Worship",
+          "day": "Sunday",
+          "time": "10:00",
+          "note": "Kids’ program included",
+          "streamed": true
+        },
+        {
+          "title": "Youth Night",
+          "day": "Wednesday",
+          "time": "19:00",
+          "note": "Ages 12–18, pizza after",
+          "streamed": false
+        },
+        {
+          "title": "Morning Prayer",
+          "day": "Friday",
+          "time": "07:00",
+          "note": "Chapel",
+          "streamed": false
+        }
+      ]
+    }
+  }
+}

package/section-library/team/Team.astro

@@ -0,0 +1,45 @@
+---
+import type { SectionProps } from '@acms-subir/core/theme';
+interface Person { name: string; role: string; photo: string; photoFocus: string; bio: string; email: string }
+interface Data { heading: string; intro: string; people: Person[] }
+const { data, variant } = Astro.props as SectionProps<Data>;
+const people = data.people.filter((p) => p.name);
+const initials = (name: string) => name.split(/\s+/).map((w) => w[0]).slice(0, 2).join('').toUpperCase();
+const validEmail = (e: string) => /^[^\s@<>"]+@[^\s@<>"]+\.[^\s@<>"]+$/.test(e.trim());
+---
+<div class:list={['team', `is-${variant}`]}>
+  <header class="team-head">
+    <h2>{data.heading}</h2>
+    {data.intro && <p>{data.intro}</p>}
+  </header>
+  <ul class="team-list">
+    {people.map((p) => (
+      <li class="team-card">
+        {p.photo ? <img class="team-photo" src={p.photo} alt="" loading="lazy" style={`object-position:${p.photoFocus}`} /> : <span class="team-photo is-initials" aria-hidden="true">{initials(p.name)}</span>}
+        <div class="team-body">
+          <b class="team-name">{p.name}</b>
+          {p.role && <span class="team-role">{p.role}</span>}
+          {variant === 'grid' && p.bio && <p class="team-bio">{p.bio}</p>}
+          {p.email && validEmail(p.email) && <a class="team-email" href={`mailto:${p.email.trim()}`}>{p.email.trim()}</a>}
+        </div>
+      </li>
+    ))}
+  </ul>
+</div>
+<style>
+  .team-head h2 { margin: 0; }
+  .team-head p { margin: 0.5rem 0 0; color: var(--muted); max-width: 60ch; }
+  .team-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
+  .team-card { display: flex; flex-direction: column; gap: 0.75rem; }
+  .team-photo { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r); background: var(--soft); }
+  .team-photo.is-initials { display: grid; place-items: center; font-family: var(--font-heading); font-size: 2rem; color: var(--muted); }
+  .team-body { display: flex; flex-direction: column; gap: 0.15rem; }
+  .team-name { font-size: 1.05rem; }
+  .team-role { color: var(--muted); font-size: 0.92rem; }
+  .team-bio { margin: 0.4rem 0 0; font-size: 0.95rem; color: var(--muted); }
+  .team-email { margin-top: 0.3rem; font-size: 0.9rem; color: var(--accent-text, var(--accent)); overflow-wrap: anywhere; }
+  .is-compact .team-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1rem; }
+  .is-compact .team-card { flex-direction: row; align-items: center; }
+  .is-compact .team-photo { width: 3.5rem; flex-shrink: 0; border-radius: var(--r-sm); }
+  .is-compact .team-photo.is-initials { font-size: 1.1rem; }
+</style>

package/section-library/team/section.json

@@ -0,0 +1,88 @@
+{
+  "type": "team",
+  "definition": {
+    "name": "Team",
+    "version": 1,
+    "component": "sections/Team.astro",
+    "description": "People with photo, role and a short bio.",
+    "variants": [
+      "grid",
+      "compact"
+    ],
+    "fields": {
+      "heading": {
+        "label": "Heading",
+        "type": "text",
+        "default": "Meet the team"
+      },
+      "intro": {
+        "label": "Intro",
+        "type": "textarea",
+        "default": ""
+      },
+      "people": {
+        "label": "People",
+        "type": "list",
+        "itemLabel": "name",
+        "max": 40,
+        "fields": {
+          "name": {
+            "label": "Name",
+            "type": "text",
+            "translatable": false
+          },
+          "role": {
+            "label": "Role",
+            "type": "text"
+          },
+          "photo": {
+            "label": "Photo",
+            "type": "image"
+          },
+          "bio": {
+            "label": "Short bio",
+            "type": "textarea"
+          },
+          "email": {
+            "label": "Email",
+            "type": "text",
+            "placeholder": "name@example.org",
+            "translatable": false
+          }
+        }
+      }
+    },
+    "category": "People",
+    "example": {
+      "people": [
+        {
+          "name": "Ana Ruiz",
+          "role": "Lead pastor",
+          "bio": ""
+        },
+        {
+          "name": "Sam Okafor",
+          "role": "Youth director",
+          "bio": ""
+        }
+      ]
+    }
+  },
+  "example": {
+    "variant": "grid",
+    "data": {
+      "people": [
+        {
+          "name": "Ana Ruiz",
+          "role": "Lead pastor",
+          "bio": ""
+        },
+        {
+          "name": "Sam Okafor",
+          "role": "Youth director",
+          "bio": ""
+        }
+      ]
+    }
+  }
+}

package/section-library/upcoming-events/UpcomingEvents.astro

@@ -0,0 +1,54 @@
+---
+import type { SectionProps, EventItem, LinkValue } from '@acms-subir/core/theme';
+interface Data { heading: string; intro: string; events: EventItem[]; more: LinkValue; empty: string }
+const { data, variant } = Astro.props as SectionProps<Data>;
+---
+<div class:list={['upev', `is-${variant}`]}>
+  <header class="upev-head">
+    <div>
+      <h2>{data.heading}</h2>
+      {data.intro && <p>{data.intro}</p>}
+    </div>
+    {data.more?.label && data.more.href && <a class="upev-more" href={data.more.href}>{data.more.label} →</a>}
+  </header>
+  {data.events.length === 0 ? <p class="upev-empty">{data.empty}</p> : (
+    <ol class="upev-list">
+      {data.events.map((e) => (
+        <li class:list={['upev-item', { 'is-cancelled': e.cancelled }]}>
+          {variant === 'cards' && e.image
+            ? <a class="upev-media" href={e.url} tabindex="-1" aria-hidden="true"><img src={e.image} alt="" loading="lazy" /></a>
+            : <span class="upev-date" aria-hidden="true"><b>{e.day}</b>{e.month}</span>}
+          <div class="upev-body">
+            <span class="upev-when">{e.cancelled ? 'Cancelled · ' : ''}{e.when}</span>
+            <h3 class="upev-title"><a href={e.url}>{e.title}</a></h3>
+            {e.location && <span class="upev-loc">{e.location}</span>}
+          </div>
+        </li>
+      ))}
+    </ol>
+  )}
+</div>
+<style>
+  .upev-head { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; justify-content: space-between; align-items: flex-end; }
+  .upev-head h2 { margin: 0; }
+  .upev-head p { margin: 0.5rem 0 0; color: var(--muted); max-width: 60ch; }
+  .upev-more { font-weight: 600; color: var(--accent-text, var(--accent)); text-decoration: none; white-space: nowrap; }
+  .upev-more:hover { text-decoration: underline; }
+  .upev-empty { margin: 1.25rem 0 0; color: var(--muted); }
+  .upev-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1rem; }
+  .is-cards .upev-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
+  .upev-item { display: flex; gap: 1rem; align-items: flex-start; }
+  .is-cards .upev-item { flex-direction: column; padding: 1rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
+  .is-list .upev-item { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
+  .upev-media { display: block; width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-sm); overflow: hidden; background: var(--soft); }
+  .upev-media img { width: 100%; height: 100%; object-fit: cover; }
+  .upev-date { flex-shrink: 0; display: grid; place-items: center; width: 3.4rem; padding: 0.45rem 0; border-radius: var(--r-sm); background: var(--ink); color: var(--bg); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; line-height: 1.2; }
+  .upev-date b { font-size: 1.35rem; letter-spacing: 0; }
+  .upev-body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
+  .upev-when { font-size: 0.85rem; color: var(--muted); }
+  .upev-title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
+  .upev-title a { color: inherit; text-decoration: none; }
+  .upev-title a:hover { text-decoration: underline; }
+  .upev-loc { font-size: 0.9rem; color: var(--muted); }
+  .is-cancelled .upev-title { text-decoration: line-through; opacity: 0.7; }
+</style>

package/section-library/upcoming-events/section.json

@@ -0,0 +1,51 @@
+{
+  "type": "upcoming-events",
+  "definition": {
+    "name": "Upcoming events",
+    "version": 1,
+    "component": "sections/UpcomingEvents.astro",
+    "description": "The next events from your calendar. Stays current on its own.",
+    "variants": [
+      "cards",
+      "list"
+    ],
+    "fields": {
+      "heading": {
+        "label": "Heading",
+        "type": "text",
+        "default": "What’s coming up"
+      },
+      "intro": {
+        "label": "Intro",
+        "type": "textarea",
+        "default": ""
+      },
+      "events": {
+        "label": "Events",
+        "type": "source",
+        "source": "events",
+        "default": {
+          "limit": 3
+        }
+      },
+      "more": {
+        "label": "“See all” link",
+        "type": "link",
+        "default": {
+          "label": "See the full calendar",
+          "href": "/calendar"
+        }
+      },
+      "empty": {
+        "label": "Text when nothing is scheduled",
+        "type": "text",
+        "default": "Nothing scheduled right now. Check back soon."
+      }
+    },
+    "category": "Events & times"
+  },
+  "example": {
+    "variant": "cards",
+    "data": {}
+  }
+}