@cosmic-labs/renderers 0.1.0

package/dist/atlas.css

@@ -0,0 +1,279 @@
+.atlas-statcallout,
+.atlas-comparison {
+  color: var(--atlas-text, #1f2937);
+}
+
+.atlas-statcallout {
+  background: var(--atlas-surface, #ffffff);
+  border: 1px solid var(--atlas-border, #d1d5db);
+  border-radius: var(--atlas-radius, 0.75rem);
+  padding: clamp(1.25rem, 3vw, 2rem);
+}
+
+.atlas-statcallout__title {
+  color: var(--atlas-accent, #374151);
+  font-family: var(--atlas-font-display, ui-serif, Georgia, serif);
+  font-size: 0.875rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  margin: 0 0 1.25rem;
+  text-transform: uppercase;
+}
+
+.atlas-statcallout__grid {
+  display: grid;
+  gap: 1.25rem;
+  margin: 0;
+}
+
+.atlas-statcallout[data-count="2"] .atlas-statcallout__grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.atlas-statcallout[data-count="3"] .atlas-statcallout__grid,
+.atlas-statcallout[data-count="4"] .atlas-statcallout__grid {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.atlas-statcallout__item {
+  min-width: 0;
+}
+
+.atlas-statcallout__value,
+.atlas-statcallout__label {
+  margin: 0;
+}
+
+.atlas-statcallout__value {
+  color: var(--atlas-accent, #374151);
+  font-family: var(--atlas-font-display, ui-serif, Georgia, serif);
+  font-size: clamp(1.5rem, 3vw, 2.25rem);
+  font-weight: 700;
+  line-height: 1.1;
+}
+
+.atlas-statcallout__label {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  margin-top: 0.35rem;
+}
+
+.atlas-statcallout__detail,
+.atlas-statcallout__source {
+  color: var(--atlas-text-muted, #6b7280);
+  font-size: 0.875rem;
+}
+
+.atlas-statcallout__detail {
+  margin: 0.5rem 0 0;
+}
+
+.atlas-statcallout__source {
+  border-top: 1px solid var(--atlas-border, #d1d5db);
+  margin: 1.25rem 0 0;
+  padding-top: 1rem;
+}
+
+.atlas-statcallout__source-link {
+  color: var(--atlas-accent, #374151);
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+.atlas-comparison {
+  margin: 1.5rem 0;
+}
+
+.atlas-comparison__scroll {
+  border: 1px solid var(--atlas-border, #d1d5db);
+  border-radius: var(--atlas-radius, 0.75rem);
+  overflow-x: auto;
+}
+
+.atlas-comparison__table {
+  border-collapse: collapse;
+  min-width: 36rem;
+  width: 100%;
+}
+
+.atlas-comparison__caption {
+  caption-side: top;
+  color: var(--atlas-text, #1f2937);
+  font-family: var(--atlas-font-display, ui-serif, Georgia, serif);
+  font-size: 1.125rem;
+  font-weight: 700;
+  padding: 0 0 0.75rem;
+  text-align: left;
+}
+
+.atlas-comparison__col,
+.atlas-comparison__rowhead,
+.atlas-comparison__cell {
+  border-bottom: 1px solid var(--atlas-border, #d1d5db);
+  padding: 0.875rem 1rem;
+  text-align: left;
+}
+
+.atlas-comparison__col {
+  background: var(--atlas-surface, #ffffff);
+  color: var(--atlas-accent, #374151);
+  font-family: var(--atlas-font-display, ui-serif, Georgia, serif);
+}
+
+.atlas-comparison__rowhead {
+  color: var(--atlas-text, #1f2937);
+  font-weight: 600;
+}
+
+.atlas-comparison__cell {
+  color: var(--atlas-text-muted, #6b7280);
+}
+
+.atlas-comparison tbody tr:last-child .atlas-comparison__rowhead,
+.atlas-comparison tbody tr:last-child .atlas-comparison__cell {
+  border-bottom: 0;
+}
+
+.atlas-quote,
+.atlas-definition,
+.atlas-checklist,
+.atlas-image,
+.atlas-divider,
+.atlas-video {
+  color: var(--atlas-text, #1f2937);
+  margin: 1.5rem 0;
+}
+
+.atlas-quote {
+  border-inline-start: 0.25rem solid var(--atlas-accent, #374151);
+  padding-inline-start: 1.25rem;
+}
+
+.atlas-quote__text {
+  font-family: var(--atlas-font-display, ui-serif, Georgia, serif);
+  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
+  line-height: 1.45;
+  margin: 0;
+}
+
+.atlas-quote__attribution {
+  color: var(--atlas-text-muted, #6b7280);
+  font-size: 0.9375rem;
+  margin-top: 0.75rem;
+}
+
+.atlas-definition,
+.atlas-checklist {
+  background: var(--atlas-surface, #ffffff);
+  border: 1px solid var(--atlas-border, #d1d5db);
+  border-radius: var(--atlas-radius, 0.75rem);
+  padding: clamp(1.25rem, 3vw, 1.75rem);
+}
+
+.atlas-definition__term,
+.atlas-definition__body,
+.atlas-checklist__title,
+.atlas-checklist__items {
+  margin: 0;
+}
+
+.atlas-definition__term,
+.atlas-checklist__title {
+  color: var(--atlas-accent, #374151);
+  font-family: var(--atlas-font-display, ui-serif, Georgia, serif);
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+
+.atlas-definition__body {
+  line-height: 1.6;
+  margin-top: 0.5rem;
+}
+
+.atlas-checklist__items {
+  list-style: none;
+  padding: 0;
+}
+
+.atlas-checklist__title + .atlas-checklist__items {
+  margin-top: 0.875rem;
+}
+
+.atlas-checklist__item {
+  line-height: 1.5;
+  padding-inline-start: 1.75rem;
+  position: relative;
+}
+
+.atlas-checklist__item + .atlas-checklist__item {
+  margin-top: 0.625rem;
+}
+
+.atlas-checklist__item::before {
+  color: var(--atlas-accent, #374151);
+  content: '✓';
+  inset-inline-start: 0;
+  position: absolute;
+}
+
+.atlas-image {
+  margin-inline: 0;
+}
+
+.atlas-image__img {
+  border-radius: var(--atlas-radius, 0.75rem);
+  display: block;
+  height: auto;
+  max-width: 100%;
+}
+
+.atlas-image__caption,
+.atlas-image__credit,
+.atlas-video__caption {
+  color: var(--atlas-text-muted, #6b7280);
+  font-size: 0.875rem;
+}
+
+.atlas-image__caption,
+.atlas-video__caption {
+  margin-top: 0.625rem;
+}
+
+.atlas-image__credit::before {
+  content: ' · ';
+}
+
+.atlas-image[data-unresolved-image],
+.atlas-video[data-unresolved-video] {
+  border: 1px dashed var(--atlas-border, #d1d5db);
+  color: var(--atlas-text-muted, #6b7280);
+  padding: 1rem;
+}
+
+.atlas-divider {
+  background: var(--atlas-border, #d1d5db);
+  border: 0;
+  height: 1px;
+}
+
+.atlas-video__frame {
+  aspect-ratio: var(--atlas-media-aspect-ratio, 16 / 9);
+  background: var(--atlas-surface, #ffffff);
+  border-radius: var(--atlas-radius, 0.75rem);
+  overflow: hidden;
+}
+
+.atlas-video__frame iframe {
+  border: 0;
+  display: block;
+  height: 100%;
+  width: 100%;
+}
+
+@media (max-width: 40rem) {
+  .atlas-statcallout[data-count="2"] .atlas-statcallout__grid,
+  .atlas-statcallout[data-count="3"] .atlas-statcallout__grid,
+  .atlas-statcallout[data-count="4"] .atlas-statcallout__grid {
+    grid-template-columns: 1fr;
+  }
+}

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { ComponentType } from 'react';
+
+type PortableTextBlock = {
+    _type: string;
+    _key?: string;
+    [field: string]: unknown;
+};
+type PortableTextTypeComponent = ComponentType<{
+    value: unknown;
+}>;
+type PortableTextRendererProps = {
+    value: PortableTextBlock | PortableTextBlock[];
+    /** Throw instead of emitting a marker when an unsupported block reaches the renderer. */
+    strict?: boolean;
+    /** Site components replace Atlas defaults by block type (for example, image adapters). */
+    components?: {
+        types?: Record<string, PortableTextTypeComponent>;
+    };
+};
+/** Every Portable Text object type rendered by this package. */
+declare const capabilities: string[];
+/**
+ * Shared Portable Text renderer. Unsupported blocks never use the library
+ * fallback: they render an SSR-visible marker, or fail immediately in strict mode.
+ */
+declare function PortableTextRenderer({ value, strict, components: overrides }: PortableTextRendererProps): react.JSX.Element;
+
+export { PortableTextRenderer, type PortableTextRendererProps, capabilities };

package/dist/index.js

@@ -0,0 +1,233 @@
+// src/PortableTextRenderer.tsx
+import { PortableText } from "@portabletext/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var capabilities = [
+  "statCallout",
+  "comparisonTable",
+  "editorialQuote",
+  "definitionBox",
+  "checklistBox",
+  "captionedImage",
+  "botanicalDivider",
+  "videoEmbed"
+];
+function readString(value) {
+  return typeof value === "string" ? value : void 0;
+}
+function readRecord(value) {
+  return typeof value === "object" && value !== null ? value : void 0;
+}
+function readStatCallout(value) {
+  const block = readRecord(value);
+  if (!block) {
+    return { stats: [] };
+  }
+  return {
+    title: readString(block.title),
+    stats: Array.isArray(block.stats) ? block.stats.map((stat) => {
+      const item = readRecord(stat) ?? {};
+      return {
+        value: readString(item.value),
+        label: readString(item.label),
+        detail: readString(item.detail)
+      };
+    }) : [],
+    source: readRecord(block.source) ? {
+      label: readString(readRecord(block.source)?.label),
+      url: readString(readRecord(block.source)?.url)
+    } : void 0
+  };
+}
+function StatCallout({ value }) {
+  const callout = readStatCallout(value);
+  if (callout.stats.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("aside", { className: "atlas-statcallout", "data-block": "statCallout", "data-count": callout.stats.length, children: [
+    callout.title ? /* @__PURE__ */ jsx("p", { className: "atlas-statcallout__title", children: callout.title }) : null,
+    /* @__PURE__ */ jsx("dl", { className: "atlas-statcallout__grid", children: callout.stats.map((stat, index) => /* @__PURE__ */ jsxs("div", { className: "atlas-statcallout__item", children: [
+      /* @__PURE__ */ jsx("dd", { className: "atlas-statcallout__value", children: stat.value ?? "" }),
+      /* @__PURE__ */ jsx("dt", { className: "atlas-statcallout__label", children: stat.label ?? "" }),
+      stat.detail ? /* @__PURE__ */ jsx("p", { className: "atlas-statcallout__detail", children: stat.detail }) : null
+    ] }, index)) }),
+    callout.source?.label && callout.source.url ? /* @__PURE__ */ jsx("p", { className: "atlas-statcallout__source", children: /* @__PURE__ */ jsx("a", { className: "atlas-statcallout__source-link", href: callout.source.url, target: "_blank", rel: "noreferrer", children: callout.source.label }) }) : null
+  ] });
+}
+function readComparisonTable(value) {
+  const block = readRecord(value);
+  if (!block) {
+    return { columns: [], rows: [] };
+  }
+  return {
+    caption: readString(block.caption),
+    rowHeader: readString(block.rowHeader),
+    columns: Array.isArray(block.columns) ? block.columns.map(readString).filter((column) => column !== void 0) : [],
+    rows: Array.isArray(block.rows) ? block.rows.map((row) => {
+      const item = readRecord(row) ?? {};
+      return {
+        label: readString(item.label),
+        values: Array.isArray(item.values) ? item.values.map(readString).filter((itemValue) => itemValue !== void 0) : []
+      };
+    }) : []
+  };
+}
+function ComparisonTable({ value }) {
+  const comparison = readComparisonTable(value);
+  if (comparison.columns.length === 0 || comparison.rows.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("figure", { className: "atlas-comparison", "data-block": "comparisonTable", children: /* @__PURE__ */ jsx("div", { className: "atlas-comparison__scroll", children: /* @__PURE__ */ jsxs("table", { className: "atlas-comparison__table", children: [
+    comparison.caption ? /* @__PURE__ */ jsx("caption", { className: "atlas-comparison__caption", children: comparison.caption }) : null,
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { className: "atlas-comparison__col", scope: "col", children: comparison.rowHeader ?? "" }),
+      comparison.columns.map((column, index) => /* @__PURE__ */ jsx("th", { className: "atlas-comparison__col", scope: "col", children: column }, index))
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: comparison.rows.map((row, rowIndex) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { className: "atlas-comparison__rowhead", scope: "row", children: row.label ?? "" }),
+      comparison.columns.map((_, columnIndex) => /* @__PURE__ */ jsx("td", { className: "atlas-comparison__cell", children: row.values[columnIndex] ?? "" }, columnIndex))
+    ] }, rowIndex)) })
+  ] }) }) });
+}
+function readEditorialQuote(value) {
+  const block = readRecord(value) ?? {};
+  return { quote: readString(block.quote), attribution: readString(block.attribution) };
+}
+function EditorialQuote({ value }) {
+  const quote = readEditorialQuote(value);
+  return /* @__PURE__ */ jsxs("figure", { className: "atlas-quote", "data-block": "editorialQuote", children: [
+    /* @__PURE__ */ jsx("blockquote", { className: "atlas-quote__text", children: quote.quote ?? "" }),
+    quote.attribution ? /* @__PURE__ */ jsx("figcaption", { className: "atlas-quote__attribution", children: quote.attribution }) : null
+  ] });
+}
+function readDefinitionBox(value) {
+  const block = readRecord(value) ?? {};
+  return {
+    term: readString(block.term),
+    definition: readString(block.definition),
+    icon: readString(block.icon) ?? "olive"
+  };
+}
+function DefinitionBox({ value }) {
+  const definition = readDefinitionBox(value);
+  return /* @__PURE__ */ jsxs("aside", { className: "atlas-definition", "data-block": "definitionBox", "data-icon": definition.icon, children: [
+    /* @__PURE__ */ jsx("p", { className: "atlas-definition__term", children: definition.term ?? "" }),
+    /* @__PURE__ */ jsx("p", { className: "atlas-definition__body", children: definition.definition ?? "" })
+  ] });
+}
+function readChecklistBox(value) {
+  const block = readRecord(value) ?? {};
+  return {
+    title: readString(block.title),
+    items: Array.isArray(block.items) ? block.items.map(readString).filter((item) => item !== void 0) : []
+  };
+}
+function ChecklistBox({ value }) {
+  const checklist = readChecklistBox(value);
+  if (checklist.items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("aside", { className: "atlas-checklist", "data-block": "checklistBox", children: [
+    checklist.title ? /* @__PURE__ */ jsx("h3", { className: "atlas-checklist__title", children: checklist.title }) : null,
+    /* @__PURE__ */ jsx("ul", { className: "atlas-checklist__items", children: checklist.items.map((item, index) => /* @__PURE__ */ jsx("li", { className: "atlas-checklist__item", children: item }, index)) })
+  ] });
+}
+function readCaptionedImage(value) {
+  const block = readRecord(value) ?? {};
+  const image = readRecord(block.image);
+  const asset = readRecord(image?.asset);
+  return {
+    image: image ? {
+      alt: readString(image.alt),
+      url: readString(image.url),
+      asset: asset ? { url: readString(asset.url) } : void 0
+    } : void 0,
+    caption: readString(block.caption),
+    credit: readString(block.credit)
+  };
+}
+function CaptionedImage({ value }) {
+  const image = readCaptionedImage(value);
+  const url = image.image?.url ?? image.image?.asset?.url;
+  if (!url) {
+    return /* @__PURE__ */ jsx("figure", { className: "atlas-image", "data-block": "captionedImage", "data-unresolved-image": "captionedImage", role: "alert", children: "Unresolved captioned image" });
+  }
+  return /* @__PURE__ */ jsxs("figure", { className: "atlas-image", "data-block": "captionedImage", children: [
+    /* @__PURE__ */ jsx("img", { className: "atlas-image__img", src: url, alt: image.image?.alt ?? "" }),
+    image.caption || image.credit ? /* @__PURE__ */ jsxs("figcaption", { className: "atlas-image__caption", children: [
+      image.caption,
+      image.credit ? /* @__PURE__ */ jsx("span", { className: "atlas-image__credit", children: image.credit }) : null
+    ] }) : null
+  ] });
+}
+function BotanicalDivider() {
+  return /* @__PURE__ */ jsx("hr", { className: "atlas-divider", "data-block": "botanicalDivider", role: "separator" });
+}
+var youtubeUrlPattern = /^(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/(?:watch\?(?:[^#]*&)?v=|embed\/|shorts\/)|youtu\.be\/)([A-Za-z0-9_-]{11})(?:[?&#/].*)?$/i;
+function readVideoEmbed(value) {
+  const block = readRecord(value) ?? {};
+  return { url: readString(block.url), caption: readString(block.caption) };
+}
+function youtubeId(url) {
+  return url ? youtubeUrlPattern.exec(url)?.[1] : void 0;
+}
+function VideoEmbed({ value }) {
+  const video = readVideoEmbed(value);
+  const id = youtubeId(video.url);
+  if (!id) {
+    return /* @__PURE__ */ jsx("figure", { className: "atlas-video", "data-block": "videoEmbed", "data-unresolved-video": "videoEmbed", role: "alert", children: "Unresolved YouTube video" });
+  }
+  return /* @__PURE__ */ jsxs("figure", { className: "atlas-video", "data-block": "videoEmbed", children: [
+    /* @__PURE__ */ jsx("div", { className: "atlas-video__frame", children: /* @__PURE__ */ jsx(
+      "iframe",
+      {
+        src: `https://www.youtube-nocookie.com/embed/${id}`,
+        title: video.caption ? `Video: ${video.caption}` : "YouTube video",
+        loading: "lazy",
+        allowFullScreen: true
+      }
+    ) }),
+    video.caption ? /* @__PURE__ */ jsx("figcaption", { className: "atlas-video__caption", children: video.caption }) : null
+  ] });
+}
+function unknownBlockType(value) {
+  if (typeof value === "object" && value !== null && typeof value._type === "string") {
+    return value._type;
+  }
+  return "unknown";
+}
+var defaultTypeComponents = {
+  statCallout: StatCallout,
+  comparisonTable: ComparisonTable,
+  editorialQuote: EditorialQuote,
+  definitionBox: DefinitionBox,
+  checklistBox: ChecklistBox,
+  captionedImage: CaptionedImage,
+  botanicalDivider: BotanicalDivider,
+  videoEmbed: VideoEmbed
+};
+function PortableTextRenderer({ value, strict = false, components: overrides }) {
+  const components = {
+    types: { ...defaultTypeComponents, ...overrides?.types },
+    unknownType: ({ value: unknownValue }) => {
+      const type = unknownBlockType(unknownValue);
+      if (strict) {
+        throw new Error(`Unsupported Portable Text block type: ${type}`);
+      }
+      return /* @__PURE__ */ jsxs("span", { role: "alert", "data-unknown-block": type, children: [
+        "Unsupported Portable Text block: ",
+        type
+      ] });
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    PortableText,
+    {
+      value,
+      components
+    }
+  );
+}
+export {
+  PortableTextRenderer,
+  capabilities
+};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@cosmic-labs/renderers",
+  "version": "0.1.0",
+  "description": "Portable Text renderers shared by Cosmic Atlas sites.",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./dist/atlas.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "restricted"
+  },
+  "dependencies": {
+    "@cosmic-labs/content-contract": "0.1.0"
+  },
+  "peerDependencies": {
+    "@portabletext/react": "^3.2.0",
+    "react": "^18.2.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@portabletext/react": "^3.2.0",
+    "@types/react": "^19.0.3",
+    "@types/react-dom": "^19.0.2",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.2",
+    "vitest": "^3.0.0"
+  },
+  "engines": {
+    "node": ">=22.14"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean --target es2022 --external react --external react-dom --external @portabletext/react && cp src/styles/atlas.css dist/atlas.css",
+    "test": "vitest run --root ../.. --project renderers",
+    "lint": "tsc --noEmit"
+  }
+}