@iqual/nuxt-icms 1.6.1 → 1.6.2-rc.2

package/cache/multiCache.serverOptions.ts

@@ -0,0 +1,58 @@
+import { defineMultiCacheOptions } from 'nuxt-multi-cache/server-options'
+import lruCacheDriver from 'unstorage/drivers/lru-cache'
+import { useRuntimeConfig } from 'nitropack/runtime'
+import {
+  alterCachedHeaders,
+  boundedLruOptions,
+  buildRouteCacheKey,
+  containerMemoryLimit,
+  isBlokkliRequest,
+  resolvePageCacheConfig,
+  resolveRouteMaxSize,
+  routeCacheDriver,
+} from './pageCache'
+import { LruCacheTagRegistry } from './cacheTagRegistry'
+import { enabledForRequest } from './enabledForRequest'
+
+export default defineMultiCacheOptions(() => {
+  const config = resolvePageCacheConfig(useRuntimeConfig().pageCache)
+
+  const dataDriver = lruCacheDriver(
+    boundedLruOptions(config.dataMaxSize, (key) =>
+      cacheTagRegistry.forget('data', key),
+    ),
+  )
+  const routeDriver = routeCacheDriver(
+    resolveRouteMaxSize(config, containerMemoryLimit()),
+    config.routeCompression,
+    (key) => cacheTagRegistry.forget('route', key),
+  )
+  const drivers = { data: dataDriver, route: routeDriver }
+  const cacheTagRegistry = new LruCacheTagRegistry(
+    (cacheType, key) =>
+      cacheType !== 'component' && !!drivers[cacheType].hasItem(key, {}),
+  )
+
+  return {
+    api: {},
+    // Purging looks the tags up instead of decoding every cached entry.
+    cacheTagRegistry,
+    data: {
+      storage: {
+        driver: dataDriver,
+      },
+    },
+    // Requests with a Drupal session bypass all caches.
+    enabledForRequest,
+    route: {
+      storage: {
+        driver: routeDriver,
+      },
+      // Pages opt in via usePageCache(); this only rules out requests that
+      // must never be stored.
+      applies: (path: string) => !isBlokkliRequest(path),
+      buildCacheKey: buildRouteCacheKey,
+      alterCachedHeaders,
+    },
+  }
+})

package/cache/pageCache.ts

