accomadesc 0.1.1 → 0.1.3

package/dist/AccoDescription.svelte

@@ -1,10 +1,24 @@
 <script lang="ts">
-  import type { AccoDescriptionContent, I18nFacade } from './types.js';
+  import {
+    type AccoDescriptionContent,
+    type I18nFacade,
+    DEFAULT_TEXT_FONT_SIZE,
+    DEFAULT_HEADERS_FONT_SIZE,
+    DEFAULT_EXT_HEADERS_1_FONT_SIZE,
+    DEFAULT_EXT_HEADERS_2_FONT_SIZE,
+    DEFAULT_EXT_HEADERS_3_FONT_SIZE,
+    DEFAULT_EXT_HEADERS_4_FONT_SIZE,
+  } from './types.js';
   let {
     ref,
     minHeight = '100%',
-    textFontSize = '1rem',
-    headerFontSize = '1.5rem',
+    textFontSize = DEFAULT_TEXT_FONT_SIZE,
+    headerFontSize = DEFAULT_HEADERS_FONT_SIZE,
+    extendedHeaders = false,
+    extendedHeaders1Size = DEFAULT_EXT_HEADERS_1_FONT_SIZE,
+    extendedHeaders2Size = DEFAULT_EXT_HEADERS_2_FONT_SIZE,
+    extendedHeaders3Size = DEFAULT_EXT_HEADERS_3_FONT_SIZE,
+    extendedHeaders4Size = DEFAULT_EXT_HEADERS_4_FONT_SIZE,
     translateFunc,
   }: AccoDescriptionContent & I18nFacade = $props();
 
@@ -17,8 +31,13 @@
         min-height: {minHeight};
         --font-size-text-text-editor: {textFontSize};
         --font-size-header-text-editor: {headerFontSize};
-        "
+        --font-size-header-1: {extendedHeaders1Size};
+        --font-size-header-2: {extendedHeaders2Size};
+        --font-size-header-3: {extendedHeaders3Size};
+        --font-size-header-4: {extendedHeaders4Size};
+"
     class="content"
+    class:extended={extendedHeaders}
     id="content"
   >
     {@html translatedRef}
@@ -26,27 +45,46 @@
 </div>
 
 <style>
