@sonordev/site-kit 6.5.0 → 7.0.0

package/dist/chunk-LE7ZOTHB.js

@@ -0,0 +1,43 @@
+// src/og/config.ts
+function defineOgCard(config) {
+  return config;
+}
+var OG_WIDTH = 1200;
+var OG_HEIGHT = 630;
+var TITLE_MAX_PX = 104;
+var TITLE_MIN_PX = 56;
+var OG_REPORT_ATTR = "data-og-report";
+
+// src/og/contrast.ts
+var AA_LARGE = 3;
+function parseHexColor(color) {
+  const hex = color.trim().replace(/^#/, "");
+  if (!/^([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.test(hex)) return null;
+  const full = hex.length === 3 ? hex.replace(/./g, (c) => c + c) : hex.slice(0, 6);
+  return [0, 2, 4].map((i) => parseInt(full.slice(i, i + 2), 16));
+}
+function luminance([r, g, b]) {
+  const channel = (v) => {
+    const s = v / 255;
+    return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+  };
+  return 0.2126 * channel(r) + 0.7152 * channel(g) + 0.0722 * channel(b);
+}
+function contrastRatio(a, b) {
+  const ca = parseHexColor(a);
+  const cb = parseHexColor(b);
+  if (!ca || !cb) return null;
+  const [hi, lo] = [luminance(ca), luminance(cb)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+function barTextColor(theme) {
+  if (theme.barText) return theme.barText;
+  const candidates = [theme.surface, theme.bg, theme.text].filter((c) => !!c);
+  const scored = candidates.map((color) => ({ color, ratio: contrastRatio(color, theme.accent) }));
+  const passing = scored.find((s) => s.ratio !== null && s.ratio >= AA_LARGE);
+  if (passing) return passing.color;
+  const measurable = scored.filter((s) => s.ratio !== null).sort((a, b) => b.ratio - a.ratio);
+  return measurable[0]?.color ?? candidates[0];
+}
+
+export { OG_HEIGHT, OG_REPORT_ATTR, OG_WIDTH, TITLE_MAX_PX, TITLE_MIN_PX, barTextColor, defineOgCard };

package/dist/chunk-LNSNA3W4.js

@@ -0,0 +1,217 @@
+import { CtaBarBehavior } from './chunk-UPFU63L4.js';
+import { GlassStyles } from './chunk-JE4A5S4F.js';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+
+var CTA_BAR_STYLE_HREF = "sk-cta-bar";
+var CTA_BAR_BREAKPOINTS = { sm: 640, md: 768, lg: 1024, xl: 1280 };
+var BAR_HEIGHT = "calc(var(--sk-cta-bar-action-height, 48px) + 2 * var(--sk-cta-bar-padding, 6px))";
+var ECHO_CLEARANCE = `calc(${BAR_HEIGHT} + var(--sk-cta-bar-inset, 12px) + 12px)`;
+var CTA_BAR_SPACE = `calc(${BAR_HEIGHT} + 2 * var(--sk-cta-bar-inset, 12px) + env(safe-area-inset-bottom, 0px))`;
+function presentBelow(name, px) {
+  const rules = `
+  html:has(.sk-cta-bar[data-breakpoint="${name}"]) {
+    --sk-cta-bar-space: ${CTA_BAR_SPACE};
+  }
+  html:has(.sk-cta-bar[data-breakpoint="${name}"][data-echo-clearance]:not([data-hidden])) {
+    --sk-echo-offset-bottom: ${ECHO_CLEARANCE};
+  }`;
+  return px == null ? `
+@media all {${rules}
+}` : `
+@media (max-width: ${px - 0.02}px) {${rules}
+}`;
+}
+function perBreakpoint() {
+  return Object.entries(CTA_BAR_BREAKPOINTS).map(
+    ([name, px]) => `
+@media (min-width: ${px}px) {
+  .sk-cta-bar[data-breakpoint="${name}"], .sk-cta-bar-spacer[data-breakpoint="${name}"] { display: none; }
+}${presentBelow(name, px)}`
+  ).join("");
+}
+var CTA_BAR_CSS = `
+.sk-cta-bar {
+  --sk-cta-h: var(--sk-cta-bar-action-height, 48px);
+  --sk-cta-pad: var(--sk-cta-bar-padding, 6px);
+  position: fixed;
+  z-index: var(--sk-cta-bar-z, 40);
+  left: var(--sk-cta-bar-inset, 12px);
+  right: var(--sk-cta-bar-inset, 12px);
+  bottom: calc(var(--sk-cta-bar-inset, 12px) + env(safe-area-inset-bottom, 0px) + var(--sk-vv-layout-gap, 0px));
+  max-width: var(--sk-cta-bar-max-width, 520px);
+  margin: 0 auto;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: var(--sk-cta-pad);
+  border-radius: calc(var(--sk-cta-h) / 2 + var(--sk-cta-pad));
+  color: var(--sk-cta-bar-text, var(--sk-text-primary, #111827));
+  font-family: inherit;
+  transition:
+    transform 450ms cubic-bezier(0.2, 0.8, 0.2, 1),
+    padding 250ms ease,
+    border-radius 250ms ease,
+    visibility 0s linear 0s;
+}
+.sk-cta-bar[data-layout="fit"] { width: fit-content; }
+.sk-cta-bar[data-compact] {
+  --sk-cta-h: calc(var(--sk-cta-bar-action-height, 48px) - 8px);
+  --sk-cta-pad: calc(var(--sk-cta-bar-padding, 6px) - 2px);
+}
+.sk-cta-bar[data-hidden] {
+  transform: translateY(calc(100% + var(--sk-cta-bar-inset, 12px) + env(safe-area-inset-bottom, 0px) + 16px));
+  visibility: hidden;
+  transition:
+    transform 350ms cubic-bezier(0.4, 0, 1, 1),
+    visibility 0s linear 350ms;
+}
+.sk-cta-bar__action {
+  flex: 1 1 0%;
+  min-width: 0;
+  box-sizing: border-box;
+  height: var(--sk-cta-h);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 0 18px;
+  margin: 0;
+  border: 0;
+  border-radius: 999px;
+  font: inherit;
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1;
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition:
+    height 250ms ease,
+    flex-grow 300ms ease,
+    flex-basis 300ms ease,
+    padding 250ms ease,
+    transform 150ms ease;
+}
+.sk-cta-bar[data-layout="fit"] .sk-cta-bar__action { flex: 0 0 auto; }
+.sk-cta-bar__action:active { transform: scale(0.97); }
+.sk-cta-bar__action:focus-visible {
+  outline: 2px solid var(--sk-cta-bar-focus, currentColor);
+  outline-offset: 2px;
+}
+.sk-cta-bar__action[data-variant="primary"] {
+  background: var(--sk-cta-primary-bg, var(--sk-primary, #2563eb));
+  color: var(--sk-cta-primary-text, #ffffff);
+  box-shadow:
+    inset 0 1px 0 color-mix(in srgb, #ffffff 28%, transparent),
+    0 1px 2px rgba(0, 0, 0, 0.12);
+}
+.sk-cta-bar__action[data-variant="secondary"] {
+  background: var(--sk-cta-secondary-bg, color-mix(in srgb, currentColor 8%, transparent));
+  color: var(--sk-cta-secondary-text, inherit);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 16%, transparent);
+}
+.sk-cta-bar__icon { display: inline-flex; flex-shrink: 0; }
+.sk-cta-bar__icon > svg { width: 18px; height: 18px; }
+.sk-cta-bar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.sk-cta-bar[data-compact] .sk-cta-bar__action[data-collapse] {
+  flex: 0 0 var(--sk-cta-h);
+  padding: 0;
+}
+.sk-cta-bar[data-compact] .sk-cta-bar__action[data-collapse] .sk-cta-bar__label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.sk-cta-bar-spacer { height: ${CTA_BAR_SPACE}; }${presentBelow("none", null)}${perBreakpoint()}
+@media (prefers-reduced-motion: reduce) {
+  .sk-cta-bar, .sk-cta-bar[data-hidden], .sk-cta-bar__action { transition: none; }
+}
+@media (scripting: none) {
+  .sk-cta-bar[data-hidden] { transform: none; visibility: visible; }
+}
+@media print {
+  .sk-cta-bar, .sk-cta-bar-spacer { display: none !important; }
+}
+`;
+function CtaBarStyles() {
+  return /* @__PURE__ */ jsx("style", { href: CTA_BAR_STYLE_HREF, precedence: "default", children: CTA_BAR_CSS });
+}
+function cx(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+function CtaBar({
+  children,
+  label = "Quick actions",
+  breakpoint = "lg",
+  layout = "fill",
+  showAfter,
+  hideOver,
+  hideWhileTyping = true,
+  compactOnScroll = true,
+  echoClearance = true,
+  spacer = true,
+  track = true,
+  className,
+  id
+}) {
+  const hideOverList = hideOver == null ? void 0 : Array.isArray(hideOver) ? hideOver : [hideOver];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(GlassStyles, {}),
+    /* @__PURE__ */ jsx(CtaBarStyles, {}),
+    spacer ? /* @__PURE__ */ jsx("div", { className: "sk-cta-bar-spacer", "data-breakpoint": breakpoint, "aria-hidden": "true" }) : null,
+    /* @__PURE__ */ jsxs(
+      "aside",
+      {
+        id,
+        "aria-label": label,
+        className: cx("sk-cta-bar", "sk-glass", className),
+        "data-sk-cta-bar": "",
+        "data-breakpoint": breakpoint,
+        "data-layout": layout,
+        "data-echo-clearance": echoClearance ? "" : void 0,
+        "data-hidden": showAfter ? "" : void 0,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            CtaBarBehavior,
+            {
+              showAfter,
+              hideOver: hideOverList,
+              hideWhileTyping,
+              compactOnScroll,
+              track
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function CtaBarAction(props) {
+  const { as, icon, variant = "primary", collapse, children, className, ...rest } = props;
+  const attrs = rest;
+  const Comp = as ?? (attrs.href ? "a" : "button");
+  const folds = collapse ?? (variant === "secondary" && icon != null);
+  return /* @__PURE__ */ jsxs(
+    Comp,
+    {
+      ...Comp === "button" && !("type" in attrs) ? { type: "button" } : null,
+      ...attrs,
+      className: cx("sk-cta-bar__action", className),
+      "data-variant": variant,
+      "data-collapse": folds ? "" : void 0,
+      children: [
+        icon != null ? /* @__PURE__ */ jsx("span", { className: "sk-cta-bar__icon", "aria-hidden": "true", children: icon }) : null,
+        /* @__PURE__ */ jsx("span", { className: "sk-cta-bar__label", children })
+      ]
+    }
+  );
+}
+
+export { CTA_BAR_BREAKPOINTS, CTA_BAR_SPACE, CtaBar, CtaBarAction, ECHO_CLEARANCE };

package/dist/chunk-LQJC5S2M.js

@@ -0,0 +1,236 @@
+import { OG_HEIGHT, OG_WIDTH, barTextColor, TITLE_MIN_PX, TITLE_MAX_PX } from './chunk-LE7ZOTHB.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/og/route-fit.ts
+var ROUTE_CARD = {
+  padX: 68,
+  gap: 48,
+  photoWidth: 430,
+  photoHeight: 470,
+  barHeight: 74,
+  /** Breathing room above and below the copy column. */
+  padY: 44,
+  kickerPx: 24,
+  kickerGap: 18,
+  subtitlePx: 30,
+  subtitleGap: 20,
+  subtitleLineHeight: 1.3,
+  titleLineHeight: 1.02
+};
+var UPPER_EM = 0.68;
+var NARROW_EM = 0.32;
+var SPACE_EM = 0.3;
+var BODY_EM = 0.52;
+var KICKER_EM = 0.72 + 6 / 24;
+var NARROW = /[IJ1.,:;'’!|()\-]/;
+function uppercaseWidth(text, px) {
+  let em = 0;
+  for (const ch of text.toUpperCase()) {
+    em += ch === " " ? SPACE_EM : NARROW.test(ch) ? NARROW_EM : UPPER_EM;
+  }
+  return em * px;
+}
+function wrappedLines(text, width, measure) {
+  let lines = 0;
+  for (const paragraph of text.split("\n")) {
+    const words = paragraph.split(/\s+/).filter(Boolean);
+    if (!words.length) {
+      lines++;
+      continue;
+    }
+    let current = "";
+    for (const word of words) {
+      if (measure(word) > width) return Infinity;
+      const next = current ? `${current} ${word}` : word;
+      if (current && measure(next) > width) {
+        lines++;
+        current = word;
+      } else {
+        current = next;
+      }
+    }
+    lines++;
+  }
+  return lines;
+}
+function columnWidth(photo) {
+  const inner = OG_WIDTH - ROUTE_CARD.padX * 2;
+  return photo ? inner - ROUTE_CARD.photoWidth - ROUTE_CARD.gap : inner;
+}
+function titleBudget(input, width) {
+  const c = ROUTE_CARD;
+  let height = OG_HEIGHT - (input.bar ? c.barHeight : 0) - c.padY * 2;
+  if (input.kicker) {
+    const lines = wrappedLines(input.kicker, width, (s) => s.length * KICKER_EM * c.kickerPx);
+    height -= Math.min(lines, 2) * c.kickerPx * 1.2 + c.kickerGap;
+  }
+  if (input.subtitle) {
+    const lines = wrappedLines(input.subtitle, width, (s) => s.length * BODY_EM * c.subtitlePx);
+    height -= Math.min(lines, 3) * c.subtitlePx * c.subtitleLineHeight + c.subtitleGap;
+  }
+  return height;
+}
+function largestFit(input, photo) {
+  const width = columnWidth(photo);
+  const budget = titleBudget(input, width);
+  for (let px = TITLE_MAX_PX; px >= TITLE_MIN_PX; px -= 2) {
+    const lines = wrappedLines(input.title, width, (s) => uppercaseWidth(s, px));
+    if (lines * px * ROUTE_CARD.titleLineHeight <= budget) return { px, budget };
+  }
+  return null;
+}
+function fitRouteTitle(input) {
+  if (input.photo) {
+    const withPhoto = largestFit(input, true);
+    if (withPhoto) {
+      return { titlePx: withPhoto.px, photo: true, titleMaxHeight: withPhoto.budget, fits: true };
+    }
+  }
+  const full = largestFit(input, false);
+  if (full) return { titlePx: full.px, photo: false, titleMaxHeight: full.budget, fits: true };
+  return {
+    titlePx: TITLE_MIN_PX,
+    photo: false,
+    titleMaxHeight: titleBudget(input, columnWidth(false)),
+    fits: false
+  };
+}
+var size = { width: OG_WIDTH, height: OG_HEIGHT };
+var contentType = "image/png";
+function ogRouteElement(card) {
+  const { theme } = card;
+  const muted = theme.muted || theme.text;
+  const hasPhoto = !!card.photoUrl && /^(https?:|data:)/.test(card.photoUrl);
+  const fit = fitRouteTitle({
+    title: card.title,
+    kicker: card.kicker,
+    subtitle: card.subtitle,
+    photo: hasPhoto,
+    bar: !!card.bar
+  });
+  const titleLine = fit.titlePx * ROUTE_CARD.titleLineHeight;
+  const titleMaxHeight = Math.max(1, Math.floor(fit.titleMaxHeight / titleLine)) * titleLine;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: theme.bg,
+        color: theme.text,
+        fontSize: 32
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flex: 1,
+              alignItems: "center",
+              padding: `0 ${ROUTE_CARD.padX}px`,
+              gap: ROUTE_CARD.gap,
+              minHeight: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", flex: 1, minWidth: 0 }, children: [
+                card.kicker ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: ROUTE_CARD.kickerPx,
+                      letterSpacing: 6,
+                      textTransform: "uppercase",
+                      color: theme.accent,
+                      marginBottom: ROUTE_CARD.kickerGap,
+                      fontWeight: 700
+                    },
+                    children: card.kicker
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      display: "flex",
+                      fontSize: fit.titlePx,
+                      fontWeight: 800,
+                      lineHeight: ROUTE_CARD.titleLineHeight,
+                      textTransform: "uppercase",
+                      maxHeight: titleMaxHeight,
+                      overflow: "hidden"
+                    },
+                    children: card.title
+                  }
+                ),
+                card.subtitle ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    style: {
+                      fontSize: ROUTE_CARD.subtitlePx,
+                      marginTop: ROUTE_CARD.subtitleGap,
+                      color: muted,
+                      lineHeight: ROUTE_CARD.subtitleLineHeight
+                    },
+                    children: card.subtitle
+                  }
+                ) : null
+              ] }),
+              hasPhoto && fit.photo ? /* @__PURE__ */ jsx(
+                "img",
+                {
+                  src: card.photoUrl,
+                  width: ROUTE_CARD.photoWidth,
+                  height: ROUTE_CARD.photoHeight,
+                  style: { borderRadius: 24, objectFit: "cover" }
+                }
+              ) : null
+            ]
+          }
+        ),
+        card.bar ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: ROUTE_CARD.barHeight,
+              backgroundColor: theme.accent,
+              color: barTextColor(theme),
+              fontSize: 30,
+              fontWeight: 800,
+              letterSpacing: 3,
+              textTransform: "uppercase"
+            },
+            children: card.bar
+          }
+        ) : null
+      ]
+    }
+  );
+}
+async function renderCard(card, options) {
+  if (!card) return new Response("Not found", { status: 404 });
+  const { ImageResponse } = await import('next/og');
+  return new ImageResponse(ogRouteElement(card), {
+    ...size,
+    ...options.fonts?.length ? { fonts: options.fonts } : {}
+  });
+}
+function createOgImage(resolve, options = {}) {
+  return async function Image(props) {
+    const params = await props.params;
+    const id = props.id === void 0 ? void 0 : await props.id;
+    return renderCard(await resolve(params, { id }), options);
+  };
+}
+function createOgImageRoute(resolve, options = {}) {
+  return async function GET(req, ctx) {
+    return renderCard(await resolve(req, ctx), options);
+  };
+}
+
+export { contentType, createOgImage, createOgImageRoute, ogRouteElement, size };