@@ -0,0 +1,360 @@
+import type { H3Event } from 'h3'
+import {
+  getRequestHeader,
+  getResponseHeader,
+  getResponseStatus,
+  removeResponseHeader,
+  setResponseHeader,
+} from 'h3'
+import { readFileSync } from 'node:fs'
+import { promisify } from 'node:util'
+import { gunzip, gzip } from 'node:zlib'
+import lruCacheDriver from 'unstorage/drivers/lru-cache'
+import type { PageCacheConfig } from '../utils/pageCache'
+import { hasDrupalSession } from './enabledForRequest'
+
+export {
+  PAGE_CACHE_DEFAULTS,
+  pageCacheDefaults,
+  resolvePageCacheConfig,
+} from '../utils/pageCache'
+export type { PageCacheConfig, PageCacheMode } from '../utils/pageCache'
+
+export { hasDrupalSession }
+
+/**
+ * Whether the request is a blökkli editor or preview request.
+ */
+export function isBlokkliRequest(pathWithQuery: string) {
+  const [path = '', query = ''] = pathWithQuery.split('?', 2)
+  return (
+    path.startsWith('/blokkli') ||
+    /(?:^|&)blokkli(?:Editing|Preview)(?:[=&]|$)/.test(query)
+  )
+}
+
+/**
+ * Query parameters that never change the rendered page: analytics and ad
+ * click identifiers. They are dropped from the route cache key so that
+ * campaign links don't split the cache.
+ */
+const IGNORED_QUERY_PARAMS =
+  /^(?:utm_\w+|gclid|gclsrc|gbraid|wbraid|dclid|fbclid|msclkid|twclid|li_fat_id|igshid|yclid|srsltid|mc_cid|mc_eid|_ga|_gl|_hsenc|_hsmi|mkt_tok)$/i
+
+/**
+ * The route cache key: scheme + host + path + the relevant query parameters,
+ * sorted. Cookies are deliberately not part of it — requests with a Drupal
+ * session never reach the route cache.
+ *
+ * Both Host and X-Forwarded-Host are part of the key: whichever of them the
+ * app ends up rendering absolute URLs from, a spoofed header only ever lands
+ * in its own cache entry.
+ *
+ * The key is URI-encoded because unstorage drops everything after a "?" and
+ * treats "/" and ":" as path separators when normalizing keys.
+ */
+export function buildRouteCacheKey(event: H3Event): string {
+  const url = new URL(event.path || '/', 'http://localhost')
+  const params = [...url.searchParams]
+    .filter(([name]) => !IGNORED_QUERY_PARAMS.test(name))
+    .sort(([a, av], [b, bv]) => (a === b ? cmp(av, bv) : cmp(a, b)))
+  const query = new URLSearchParams(params).toString()
+
+  const proto = getRequestHeader(event, 'x-forwarded-proto') || ''
+  const forwardedHost = getRequestHeader(event, 'x-forwarded-host') || ''
+  const host = getRequestHeader(event, 'host') || ''
+
+  return encodeURIComponent(
+    [proto, forwardedHost, host].join('|').toLowerCase() +
+      url.pathname +
+      (query ? '?' + query : ''),
+  )
+}
+
+function cmp(a: string, b: string) {
+  return a < b ? -1 : a > b ? 1 : 0
+}
+
+/**
+ * Approximate memory footprint of a cached value in bytes.
+ *
+ * JS engines (JavaScriptCore in Bun, V8 in Node) store a string with one
+ * byte per character as long as it only contains Latin-1 characters, and
+ * two bytes per character otherwise. Buffer.byteLength() (UTF-8) would
+ * undercount the second case by up to half.
+ */
+export function cacheEntrySize(value: unknown, key: string): number {
+  if (value instanceof Uint8Array) {
+    return value.byteLength + key.length * 2
+  }
+  const string =
+    typeof value === 'string' ? value : (JSON.stringify(value) ?? '')
+  // eslint-disable-next-line no-control-regex
+  const perChar = /[^\u0000-\u00ff]/.test(string) ? 2 : 1
+  return string.length * perChar + key.length * 2
+}
+
+/**
+ * Options for the unstorage lru-cache driver that bound it by bytes.
+ *
+ * A single entry may use at most a quarter of the budget, so one huge page
+ * can't flush the whole cache. `max` is only a safety net for the entry count.
+ */
+export function boundedLruOptions(
+  maxSize: number,
+  onRemove?: (key: string) => void,
+) {
+  return {
+    max: 5000,
+    maxSize: Math.max(maxSize, 1),
+    maxEntrySize: Math.max(Math.floor(maxSize / 4), 1),
+    sizeCalculation: (value: unknown, key: string) =>
+      Math.max(cacheEntrySize(value, key), 1),
+    // Called when an entry is evicted, deleted or replaced.
+    dispose: onRemove
+      ? (_value: unknown, key: string) => onRemove(key)
+      : undefined,
+  }
+}
+
+/**
+ * The memory limit of the container in bytes, if known.
+ *
+ * Platform.sh/Upsun containers expose their size in /run/config.json
+ * (`info.limits.memory`, in MB); their cgroup files are not readable and
+ * process.constrainedMemory() reports the memory of the host. Elsewhere the
+ * cgroup limit is used.
+ */
+export function containerMemoryLimit(
+  readFile: (path: string) => string = (path) => readFileSync(path, 'utf8'),
+): number | null {
+  const read = (path: string) => {
+    try {
+      return readFile(path).trim()
+    } catch {
+      return null
+    }
+  }
+
+  const platformConfig = read('/run/config.json')
+  if (platformConfig) {
+    try {
+      const memory = Number(JSON.parse(platformConfig)?.info?.limits?.memory)
+      if (memory > 0) {
+        return memory * 1024 * 1024
+      }
+    } catch {
+      // Not the expected format, try the cgroup limit.
+    }
+  }
+
+  for (const path of [
+    '/sys/fs/cgroup/memory.max',
+    '/sys/fs/cgroup/memory/memory.limit_in_bytes',
+  ]) {
+    const limit = Number(read(path))
+    // "max" (v2) or a huge number (v1) means unlimited.
+    if (limit > 0 && limit < 2 ** 50) {
+      return limit
+    }
+  }
+  return null
+}
+
+const MB = 1024 * 1024
+
+export const AUTO_ROUTE_MAX_SIZE = Object.freeze({
+  share: 0.03,
+  min: 8 * MB,
+  max: 64 * MB,
+  fallback: 24 * MB,
+})
+
+/**
+ * The route cache budget: the configured one, or for `auto` a share of the
+ * container memory (see the package README for the measurements behind it).
+ */
+export function resolveRouteMaxSize(
+  config: Pick<PageCacheConfig, 'routeMaxSize'>,
+  memoryLimit: number | null,
+): number {
+  if (config.routeMaxSize !== 'auto') {
+    return config.routeMaxSize
+  }
+  if (!memoryLimit) {
+    return AUTO_ROUTE_MAX_SIZE.fallback
+  }
+  return Math.min(
+    Math.max(
+      Math.floor(memoryLimit * AUTO_ROUTE_MAX_SIZE.share),
+      AUTO_ROUTE_MAX_SIZE.min,
+    ),
+    AUTO_ROUTE_MAX_SIZE.max,
+  )
+}
+
+const gzipAsync = promisify(gzip)
+const gunzipAsync = promisify(gunzip)
+
+/**
+ * The route cache storage driver: a bounded LRU that stores each page as a
+ * UTF-8 buffer, gzipped by default.
+ *
+ * A JS string takes two bytes per character as soon as a page has a single
+ * character outside Latin-1 (a typographic apostrophe is enough); UTF-8 takes
+ * one for markup. gzip shrinks a page about 8× further. nuxt-multi-cache
+ * accepts a Buffer from getItemRaw(). For a 400 KB page compression costs
+ * about 3 ms when storing and 4 ms per hit (5 ms instead of 1 ms); purging
+ * decompresses nothing thanks to the cache tag registry.
+ */
+export function routeCacheDriver(
+  maxSize: number,
+  compress: boolean,
+  onRemove?: (key: string) => void,
+) {
+  const driver = lruCacheDriver(boundedLruOptions(maxSize, onRemove))
+  const encode = (value: string) =>
+    compress ? gzipAsync(value) : Promise.resolve(Buffer.from(value))
+  const decode = async (value: unknown) =>
+    compress && value instanceof Uint8Array ? gunzipAsync(value) : value
+  return {
+    ...driver,
+    async setItemRaw(key: string, value: unknown) {
+      driver.setItemRaw!(
+        key,
+        typeof value === 'string' ? await encode(value) : value,
+        {},
+      )
+    },
+    async getItemRaw(key: string) {
+      return (await decode(driver.getItemRaw!(key, {}))) ?? null
+    },
+    // Used by the stats and inspect API endpoints.
+    async getItem(key: string) {
+      const value = await decode(driver.getItem(key, {}))
+      return value instanceof Uint8Array
+        ? Buffer.from(value).toString()
+        : (value ?? null)
+    },
+  }
+}
+
+type RouteCacheHelperLike = {
+  cacheable: boolean | null
+  maxAge: number
+  setUncacheable(): unknown
+}
+
+type MultiCacheContextLike = {
+  cdn?: unknown
+  route?: RouteCacheHelperLike
+  routeServedFromCache?: boolean
+}
+
+function getMultiCacheContext(event: H3Event): MultiCacheContextLike {
+  return (event.context.multiCache || {}) as MultiCacheContextLike
+}
+
+/**
+ * Finalize the route cache decision just before the response is sent (the
+ * route cache stores it in the afterResponse hook, which runs later).
+ *
+ * - Never store a response that sets a cookie.
+ * - Clamp the max age: nuxt-multi-cache treats "permanent" (-1) as the
+ *   lowest value when merging, so a permanent data cache item could
+ *   otherwise make the whole page permanent.
+ */
+export function finalizeRouteCache(event: H3Event, config: PageCacheConfig) {
+  const route = getMultiCacheContext(event).route
+  if (!route?.cacheable) {
+    return
+  }
+
+  if (getResponseHeader(event, 'set-cookie')) {
+    route.setUncacheable()
+    return
+  }
+
+  if (route.maxAge < 0 || route.maxAge > config.routeMaxAge) {
+    route.maxAge = config.routeMaxAge
+  }
+}
+
+/**
+ * Rewrite the shared-cache headers collected by the nuxt-multi-cache CDN
+ * helper into browser-only headers when no shared cache is in front of Nuxt.
+ *
+ * - Cache-Tag only serves a shared cache; it is always dropped. (Error pages
+ *   render in a sub-request whose headers are copied over, so it can also
+ *   show up without collected cacheability.)
+ * - Responses for a Drupal session are never cached anywhere. Logged-in users
+ *   get the SPA shell without SSR, so there is no collected cacheability.
+ * - Otherwise only responses whose cacheability was collected by the CDN
+ *   helper (SSR pages, GraphQL API routes) are rewritten. Static assets keep
+ *   the headers of their route rules.
+ */
+export function applyCacheControlHeaders(
+  event: H3Event,
+  config: PageCacheConfig,
+) {
+  if (config.mode === 'varnish') {
+    return
+  }
+
+  removeResponseHeader(event, 'cache-tag')
+
+  const hasCacheability = !!getMultiCacheContext(event).cdn
+  const isHtml = /^text\/html\b/.test(
+    String(getResponseHeader(event, 'content-type') || ''),
+  )
+  const hasSession = hasDrupalSession(getRequestHeader(event, 'cookie'))
+
+  if (hasSession && (hasCacheability || isHtml)) {
+    setResponseHeader(event, 'cache-control', 'private, no-store')
+    return
+  }
+
+  if (!hasCacheability) {
+    return
+  }
+
+  const cacheControl = String(getResponseHeader(event, 'cache-control') || '')
+  const isCacheable =
+    getResponseStatus(event) < 500 &&
+    /\bpublic\b/.test(cacheControl) &&
+    !/\b(?:private|no-store|no-cache)\b/.test(cacheControl)
+
+  setResponseHeader(
+    event,
+    'cache-control',
+    isCacheable && config.browserMaxAge > 0
+      ? `public, max-age=${config.browserMaxAge}`
+      : 'private, no-store',
+  )
+}
+
+/**
+ * Expose whether the route cache served the response, for monitoring.
+ */
+export function setRouteCacheStatusHeader(event: H3Event) {
+  const context = getMultiCacheContext(event)
+  if (context.routeServedFromCache) {
+    setResponseHeader(event, 'x-icms-page-cache', 'HIT')
+  } else if (context.route?.cacheable) {
+    setResponseHeader(event, 'x-icms-page-cache', 'MISS')
+  }
+}
+
+/**
+ * Headers that must never be replayed from the route cache.
+ */
+export function alterCachedHeaders(
+  headers: Record<string, string | string[] | number | undefined>,
+) {
+  const {
+    'set-cookie': _cookie,
+    'x-icms-page-cache': _status,
+    ...rest
+  } = headers
+  return rest
+}