-  .content {
-    width: 100%;
+  .container {
+    position: relative;
     height: 100%;
+    width: 100%;
 
-    text-align: left;
-    margin-left: 0.2rem;
-    margin-right: 0.2rem;
-  }
+    .content {
+      width: 100%;
+      height: 100%;
 
-  .content :global(*) {
-    font-size: var(--font-size-text-text-editor);
-  }
+      text-align: left;
+      margin-left: 0.2rem;
+      margin-right: 0.2rem;
 
-  .content :global(h3) {
-    font-size: var(--font-size-header-text-editor);
-    text-align: left;
-  }
+      :global(*) {
+        font-size: var(--font-size-text-text-editor);
+      }
 
-  .container {
-    position: relative;
-    height: 100%;
-    width: 100%;
+      :global(h3) {
+        font-size: var(--font-size-header-text-editor);
+        text-align: left;
+      }
+    }
+
+    .content.extended {
+      :global(h1) {
+        font-size: var(--font-size-header-1);
+        text-align: left;
+      }
+      :global(h2) {
+        font-size: var(--font-size-header-2);
+        text-align: left;
+      }
+      :global(h3) {
+        font-size: var(--font-size-header-3);
+        text-align: left;
+      }
+      :global(h4) {
+        font-size: var(--font-size-header-4);
+        text-align: left;
+      }
+    }
   }
 </style>

package/dist/AccoDescription.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { AccoDescriptionContent, I18nFacade } from './types.js';
+import { type AccoDescriptionContent, type I18nFacade } from './types.js';
 type $$ComponentProps = AccoDescriptionContent & I18nFacade;
 declare const AccoDescription: import("svelte").Component<$$ComponentProps, {}, "">;
 type AccoDescription = ReturnType<typeof AccoDescription>;

package/dist/BookingRequest.svelte

@@ -12,7 +12,7 @@
 
   const {
     endpoint,
-    acco,
+    accoID,
     messageLabel,
     calUrl,
     userID,
@@ -53,7 +53,7 @@
 
   //https://popnapdkcdnabruxkjti.supabase.co/storage/v1/object/public/ical/81e66599-ac3c-4ad6-b261-fceeb784f9e9/050edcb4-680e-4542-96df-3ae4a2af89a5
 
-  const url = calUrl; //`${accomadeBaseUrl}/${userID}/${acco.path}`;
+  const url = calUrl;
   const oStateID = `i-${url}-${OCCUPATION_STATE}`;
   let occupationState: OccupationState = $state(getContext(oStateID));
   let invalid = $derived(
@@ -92,7 +92,7 @@
         },
         body: JSON.stringify({
           userID: userID,
-          acco: acco.path,
+          acco: accoID,
           guestEmail: email,
           guestName: name,
           message: message,

package/dist/Hamburger.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import type { Nav, I18nFacade } from './types.js';
+  import { blur } from 'svelte/transition';
+
+  import MainNav from './MainNav.svelte';
+  import HamburgerSVG from './svg/HamburgerSVG.svelte';
+  import XSVG from './svg/XSVG.svelte';
+
+  let {
+    nav,
+    translateFunc,
+    currentLang,
+    supportedLangs,
+    updateCurrentLang,
+    isMenuOpen = $bindable(false),
+  }: {
+    nav: Nav;
+    isMenuOpen: boolean;
+  } & I18nFacade = $props();
+</script>
+
+{#if isMenuOpen}
+  <MainNav
+    {nav}
+    {translateFunc}
+    {updateCurrentLang}
+    {currentLang}
+    {supportedLangs}
+    close={() => (isMenuOpen = false)}
+  />
+{/if}
+
+<button
+  transition:blur
+  onclick={() => (isMenuOpen = !isMenuOpen)}
+  aria-pressed={isMenuOpen}
+  aria-label="menu button"
+  tabindex={isMenuOpen ? 0 : -1}
+>
+  {#if isMenuOpen}
+    <XSVG />
+  {:else}
+    <HamburgerSVG />
+  {/if}
+</button>
+
+<style>
+  button {
+    background-color: transparent;
+    border: 0;
+    width: 3rem;
+    height: 3rem;
+    z-index: 999;
+    position: relative;
+  }
+</style>

package/dist/Hamburger.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Nav, I18nFacade } from './types.js';
+type $$ComponentProps = {
+    nav: Nav;
+    isMenuOpen: boolean;
+} & I18nFacade;
+declare const Hamburger: import("svelte").Component<$$ComponentProps, {}, "isMenuOpen">;
+type Hamburger = ReturnType<typeof Hamburger>;
+export default Hamburger;

package/dist/MainNav.svelte

@@ -0,0 +1,138 @@
+<script lang="ts">
+  import { page } from '$app/state';
+  import { fade } from 'svelte/transition';
+  import type { Nav, I18nFacade } from './types.js';
+  import NavItem from './NavItem.svelte';
+
+  let currentPath = $derived(page.url.pathname);
+  let {
+    nav,
+    close,
+    translateFunc,
+    updateCurrentLang,
+    currentLang,
+    supportedLangs,
+  }: {
+    nav: Nav;
+    close: () => void;
+  } & I18nFacade = $props();
+
+  let allTranslations = $state(supportedLangs);
+
+  const pathForLang = (lang: string) => {
+    const pathElements = currentPath.split('/');
+    //initial slash results in empty string real first element
+    if (pathElements.length == 1) return `/${lang}`;
+
+    const firstElement = pathElements[1];
+    if (allTranslations?.includes(firstElement)) {
+      return ['', lang, ...pathElements.slice(2)].join('/');
+    } else {
+      return ['', lang, ...pathElements.slice(1)].join('/');
+    }
+  };
+</script>
+
+<button class="not-nav" onclick={close} aria-label="close" transition:fade|global></button>
+
+<nav class="main-nav open" transition:fade|global>
+  <ul>
+    {#each nav.main as n}
+      <li>
+        <NavItem {n} {supportedLangs} {currentLang} {translateFunc} onclick={close} />
+      </li>
+    {/each}
+  </ul>
+  {#if allTranslations && allTranslations.length > 1}
+    <fieldset>
+      <legend>{translateFunc ? translateFunc('lang') : ''}</legend>
+
+      {#each allTranslations as langKey}
+        <a
+          class="lang-link"
+          rel="alternate"
+          onclick={() => (updateCurrentLang ? updateCurrentLang(langKey) : '')}
+          href={pathForLang(langKey)}
+          hreflang={langKey}
+        >
+          <div class="radio-wrapper">
+            <input
+              type="radio"
+              name="language"
+              id={langKey}
+              value={langKey}
+              checked={langKey === currentLang}
+            />
+            <label for={langKey}>{translateFunc ? translateFunc(langKey) : ''}</label>
+          </div>
+        </a>
+      {/each}
+    </fieldset>
+  {/if}
+</nav>
+
+<style>
+  fieldset {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    margin-left: 1rem;
+  }
+
+  nav {
+    z-index: 998;
+    position: fixed;
+    padding-right: 1rem;
+    top: 0;
+    right: 0;
+    padding-top: 3rem;
+    background-color: var(--nav-bg-color);
+    color: var(--nav-font-color);
+    height: 100vh;
+    font-family: var(--nav-font-family);
+    font-variant: var(--nav-font-variant);
+    font-size: 1.6rem;
+    font-weight: bold;
+
+    overflow-y: auto;
+    overflow-x: hidden;
+
+    * {
+      color: var(--nav-font-color);
+    }
+  }
+
+  .not-nav {
+    border: none;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: rgba(0, 0, 0, 0.1);
+    overflow-y: hidden;
+    overflow-x: hidden;
+  }
+
+  li {
+    list-style: none;
+    margin-bottom: 1rem;
+  }
+
+  .radio-wrapper {
+    font-family: var(--nav-font-family);
+    font-variant: var(--nav-font-variant);
+    font-size: 1.6rem;
+    font-weight: bold;
+    line-height: 1.1;
+    display: grid;
+    grid-template-columns: 1em auto;
+    gap: 0.5em;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  ul {
+    padding-left: 2.5rem;
+    margin: 0;
+  }
+</style>

package/dist/MainNav.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Nav, I18nFacade } from './types.js';
+type $$ComponentProps = {
+    nav: Nav;
+    close: () => void;
+} & I18nFacade;
+declare const MainNav: import("svelte").Component<$$ComponentProps, {}, "">;
+type MainNav = ReturnType<typeof MainNav>;
+export default MainNav;

package/dist/NavItem.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+  import type { NavItem, I18nFacade } from './types.js';
+  import ExtLinkSvg from './svg/ExtLinkSVG.svelte';
+
+  let {
+    n,
+    onclick,
+    currentLang,
+    translateFunc,
+  }: {
+    n: NavItem;
+    onclick?: () => void;
+  } & I18nFacade = $props();
+
+  const path = $derived(`/${currentLang}${n.path}`);
+</script>
+
+<div class="wrapper" class:sub={n.sub}>
+  {#if n.path}
+    {#if n.external}
+      <div class="ext-link-wrapper">
+        <div class="link-icon-wrapper">
+          <ExtLinkSvg size="1.6rem" />
+        </div>
+        <a href={n.path} target="_blank" rel="noreferrer noopener">
+          {translateFunc ? translateFunc(n.key) : ''}
+        </a>
+      </div>
+    {:else}
+      <a href={path} {onclick}>
+        {translateFunc ? translateFunc(n.key) : ''}
+      </a>
+    {/if}
+  {:else}
+    <span>{translateFunc ? translateFunc(n.key) : ''}</span>
+  {/if}
+</div>
+
+<style>
+  .sub {
+    font-size: 1.2rem;
+    margin-left: 0.4rem;
+  }
+
+  a {
+    text-decoration: underline;
+    color: var(--nav-font-color);
+  }
+
+  span {
+    color: var(--nav-font-color);
+  }
+
+  .link-icon-wrapper {
+    position: absolute;
+    left: -1.8rem;
+    top: 0rem;
+  }
+  .sub .link-icon-wrapper {
+    left: -2.2rem;
+  }
+
+  .ext-link-wrapper {
+    display: flex;
+    position: relative;
+    width: 100%;
+  }
+</style>

package/dist/NavItem.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { NavItem, I18nFacade } from './types.js';
+type $$ComponentProps = {
+    n: NavItem;
+    onclick?: () => void;
+} & I18nFacade;
+declare const NavItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type NavItem = ReturnType<typeof NavItem>;
+export default NavItem;

package/dist/Page.svelte

@@ -0,0 +1,191 @@
+<script lang="ts">
+  import Photo from './Photo.svelte';
+  import Section from './Section.svelte';
+  import Hamburger from './Hamburger.svelte';
+  import PageHeader from './PageHeader.svelte';
+  import PageFooter from './PageFooter.svelte';
+  import type { Page, Section as SectionI, I18nFacade } from './types.ts';
+
+  let {
+    hero,
+    header,
+    title,
+    slug,
+    logoLink,
+    content,
+    nav,
+    showFooter = true,
+    fixedHamburger = true,
+    translateFunc,
+    formatMoneyFunc,
+    formatDateFunc,
+    formatFunc,
+    supportedLangs,
+    updateCurrentLang,
+    currentLang,
+    calendarTranslation,
+  }: Page & I18nFacade = $props();
+
+  let pageTitle = hero && hero.title ? hero.title : header ? header : title;
+
+  let hamburgerOpen = $state(false);
+</script>
+
+<svelte:head>
+  <title
+    >{translateFunc && pageTitle
+      ? translateFunc(pageTitle)
+      : //TODO default to something here?
+        ''}</title
+  >
+</svelte:head>
+
+<div class="page-wrapper">
+  {#if hero}
+    <header class="hero-image">
+      <Photo photoPath={hero.photoPath} alt="Hero Image" eager={true} />
+    </header>
+
+    <div class="floating-title">
+      <h1>{translateFunc ? translateFunc(hero.title) : ''}</h1>
+    </div>
+  {:else}
+    {#if title}
+      <PageHeader {title} {slug} {logoLink} {translateFunc} />
+    {/if}
+    {#if header}
+      <h1>{@html translateFunc ? translateFunc(header) : ''}</h1>
+    {/if}
+  {/if}
+
+  <main class:hero-margin={hero}>
+    {#if content}
+      {#each content as s}
+        <div class="section-wrapper">
+          <Section
+            {...s as SectionI}
+            {translateFunc}
+            {formatMoneyFunc}
+            {formatDateFunc}
+            {formatFunc}
+            {currentLang}
+            {calendarTranslation}
+          />
+        </div>
+      {/each}
+    {/if}
+  </main>
+
+  {#if nav && showFooter}
+    <div class="footer-wrapper">
+      <PageFooter {nav} {translateFunc} {currentLang} />
+    </div>
+  {/if}
+
+  {#if nav}
+    <div class="ham-wrapper" class:fixed={fixedHamburger || hamburgerOpen}>
+      <Hamburger
+        {nav}
+        {translateFunc}
+        {currentLang}
+        {supportedLangs}
+        {updateCurrentLang}
+        bind:isMenuOpen={hamburgerOpen}
+      />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .section-wrapper {
+    margin-bottom: 2rem;
+    width: 100%;
+    overflow-y: clip;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    text-align: center;
+  }
+
+  h1 {
+    margin-bottom: 0;
+    margin-top: 1rem;
+  }
+
+  header {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: calc(100vh - 2rem);
+  }
+
+  main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    overflow-y: clip;
+
+    width: 100%;
+    min-height: 100%;
+
+    text-align: center;
+  }
+
+  main.hero-margin {
+    margin-top: calc(100vh - 1rem);
+  }
+
+  .floating-title {
+    width: 100%;
+    height: calc(100vh - 2rem);
+    position: absolute;
+    top: 0;
+    left: 0;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    /* mix-blend-mode: difference; */
+    text-align: center;
+  }
+
+  .floating-title h1 {
+    font-weight: bolder;
+    font-size: 2.8rem;
+    font-family: var(--landing-title-font-family, 'sans-serif');
+    font-variant: var(--landing-title-font-variant, 'small-caps');
+    color: var(--title-font-color);
+    filter: drop-shadow(0.2rem 0.3rem 0.2rem black);
+  }
+
+  @media (max-width: 300px) {
+    .floating-title h1 {
+      font-size: 1.6rem;
+    }
+  }
+
+  .ham-wrapper {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    width: 3rem;
+    height: 3rem;
+    z-index: 999;
+  }
+
+  .fixed {
+    position: fixed;
+  }
+
+  .page-wrapper {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    position: relative;
+
+    background-color: var(--main-bg-color);
+  }
+</style>

package/dist/Page.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { Page } from './types.ts';
+declare const Page: any;
+type Page = ReturnType<typeof Page>;
+export default Page;

package/dist/PageFooter.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+  import type { Nav, I18nFacade } from './types.js';
+  import NavItem from './NavItem.svelte';
+
+  let { nav, translateFunc, currentLang }: { nav: Nav } & I18nFacade = $props();
+</script>
+
+<footer>
+  <div class="nav">
+    {#each nav.footer as n}
+      <div class="link-wrapper">
+        <NavItem {n} {currentLang} {translateFunc} />
+      </div>
+    {/each}
+  </div>
+  <div class="content">
+    {@html translateFunc ? translateFunc('footer_html') : ''}
+  </div>
+</footer>
+
+<style>
+  .nav {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-around;
+    flex-wrap: wrap;
+    flex-grow: 3;
+  }
+  .content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: row;
+    justify-content: right;
+  }
+
+  .content :global(*) {
+    background-color: var(--footer-bg-color);
+    color: var(--footer-font-color);
+  }
+
+  .link-wrapper {
+    text-decoration: underline;
+    font-family: var(--nav-font-family, 'mono');
+    font-variant: var(--nav-font-variant, 'normal');
+    font-size: 1.4rem;
+    font-weight: bold;
+
+    display: flex;
+    align-items: center;
+    margin-left: 1rem;
+    margin-right: 1rem;
+  }
+
+  footer {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+
+    color: var(--footer-font-color);
+    background-color: var(--footer-bg-color);
+    margin-top: 1rem;
+    width: 100%;
+
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    min-height: 5rem;
+    * {
+      color: var(--nav-font-color);
+    }
+  }
+
+  @media (max-width: 500px) {
+    .nav {
+      flex-direction: row;
+      justify-content: left;
+    }
+  }
+</style>

package/dist/PageFooter.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Nav, I18nFacade } from './types.js';
+type $$ComponentProps = {
+    nav: Nav;
+} & I18nFacade;
+declare const PageFooter: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageFooter = ReturnType<typeof PageFooter>;
+export default PageFooter;

package/dist/PageHeader.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+  import type { I18nFacade } from './types.ts';
+
+  let {
+    logoLink,
+    title,
+    slug,
+    translateFunc,
+  }: {
+    title: string;
+    slug?: string;
+    logoLink?: string;
+  } & I18nFacade = $props();
+</script>
+
+<header>
+  <object title="logo" class="logo" data={logoLink}></object>
+  <div class="text-wrapper">
+    <div class="header"><h1>{@html translateFunc ? translateFunc(title) : ''}</h1></div>
+    {#if slug}
+      <div class="slug">{@html translateFunc ? translateFunc(slug) : ''}</div>
+    {/if}
+  </div>
+</header>
+
+<style>
+  header {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin: 0;
+    width: 100%;
+    background-color: var(--header-bg-color);
+    * {
+      color: var(--header-font-color);
+    }
+  }
+
+  .text-wrapper {
+    min-height: 12rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-left: 10rem;
+    margin-right: 8rem;
+  }
+
+  .slug {
+    font-size: 1.6rem;
+    font-family: var(--header-font-family, 'sans-serif');
+    font-variant: var(--header-font-variant, 'small-caps');
+    margin-bottom: 1rem;
+  }
+
+  .header h1 {
+    margin-top: 0.6rem;
+    margin-bottom: 0.3rem;
+    font-family: var(--page-title-font-family, 'sans-serif');
+    font-variant: var(--page-title-font-variant, 'small-caps');
+  }
+
+  .logo {
+    position: absolute;
+    left: 0;
+    top: 0;
+
+    margin-left: 0.6rem;
+    margin-top: 0.6rem;
+    width: 10rem;
+  }
+
+  @media (max-width: 550px) {
+    .text-wrapper {
+      margin-left: 10rem;
+      margin-right: 2rem;
+    }
+  }
+
+  @media (max-width: 500px) {
+    .text-wrapper {
+      min-height: 6rem;
+      margin-left: 6rem;
+    }
+
+    .slug {
+      display: none;
+    }
+    .logo {
+      width: 5rem;
+    }
+    .header h1 {
+      font-size: 2.2rem;
+    }
+  }
+
+  @media (max-width: 300px) {
+    .text-wrapper {
+      min-height: 4rem;
+      margin-left: 0.5rem;
+      margin-right: 1rem;
+    }
+
+    .logo {
+      display: none;
+    }
+    .header h1 {
+      padding-left: 1rem;
+    }
+  }
+</style>

package/dist/PageHeader.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { I18nFacade } from './types.ts';
+type $$ComponentProps = {
+    title: string;
+    slug?: string;
+    logoLink?: string;
+} & I18nFacade;
+declare const PageHeader: import("svelte").Component<$$ComponentProps, {}, "">;
+type PageHeader = ReturnType<typeof PageHeader>;
+export default PageHeader;

package/dist/Section.svelte

@@ -11,6 +11,10 @@
   import LeafletMap from './LeafletMap.svelte';
   import AccoCard from './AccoCard.svelte';
   import AccoDescription from './AccoDescription.svelte';
+  import ContactForm from './ContactForm.svelte';
+  import BookingRequest from './BookingRequest.svelte';
+  import CalendarRows from './CalendarRows.svelte';
+  import CalendarGrid from './CalendarGrid.svelte';
 
   import {
     type Section as SectionI,
@@ -27,12 +31,17 @@
     isPricingShort,
     isAccoDescription,
     isAccoCard,
+    isContactForm,
+    isCalendarGrid,
+    isCalendarRows,
+    isBookingRequest,
   } from './types.js';
 
   let {
     header = undefined,
     columnCount = 2,
     padding = $bindable('10vw'),
+    maxWidth,
     blocks = [],
     translateFunc,
     formatMoneyFunc,
@@ -46,6 +55,8 @@
 
   let gridTemplateColumns = $state(`repeat(${columnCount}, 1fr)`);
 
+  let originalPadding = $state(padding);
+
   let clientWidth = $state(Number.MAX_SAFE_INTEGER);
   $effect(() => {
     if (clientWidth < 500) {
@@ -53,17 +64,23 @@
       padding = '0';
     } else if (clientWidth < 800 && clientWidth >= 500 && !!columnCount && columnCount > 2) {
       gridTemplateColumns = '1fr 1fr';
+      padding = originalPadding;
     } else {
       if (!!columnCount && columnCount > 1) {
         gridTemplateColumns = `repeat(${columnCount}, 1fr)`;
       }
+      padding = originalPadding;
     }
   });
+
+  let widthStyle = $derived(
+    maxWidth ? `max-width: ${maxWidth};` : `padding-left: ${padding}; padding-right: ${padding};`,
+  );
 </script>
 
 <svelte:window bind:innerWidth={clientWidth} />
 
-<section style="padding-left: {padding}; padding-right: {padding};">
+<section style={widthStyle}>
   {#if header}
     <h2>{translatedHeader}</h2>
   {/if}
@@ -101,6 +118,14 @@
           <Text {...block.content} {translateFunc} />
         {:else if isWeather(block)}
           <Weather {...block.content} {translateFunc} {currentLang} />
+        {:else if isBookingRequest(block)}
+          <BookingRequest {...block.content} {translateFunc} {formatDateFunc} />
+        {:else if isCalendarRows(block)}
+          <CalendarRows {...block.content} {translateFunc} />
+        {:else if isCalendarGrid(block)}
+          <CalendarGrid {...block.content} {translateFunc} />
+        {:else if isContactForm(block)}
+          <ContactForm {...block.content} {translateFunc} />
         {:else}
           <div>[UNEXPECTED VALUE]</div>
         {/if}

package/dist/Text.svelte

@@ -1,11 +1,25 @@
 <script lang="ts">
-  import type { TextContent, I18nFacade } from './types.js';
+  import {
+    type TextContent,
+    type I18nFacade,
+    DEFAULT_TEXT_FONT_SIZE,
+    DEFAULT_HEADERS_FONT_SIZE,
+    DEFAULT_EXT_HEADERS_1_FONT_SIZE,
+    DEFAULT_EXT_HEADERS_2_FONT_SIZE,
+    DEFAULT_EXT_HEADERS_3_FONT_SIZE,
+    DEFAULT_EXT_HEADERS_4_FONT_SIZE,
+  } from './types.js';
 
   let {
     ref,
     minHeight = '100%',
-    textFontSize = '1rem',
-    headerFontSize = '1.5rem',
+    textFontSize = DEFAULT_TEXT_FONT_SIZE,
+    headerFontSize = DEFAULT_HEADERS_FONT_SIZE,
+    extendedHeaders = false,
+    extendedHeaders1Size = DEFAULT_EXT_HEADERS_1_FONT_SIZE,
+    extendedHeaders2Size = DEFAULT_EXT_HEADERS_2_FONT_SIZE,
+    extendedHeaders3Size = DEFAULT_EXT_HEADERS_3_FONT_SIZE,
+    extendedHeaders4Size = DEFAULT_EXT_HEADERS_4_FONT_SIZE,
     translateFunc,
   }: TextContent & I18nFacade = $props();
 
@@ -18,9 +32,14 @@
         min-height: {minHeight};
         --font-size-text: {textFontSize};
         --font-size-header: {headerFontSize};
+        --font-size-header-1: {extendedHeaders1Size};
+        --font-size-header-2: {extendedHeaders2Size};
+        --font-size-header-3: {extendedHeaders3Size};
+        --font-size-header-4: {extendedHeaders4Size};
         "
     class="content"
     id="content"
+    class:extended={extendedHeaders}
   >
     {@html translated}
   </div>
@@ -45,11 +64,28 @@
         color: var(--main-font-color);
         font-size: var(--font-size-text);
       }
-
       :global(h3) {
         font-size: var(--font-size-header);
         text-align: left;
       }
     }
+    .extended {
+      :global(h1) {
+        font-size: var(--font-size-header-1);
+        text-align: left;
+      }
+      :global(h2) {
+        font-size: var(--font-size-header-2);
+        text-align: left;
+      }
+      :global(h3) {
+        font-size: var(--font-size-header-3);
+        text-align: left;
+      }
+      :global(h4) {
+        font-size: var(--font-size-header-4);
+        text-align: left;
+      }
+    }
   }
 </style>

package/dist/Text.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { TextContent, I18nFacade } from './types.js';
+import { type TextContent, type I18nFacade } from './types.js';
 type $$ComponentProps = TextContent & I18nFacade;
 declare const Text: import("svelte").Component<$$ComponentProps, {}, "">;
 type Text = ReturnType<typeof Text>;

package/dist/index.d.ts

@@ -22,6 +22,7 @@ import PricingShort from './PricingShort.svelte';
 import Section from './Section.svelte';
 import Text from './Text.svelte';
 import Weather from './Weather.svelte';
-export type { GridPhoto, LeafletMap as LeafletMapI, LeafletMapContent, Calendar as CalendarI, CalendarContent, CalendarAvailable as CalendarAvailableI, CalendarAvailableContent, CalendarGrid as CalendarGridI, CalendarGridContent, CalendarRows as CalendarRowsI, CalendarRowsContent, Text as TextI, TextContent, Weather as WeatherI, WeatherContent, Photo as PhotoI, PhotoContent, PhotoGallery as PhotoGalleryI, PhotoGalleryContent, Pricing as PricingI, PricingContent, PricingShort as PricingShortI, PricingShortContent, PricingEntry, PricingRange, PricingColumn, StaticRangeDate, StaticPricingRange, AmenitiesCore as AmenitiesCoreI, AmenitiesCoreContent, AccoCard as AccoCardI, AccoCardContent, ContactForm as ContactFormI, ContactFormContent, BookingRequest as BookingRequestI, BookingRequestContent, CardContent, AccoDescription as AccoDescriptionI, AccoDescriptionContent, Section as SectionI, I18nFacade, Block, Acco as AccoI, } from './types.js';
+import Page from './Page.svelte';
+export type { GridPhoto, LeafletMap as LeafletMapI, LeafletMapContent, Calendar as CalendarI, CalendarContent, CalendarAvailable as CalendarAvailableI, CalendarAvailableContent, CalendarGrid as CalendarGridI, CalendarGridContent, CalendarRows as CalendarRowsI, CalendarRowsContent, Text as TextI, TextContent, Weather as WeatherI, WeatherContent, Photo as PhotoI, PhotoContent, PhotoGallery as PhotoGalleryI, PhotoGalleryContent, Pricing as PricingI, PricingContent, PricingShort as PricingShortI, PricingShortContent, PricingEntry, PricingRange, PricingColumn, StaticRangeDate, StaticPricingRange, AmenitiesCore as AmenitiesCoreI, AmenitiesCoreContent, AccoCard as AccoCardI, AccoCardContent, ContactForm as ContactFormI, ContactFormContent, BookingRequest as BookingRequestI, BookingRequestContent, CardContent, AccoDescription as AccoDescriptionI, AccoDescriptionContent, Section as SectionI, I18nFacade, Block, Page as PageI, } from './types.js';
 export { PRICING_COLUMNS, isAccoCard, isText, isPhoto, isGallery, isLeafletMap, isWeather, isAmenitiesCore, isCalendarAvailable, isCalendar, isCalendarGrid, isCalendarRows, isPricing, isPricingShort, isAccoDescription, isBookingRequest, isContactForm, } from './types.js';
-export { randomID, randomName, Avatar, Button, Icon, Spinner, TextInput, AccoCard, AccoDescription, AmenitiesCore, Calendar, CalendarAvailable, LeafletMap, Photo, PhotoGallery, Pricing, PricingShort, Section, Text, Weather, BookingRequest, ContactForm, CalendarRows, CalendarGrid, Notes, };
+export { randomID, randomName, Avatar, Button, Icon, Spinner, TextInput, AccoCard, AccoDescription, AmenitiesCore, Calendar, CalendarAvailable, LeafletMap, Photo, PhotoGallery, Pricing, PricingShort, Section, Text, Weather, BookingRequest, ContactForm, CalendarRows, CalendarGrid, Notes, Page, };

package/dist/index.js

@@ -23,5 +23,6 @@ import PricingShort from './PricingShort.svelte';
 import Section from './Section.svelte';
 import Text from './Text.svelte';
 import Weather from './Weather.svelte';
+import Page from './Page.svelte';
 export { PRICING_COLUMNS, isAccoCard, isText, isPhoto, isGallery, isLeafletMap, isWeather, isAmenitiesCore, isCalendarAvailable, isCalendar, isCalendarGrid, isCalendarRows, isPricing, isPricingShort, isAccoDescription, isBookingRequest, isContactForm, } from './types.js';
-export { randomID, randomName, Avatar, Button, Icon, Spinner, TextInput, AccoCard, AccoDescription, AmenitiesCore, Calendar, CalendarAvailable, LeafletMap, Photo, PhotoGallery, Pricing, PricingShort, Section, Text, Weather, BookingRequest, ContactForm, CalendarRows, CalendarGrid, Notes, };
+export { randomID, randomName, Avatar, Button, Icon, Spinner, TextInput, AccoCard, AccoDescription, AmenitiesCore, Calendar, CalendarAvailable, LeafletMap, Photo, PhotoGallery, Pricing, PricingShort, Section, Text, Weather, BookingRequest, ContactForm, CalendarRows, CalendarGrid, Notes, Page, };

package/dist/types.d.ts

@@ -69,11 +69,22 @@ export interface Text {
     kind: 'text';
     content: TextContent;
 }
+export declare const DEFAULT_TEXT_FONT_SIZE = "1rem";
+export declare const DEFAULT_HEADERS_FONT_SIZE = "1.5rem";
+export declare const DEFAULT_EXT_HEADERS_1_FONT_SIZE = "3.2rem";
+export declare const DEFAULT_EXT_HEADERS_2_FONT_SIZE = "2.2rem";
+export declare const DEFAULT_EXT_HEADERS_3_FONT_SIZE = "1.8rem";
+export declare const DEFAULT_EXT_HEADERS_4_FONT_SIZE = "1.2rem";
 export interface TextContent {
     ref: string;
     minHeight?: string;
     textFontSize?: string;
     headerFontSize?: string;
+    extendedHeaders?: boolean;
+    extendedHeaders1Size?: string;
+    extendedHeaders2Size?: string;
+    extendedHeaders3Size?: string;
+    extendedHeaders4Size?: string;
 }
 export interface Weather {
     id: string;
@@ -192,12 +203,6 @@ export interface AmenitiesCoreContent {
     parking: boolean;
     showParking?: boolean;
 }
-export interface Acco {
-    path: string;
-    displayName: string;
-    cardContent?: AccoCardContent;
-    siteContent?: Section[];
-}
 export interface AccoCard {
     id: string;
     kind: 'acco-card';
@@ -222,6 +227,11 @@ export interface AccoDescriptionContent {
     minHeight?: string;
     textFontSize?: string;
     headerFontSize?: string;
+    extendedHeaders?: boolean;
+    extendedHeaders1Size?: string;
+    extendedHeaders2Size?: string;
+    extendedHeaders3Size?: string;
+    extendedHeaders4Size?: string;
 }
 export interface ContactForm {
     id: string;
@@ -248,7 +258,7 @@ export interface BookingRequest {
 export interface BookingRequestContent {
     endpoint: string;
     userID: string;
-    acco: Acco;
+    accoID: string;
     calUrl: string;
     nameLabel: string;
     emailLabel: string;
@@ -263,21 +273,52 @@ export interface BookingRequestContent {
     explainer?: string;
 }
 export type Block = Text | Photo | PhotoGallery | Calendar | CalendarAvailable | CalendarGrid | CalendarRows | Pricing | PricingShort | AmenitiesCore | Weather | LeafletMap | AccoCard | AccoDescription | ContactForm | BookingRequest | undefined;
+export interface Page {
+    id: string;
+    path: string;
+    nav?: Nav;
+    hero?: Hero;
+    title?: string;
+    slug?: string;
+    logoLink?: string;
+    header?: string;
+    showFooter?: boolean;
+    fixedHamburger?: boolean;
+    content?: Section[];
+}
+export interface NavItem {
+    key: string;
+    path?: string;
+    external?: boolean;
+    sub?: boolean;
+}
+export interface Nav {
+    main: NavItem[];
+    footer: NavItem[];
+}
+export interface Hero {
+    id: string;
+    title: string;
+    photoPath: string;
+}
 export interface Section {
     id: string;
     header?: string;
     translatedHeader?: string;
     columnCount?: number;
     padding?: string;
+    maxWidth?: string;
     blocks?: Block[];
 }
 export interface I18nFacade {
     currentLang?: string;
+    supportedLangs?: string[];
     calendarTranslation?: I18n;
     translateFunc?: (ref: string) => string;
     formatFunc?: (formatter: string, props: Record<string, any>) => string;
     formatMoneyFunc?: (d: Dinero<number> | DineroSnapshot<number>) => string;
     formatDateFunc?: (d: DateTime | string) => string;
+    updateCurrentLang?: (lang: string) => void;
 }
 export declare const isAccoCard: (b: Block) => b is AccoCard;
 export declare const isText: (b: Block) => b is Text;

package/dist/types.js

@@ -1,4 +1,10 @@
 import {} from 'dinero.js';
+export const DEFAULT_TEXT_FONT_SIZE = '1rem';
+export const DEFAULT_HEADERS_FONT_SIZE = '1.5rem';
+export const DEFAULT_EXT_HEADERS_1_FONT_SIZE = '3.2rem';
+export const DEFAULT_EXT_HEADERS_2_FONT_SIZE = '2.2rem';
+export const DEFAULT_EXT_HEADERS_3_FONT_SIZE = '1.8rem';
+export const DEFAULT_EXT_HEADERS_4_FONT_SIZE = '1.2rem';
 export const PRICING_COLUMNS = [
     'timeRange',
     'firstNight',

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "accomadesc",
-	"version": "0.1.1",
+	"version": "0.1.3",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -38,15 +38,15 @@
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^3.3.1",
-		"@sveltejs/kit": "^2.15.2",
+		"@sveltejs/kit": "^2.15.3",
 		"@sveltejs/package": "^2.3.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@types/luxon": "^3.4.2",
 		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.2",
-		"publint": "^0.3.1",
-		"svelte": "^5.17.3",
-		"svelte-check": "^4.1.3",
+		"prettier-plugin-svelte": "^3.3.3",
+		"publint": "^0.3.2",
+		"svelte": "^5.18.0",
+		"svelte-check": "^4.1.4",
 		"typescript": "^5.7.3",
 		"vite": "^6.0.7",
 		"vitest": "^2.1.8"