package/components/Blokkli/Anchor/icon.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 3C17.7614 3 20 5.23858 20 8C20 10.0502 18.7657 11.8114 17 12.583V21.3447L21.5 18.7471C21.8093 18.5685 21.9999 18.238 22 17.8809V16C22 14.8954 22.8954 14 24 14C25.1046 14 26 14.8954 26 16V20.1904C25.9999 20.5476 25.8093 20.878 25.5 21.0566L17 25.9639L15.46 26.7617C15.1715 26.9111 14.8285 26.9111 14.54 26.7617L13 25.9639L4.5 21.0566C4.19066 20.878 4.00007 20.5476 4 20.1904V16C4 14.8954 4.89543 14 6 14C7.10457 14 8 14.8954 8 16V17.8809C8.00006 18.238 8.19067 18.5685 8.5 18.7471L13 21.3447V12.583C11.2343 11.8114 10 10.0502 10 8C10 5.23858 12.2386 3 15 3ZM15 6C13.8954 6 13 6.89543 13 8C13 9.10457 13.8954 10 15 10C16.1046 10 17 9.10457 17 8C17 6.89543 16.1046 6 15 6Z" fill="currentColor"/>
+</svg>

package/components/Blokkli/Anchor/index.vue

@@ -0,0 +1,13 @@
+<template>
+  <ParagraphAnchor v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutAnchorFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutAnchorFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_layout_anchor',
+})
+</script>

package/components/Blokkli/AnchorNavigation/icon.svg

@@ -0,0 +1,8 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="12" y="8" width="14" height="2" rx="0.5" fill="currentColor"/>
+<rect x="12" y="20" width="14" height="2" rx="0.5" fill="currentColor"/>
+<rect x="12" y="14" width="14" height="2" rx="0.5" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 6C7.1276 6 7.63636 6.46884 7.63636 7.04717C7.63636 7.47655 7.35585 7.84541 6.95455 8.00702V9.84202L7.97727 9.29798C8.04757 9.26058 8.0909 9.19138 8.09091 9.11657V8.72265C8.09091 8.49132 8.29442 8.30378 8.54545 8.30378C8.79649 8.30378 9 8.49132 9 8.72265V9.60027C8.99998 9.67508 8.95667 9.74428 8.88636 9.78169L6.95455 10.8094L6.60454 10.9765C6.53898 11.0078 6.46102 11.0078 6.39546 10.9765L6.04545 10.8094L4.11364 9.78169C4.04333 9.74428 4.00002 9.67508 4 9.60027V8.72265C4 8.49132 4.20351 8.30378 4.45455 8.30378C4.70558 8.30378 4.90909 8.49132 4.90909 8.72265V9.11657C4.9091 9.19138 4.95243 9.26058 5.02273 9.29798L6.04545 9.84202V8.00702C5.64415 7.84541 5.36364 7.47655 5.36364 7.04717C5.36364 6.46884 5.8724 6 6.5 6ZM6.5 6.6283C6.24896 6.6283 6.04545 6.81584 6.04545 7.04717C6.04545 7.27851 6.24896 7.46604 6.5 7.46604C6.75104 7.46604 6.95455 7.27851 6.95455 7.04717C6.95455 6.81584 6.75104 6.6283 6.5 6.6283Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 12C7.1276 12 7.63636 12.4688 7.63636 13.0472C7.63636 13.4766 7.35585 13.8454 6.95455 14.007V15.842L7.97727 15.298C8.04757 15.2606 8.0909 15.1914 8.09091 15.1166V14.7227C8.09091 14.4913 8.29442 14.3038 8.54545 14.3038C8.79649 14.3038 9 14.4913 9 14.7227V15.6003C8.99998 15.6751 8.95667 15.7443 8.88636 15.7817L6.95455 16.8094L6.60454 16.9765C6.53898 17.0078 6.46102 17.0078 6.39546 16.9765L6.04545 16.8094L4.11364 15.7817C4.04333 15.7443 4.00002 15.6751 4 15.6003V14.7227C4 14.4913 4.20351 14.3038 4.45455 14.3038C4.70558 14.3038 4.90909 14.4913 4.90909 14.7227V15.1166C4.9091 15.1914 4.95243 15.2606 5.02273 15.298L6.04545 15.842V14.007C5.64415 13.8454 5.36364 13.4766 5.36364 13.0472C5.36364 12.4688 5.8724 12 6.5 12ZM6.5 12.6283C6.24896 12.6283 6.04545 12.8158 6.04545 13.0472C6.04545 13.2785 6.24896 13.466 6.5 13.466C6.75104 13.466 6.95455 13.2785 6.95455 13.0472C6.95455 12.8158 6.75104 12.6283 6.5 12.6283Z" fill="currentColor"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.5 18C7.1276 18 7.63636 18.4688 7.63636 19.0472C7.63636 19.4766 7.35585 19.8454 6.95455 20.007V21.842L7.97727 21.298C8.04757 21.2606 8.0909 21.1914 8.09091 21.1166V20.7227C8.09091 20.4913 8.29442 20.3038 8.54545 20.3038C8.79649 20.3038 9 20.4913 9 20.7227V21.6003C8.99998 21.6751 8.95667 21.7443 8.88636 21.7817L6.95455 22.8094L6.60454 22.9765C6.53898 23.0078 6.46102 23.0078 6.39546 22.9765L6.04545 22.8094L4.11364 21.7817C4.04333 21.7443 4.00002 21.6751 4 21.6003V20.7227C4 20.4913 4.20351 20.3038 4.45455 20.3038C4.70558 20.3038 4.90909 20.4913 4.90909 20.7227V21.1166C4.9091 21.1914 4.95243 21.2606 5.02273 21.298L6.04545 21.842V20.007C5.64415 19.8454 5.36364 19.4766 5.36364 19.0472C5.36364 18.4688 5.8724 18 6.5 18ZM6.5 18.6283C6.24896 18.6283 6.04545 18.8158 6.04545 19.0472C6.04545 19.2785 6.24896 19.466 6.5 19.466C6.75104 19.466 6.95455 19.2785 6.95455 19.0472C6.95455 18.8158 6.75104 18.6283 6.5 18.6283Z" fill="currentColor"/>
+</svg>

package/components/Blokkli/AnchorNavigation/index.vue

@@ -0,0 +1,9 @@
+<template>
+  <ParagraphAnchorNavigation :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+const blokkliData = defineBlokkli({
+  bundle: 'icms_layout_anchor_navigation',
+})
+</script>

package/components/Blokkli/Card/Element/index.vue

@@ -10,5 +10,4 @@ const props = defineProps<ParagraphIcmsCardElementFragment>()
 const blokkliData = defineBlokkli({
   bundle: 'icms_card_element',
 })
-
 </script>

package/components/Blokkli/Collapsible/Element/index.vue

@@ -7,6 +7,11 @@ import type { ParagraphIcmsCollapsibleElementFragment } from '#graphql-operation
 
 const props = defineProps<ParagraphIcmsCollapsibleElementFragment>()
 
+// This bundle holds nested blocks: ParagraphCollapsibleElement renders
+// `<BlokkliField name="field_icms_collapsible_layouts">`. blokkli detects
+// nested bundles by scanning the block component itself for that tag, so
+// naming it here is what puts the bundle into `BlockBundleWithNested` and
+// makes it usable as a `renderFor.parentBundle`.
 const blokkliData = defineBlokkli({
   bundle: 'icms_collapsible_element',
 })

package/components/Blokkli/FAQ/Element/index.vue

@@ -10,5 +10,4 @@ const props = defineProps<ParagraphIcmsFaqElementFragment>()
 const blokkliData = defineBlokkli({
   bundle: 'icms_faq_element',
 })
-
 </script>

package/components/Blokkli/Fragment/Separator/icon.svg

@@ -0,0 +1,4 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4 15H26" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+<path d="M7 8H23M7 22H23" stroke="currentColor" stroke-width="2" stroke-linecap="round" opacity="0.3"/>
+</svg>

package/components/Blokkli/Fragment/Separator/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <DesignSystemAtomsContainer
+    :color-scheme="parentColorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass', minSpacingClassList)"
+  >
+    <DesignSystemAtomsGridRow>
+      <hr
+        :class="
+          themedClass(
+            'hrClass',
+            cn('col-span-12 border-0 border-t', lineColorClass),
+          )
+        "
+      />
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+/**
+ * A horizontal rule between blocks.
+ *
+ * Fragments are blocks without backend data: editors place them, the frontend
+ * decides what they render. Any component under `components/Blokkli/Fragment`
+ * calling `defineBlokkliFragment()` is discovered at build time and offered in
+ * the editor (see modules/blokkliFragments.ts).
+ *
+ * Unlike a layout block, the colour option colours the line instead of the
+ * background — a separator has nothing else to colour. The background stays
+ * whatever the surrounding section uses.
+ */
+const { options } = defineBlokkliFragment({
+  name: 'separator',
+  label: 'Separator',
+  description: 'A horizontal line between two blocks.',
+  globalOptions: ['spacingTop', 'spacingBottom', 'colorScheme'],
+})
+
+const themedClass = useTheme('BlokkliFragmentSeparator')
+
+const parentColorScheme = inject<ColorScheme>('colorScheme', 'none')
+
+/**
+ * The line takes the colour of the chosen scheme. "Light" resolves to the same
+ * `gray-100` as the default, because that is the design system's border colour.
+ */
+const lineColorClass = computed(() => {
+  switch (options.value.colorScheme) {
+    case 'dark':
+      return themedClass('lineColorDarkClass', 'border-gray-950')
+    case 'accent':
+      return themedClass('lineColorAccentClass', 'border-primary-600')
+    default:
+      return themedClass('lineColorClass', 'border-gray-100')
+  }
+})
+
+// The global options carry defaults, but a fragment placed before this
+// component existed has no stored options at all — fall back to the same
+// values the option definitions declare.
+const spacing = computed(() => ({
+  top: options.value.spacingTop ?? 'small',
+  bottom: options.value.spacingBottom ?? 'small',
+}))
+
+/**
+ * "None" would leave the block one pixel high, which makes it impossible to
+ * grab in the editor — half of the small spacing instead. The classes are
+ * merged after the container's own, so they win.
+ */
+const minSpacingClassList = computed(() =>
+  [
+    spacing.value.top === 'none'
+      ? themedClass('spacingTopNoneClass', 'pt-8')
+      : '',
+    spacing.value.bottom === 'none'
+      ? themedClass('spacingBottomNoneClass', 'pb-8')
+      : '',
+  ]
+    .filter(Boolean)
+    .join(' '),
+)
+</script>

package/components/Blokkli/Gallery/index.vue

@@ -3,7 +3,6 @@
 </template>
 
 <script lang="ts" setup>
-
 import type { ParagraphIcmsLayoutGalleryFragment } from '#graphql-operations'
 
 const props = defineProps<ParagraphIcmsLayoutGalleryFragment>()
@@ -14,8 +13,7 @@ const blokkliData = defineBlokkli({
     'spacingTop',
     'spacingBottom',
     'alignHorizontalFull',
-    'colorScheme'
+    'colorScheme',
   ],
 })
-
 </script>

package/components/Blokkli/IconText/Element/index.vue

@@ -10,5 +10,4 @@ const props = defineProps<ParagraphIcmsIconTextElementFragment>()
 const blokkliData = defineBlokkli({
   bundle: 'icms_icon_text_element',
 })
-
 </script>

package/components/Blokkli/Introduction/index.vue

@@ -17,5 +17,4 @@ const blokkliData = defineBlokkli({
     'colorScheme',
   ],
 })
-
 </script>

package/components/Blokkli/Listing/icon.svg

@@ -0,0 +1,9 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="16" y="6" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="16" y="18" width="12" height="2" rx="0.5" fill="currentColor"/>
+<rect x="16" y="10" width="6" height="2" rx="0.5" fill="currentColor"/>
+<rect x="16" y="22" width="6" height="2" rx="0.5" fill="currentColor"/>
+<path d="M4.5 3H10.5C10.7761 3 11 3.22386 11 3.5V4H5.5C4.67157 4 4 4.67157 4 5.5V11H3.5C3.22386 11 3 10.7761 3 10.5V4.5C3 3.67157 3.67157 3 4.5 3Z" fill="currentColor"/>
+<path d="M6.5 5H12.5C12.7761 5 13 5.22386 13 5.5V6H7.5C6.67157 6 6 6.67157 6 7.5V13H5.5C5.22386 13 5 12.7761 5 12.5V6.5C5 5.67157 5.67157 5 6.5 5Z" fill="currentColor"/>
+<path d="M8.5 7H13.5C13.7761 7 14 7.22386 14 7.5V14.5C14 14.7761 13.7761 15 13.5 15H8.5C7.67157 15 7 14.3284 7 13.5V8.5C7 7.67157 7.67157 7 8.5 7ZM8.5 12C8.22386 12 8 12.2239 8 12.5C8 12.7761 8.22386 13 8.5 13H12.5C12.7761 13 13 12.7761 13 12.5C13 12.2239 12.7761 12 12.5 12H8.5ZM8.5 10C8.22386 10 8 10.2239 8 10.5C8 10.7761 8.22386 11 8.5 11H12.5C12.7761 11 13 10.7761 13 10.5C13 10.2239 12.7761 10 12.5 10H8.5Z" fill="currentColor"/>
+</svg>

package/components/Blokkli/Listing/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div>
+    <ParagraphListing v-bind="props" :blokkliData="blokkliData" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutListingFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutListingFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_layout_listing',
+  globalOptions: [
+    'teaserVariant',
+    'spacingTop',
+    'spacingBottom',
+    'alignHorizontalFull',
+    'slider',
+    'sliderColumns',
+    'colorScheme',
+  ],
+})
+</script>

package/components/Blokkli/Logo/Element/index.vue

@@ -10,5 +10,4 @@ const props = defineProps<ParagraphIcmsLogoElementFragment>()
 const blokkliData = defineBlokkli({
   bundle: 'icms_logo_element',
 })
-
 </script>

package/components/Blokkli/Table/index.vue

@@ -16,5 +16,4 @@ const blokkliData = defineBlokkli({
     'colorScheme',
   ],
 })
-
 </script>

package/components/Blokkli/Team/Element/index.vue

@@ -10,5 +10,4 @@ const props = defineProps<ParagraphIcmsTeamElementFragment>()
 const blokkliData = defineBlokkli({
   bundle: 'icms_team_element',
 })
-
 </script>

package/components/Blokkli/Team/Layout/index.vue

@@ -16,5 +16,4 @@ const blokkliData = defineBlokkli({
     'colorScheme',
   ],
 })
-
 </script>