sanity-plugin-sgntech-interview 1.0.0

package/dist/render.d.ts

@@ -0,0 +1,382 @@
+/**
+ * Framework-side entry point: the React renderer for interviews. This entry
+ * imports neither `sanity` nor `@sanity/ui`, so it can be used in a Next.js,
+ * Remix or Astro app without pulling the Studio into the bundle.
+ *
+ * ```ts
+ * import {Interview, ensureInterviewStyles} from 'sanity-plugin-sgntech-interview/render'
+ * ```
+ *
+ * @packageDocumentation
+ */
+
+import { JSX } from "react";
+import type { ReactNode } from "react";
+
+/**
+ * Any object with an `_type` that is a string. Can hold any other properties.
+ * @public
+ */
+declare type ArbitraryTypedObject = TypedObject & {
+  [key: string]: any;
+};
+
+/**
+ * Who is asking: the block's own choice, otherwise the first speaker marked as
+ * an interviewer.
+ *
+ * @public
+ */
+export declare function askingSpeaker(
+  speakers: Speaker[] | undefined,
+  value: InterviewValue | undefined,
+): Speaker | undefined;
+
+/**
+ * Same as {@link interviewPortableTextComponents}, but for a custom type name
+ * or with fixed options — the speaker list and the recording URL, typically.
+ *
+ * @public
+ */
+export declare function createInterviewPortableTextComponents(
+  options?: RenderOptions & {
+    typeName?: string;
+    answer?: (value: InterviewValue) => React.ReactNode;
+  },
+): {
+  types: Record<
+    string,
+    (props: { value: InterviewValue }) => React.JSX.Element | null
+  >;
+};
+
+/**
+ * Adds {@link interviewStyles} to the document once.
+ *
+ * Only needed when the stylesheet is not already part of the site's own CSS.
+ *
+ * @public
+ */
+export declare function ensureInterviewStyles(): void;
+
+/**
+ * The speaker a block refers to, or the first interviewer when it asks for one
+ * without naming it.
+ *
+ * @public
+ */
+export declare function findSpeaker(
+  speakers: Speaker[] | undefined,
+  id: string | undefined,
+): Speaker | undefined;
+
+/**
+ * One question-and-answer pair.
+ *
+ * The answer's rich text is passed in as children, so the site keeps using its
+ * own Portable Text setup rather than a second one bundled here.
+ *
+ * @public
+ */
+export declare function Interview(props: InterviewProps): React.JSX.Element;
+
+/**
+ * Portable Text block renderer for the `interviewBlock` object type.
+ *
+ * The answer is rendered with `@portabletext/react` unless the site passes its
+ * own renderer through `answer`.
+ *
+ * @public
+ */
+export declare function InterviewBlock(props: {
+  value: InterviewValue;
+  options?: RenderOptions & {
+    answer?: (value: InterviewValue) => React.ReactNode;
+  };
+}): React.JSX.Element | null;
+
+/**
+ * Words the renderer prints, so a site can translate them.
+ *
+ * @public
+ */
+export declare interface InterviewLabels {
+  translated: string;
+  originalWording: string;
+}
+
+/**
+ * Drop-in `components` fragment for `@portabletext/react`.
+ *
+ * @public
+ */
+export declare const interviewPortableTextComponents: {
+  types: {
+    interviewBlock: ({ value }: { value: InterviewValue }) => JSX.Element;
+  };
+};
+
+/**
+ * Props for {@link Interview}.
+ *
+ * @public
+ */
+export declare interface InterviewProps {
+  value: InterviewValue;
+  /** The document's speaker list. */
+  speakers?: Speaker[];
+  /** Recording the timestamp points into; without it the time is plain text. */
+  source?: string;
+  labels?: Partial<InterviewLabels>;
+  /** Renders the answer's Portable Text. */
+  children?: ReactNode;
+  className?: string;
+}
+
+/**
+ * Structural CSS for an interview: the speaker column and the turns.
+ *
+ * No colours, no fonts. Every value worth changing is a custom property with
+ * its default at the point of use — a default declared on the block itself
+ * would beat the same variable set on an ancestor, so theming from a wrapper
+ * would silently do nothing.
+ *
+ * Set `--sgn-interview-layout: inline` on any ancestor to get the classic
+ * `NAME: text` form instead of two columns.
+ *
+ * @public
+ */
+export declare const interviewStyles =
+  "\n.sgn-interview {\n  margin: 0;\n  color: inherit;\n  font: inherit;\n}\n\n.sgn-interview__turn {\n  display: grid;\n  grid-template-columns: var(--sgn-interview-speaker-width, 7.5rem) minmax(0, 1fr);\n  gap: var(--sgn-interview-column-gap, 1.25rem);\n  align-items: baseline;\n}\n\n.sgn-interview__turn + .sgn-interview__turn {\n  margin-top: var(--sgn-interview-turn-gap, 0.75rem);\n}\n\n.sgn-interview__turn--answer + .sgn-interview__turn--question {\n  margin-top: var(--sgn-interview-pair-gap, 1.75rem);\n}\n\n.sgn-interview__speaker {\n  margin: 0;\n  font-size: var(--sgn-interview-speaker-size, 0.8125em);\n  font-weight: var(--sgn-interview-speaker-weight, 600);\n  letter-spacing: var(--sgn-interview-speaker-tracking, 0.06em);\n  text-transform: var(--sgn-interview-speaker-transform, uppercase);\n  opacity: var(--sgn-interview-speaker-opacity, 0.72);\n  overflow-wrap: break-word;\n}\n\n.sgn-interview__role {\n  display: block;\n  font-weight: 400;\n  text-transform: none;\n  letter-spacing: normal;\n  opacity: 0.75;\n}\n\n.sgn-interview__text {\n  margin: 0;\n}\n\n.sgn-interview__text > p {\n  margin: 0;\n}\n\n.sgn-interview__text > p + p {\n  margin-top: var(--sgn-interview-paragraph-gap, 0.75em);\n}\n\n.sgn-interview__turn--question .sgn-interview__text {\n  font-weight: var(--sgn-interview-question-weight, 600);\n}\n\n.sgn-interview__meta {\n  margin: var(--sgn-interview-meta-gap, 0.35rem) 0 0;\n  font-size: var(--sgn-interview-meta-size, 0.8125em);\n  opacity: var(--sgn-interview-meta-opacity, 0.65);\n}\n\n.sgn-interview__meta > * + *::before {\n  content: ' \u00B7 ';\n}\n\n.sgn-interview__original {\n  margin: var(--sgn-interview-meta-gap, 0.35rem) 0 0;\n  font-size: var(--sgn-interview-meta-size, 0.8125em);\n  font-style: italic;\n  opacity: var(--sgn-interview-meta-opacity, 0.65);\n}\n\n/* One column once the speaker column would squeeze the text, and whenever the\n   inline layout is asked for. */\n@container (max-width: 30rem) {\n  .sgn-interview__turn {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--sgn-interview-stacked-gap, 0.2rem);\n  }\n}\n\n@media (max-width: 30rem) {\n  .sgn-interview__turn {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--sgn-interview-stacked-gap, 0.2rem);\n  }\n}\n";
+
+/**
+ * One question and its answer.
+ *
+ * @public
+ */
+export declare interface InterviewValue {
+  _key?: string;
+  _type?: string;
+  question?: string;
+  answer?: PortableTextBlock[];
+  /** Who is answering; matches {@link Speaker.id}. */
+  speaker?: string;
+  /** Who is asking, when it is not the document's default interviewer. */
+  askedBy?: string;
+  /** `12:34` or `1:02:33`, pointing into the recording. */
+  timestamp?: string;
+  /** Set when the answer was translated rather than quoted verbatim. */
+  translated?: boolean;
+  /** The answer as it was actually said. */
+  originalAnswer?: string;
+}
+
+/**
+ * A Portable Text Block can be thought of as one paragraph, quote or list item.
+ * In other words, it is a container for text, that can have a visual style associated with it.
+ * The actual text value is stored in portable text spans inside of the `childen` array.
+ *
+ * @typeParam M - Mark types that be used for text spans
+ * @typeParam C - Types allowed as children of this block
+ * @typeParam S - Allowed block styles (eg `normal`, `blockquote`, `h3` etc)
+ * @typeParam L - Allowed list item types (eg `number`, `bullet` etc)
+ * @public
+ */
+declare interface PortableTextBlock<
+  M extends PortableTextMarkDefinition = PortableTextMarkDefinition,
+  C extends TypedObject = ArbitraryTypedObject | PortableTextSpan,
+  S extends string = PortableTextBlockStyle,
+  L extends string = PortableTextListItemType,
+> extends TypedObject {
+  /**
+   * Type name identifying this as a portable text block.
+   * All items within a portable text array should have a `_type` property.
+   *
+   * Usually 'block', but can be customized to other values
+   */
+  _type: "block" | (string & {});
+  /**
+   * A key that identifies this block uniquely within the parent array. Used to more easily address
+   * the block when editing collaboratively, but is also very useful for keys inside of React and
+   * other rendering frameworks that can use keys to optimize operations.
+   */
+  _key?: string;
+  /**
+   * Array of inline items for this block. Usually contain text spans, but can be
+   * configured to include inline objects of other types as well.
+   */
+  children: C[];
+  /**
+   * Array of mark definitions used in child text spans. By having them be on the block level,
+   * the same mark definition can be reused for multiple text spans, which is often the case
+   * with nested marks.
+   */
+  markDefs?: M[];
+  /**
+   * Visual style of the block
+   * Common values: 'normal', 'blockquote', 'h1'...'h6'
+   */
+  style?: S;
+  /**
+   * If this block is a list item, identifies which style of list item this is
+   * Common values: 'bullet', 'number', but can be configured
+   */
+  listItem?: L;
+  /**
+   * If this block is a list item, identifies which level of nesting it belongs within
+   */
+  level?: number;
+}
+
+/**
+ * A set of _common_ (but not required/standarized) block styles
+ * @public
+ */
+declare type PortableTextBlockStyle =
+  | "normal"
+  | "blockquote"
+  | "h1"
+  | "h2"
+  | "h3"
+  | "h4"
+  | "h5"
+  | "h6"
+  | (string & {});
+
+/**
+ * A set of _common_ (but not required/standardized) list item types
+ * @public
+ */
+declare type PortableTextListItemType = "bullet" | "number" | (string & {});
+
+/**
+ * A mark definition holds information for marked text. For instance, a text span could reference
+ * a mark definition for a hyperlink, a geoposition, a reference to a document or anything that is
+ * representable as a JSON object.
+ * @public
+ */
+declare interface PortableTextMarkDefinition {
+  /**
+   * Unknown properties
+   */
+  [key: string]: unknown;
+  /**
+   * Identifies the type of mark this is, and is used to pick the correct React components to use
+   * when rendering a text span marked with this mark type.
+   */
+  _type: string;
+  /**
+   * Uniquely identifies this mark definition within the block
+   */
+  _key: string;
+}
+
+/**
+ * A Portable Text Span holds a chunk of the actual text value of a Portable Text Block
+ * @public
+ */
+declare interface PortableTextSpan {
+  /**
+   * Type is always `span` for portable text spans, as these don't vary in shape
+   */
+  _type: "span";
+  /**
+   * Unique (within parent block) key for this portable text span
+   */
+  _key?: string;
+  /**
+   * The actual text value of this text span
+   */
+  text: string;
+  /**
+   * An array of marks this text span is annotated with, identified by its `_key`.
+   * If the key cannot be found in the parent blocks mark definition, the mark is assumed to be a
+   * decorator (a simpler mark without any properties - for instance `strong` or `em`)
+   */
+  marks?: string[];
+}
+
+declare type RenderOptions = Omit<InterviewProps, "value" | "children">;
+
+/**
+ * Someone taking part in the interview, defined once on the document.
+ *
+ * @public
+ */
+export declare interface Speaker {
+  _key?: string;
+  /** Short id the blocks refer to, e.g. `till`. */
+  id?: string;
+  name?: string;
+  /** Shown under the name, e.g. `Guitarist` or `Editor`. */
+  role?: string;
+  /** Marks who is asking, so a renderer can style questions differently. */
+  interviewer?: boolean;
+  /** Set when the speaker is a reference to a person document. */
+  person?: {
+    _ref?: string;
+    _type?: string;
+  };
+}
+
+/**
+ * What to print for a speaker, falling back through name, id and a dash so a
+ * half-filled interview still renders.
+ *
+ * @public
+ */
+export declare function speakerLabel(
+  speaker: Speaker | undefined,
+  fallback?: string,
+): string;
+
+/**
+ * Turns `12:34` or `1:02:33` into seconds, for links into a recording.
+ *
+ * Returns `undefined` for anything it cannot read, so a typo becomes a plain
+ * label rather than a link to second zero.
+ *
+ * @public
+ */
+export declare function timestampSeconds(
+  input: string | undefined,
+): number | undefined;
+
+/**
+ * Adds a start time to a media URL, in the form each service expects.
+ *
+ * @public
+ */
+export declare function timestampUrl(
+  source: string | undefined,
+  seconds: number | undefined,
+): string | undefined;
+
+/**
+ * Any object with an `_type` property (which is required in portable text arrays),
+ * as well as a _potential_ `_key` (highly encouraged)
+ * @public
+ */
+declare interface TypedObject {
+  /**
+   * Identifies the type of object/span this is, and is used to pick the correct React components
+   * to use when rendering a span or inline object with this type.
+   */
+  _type: string;
+  /**
+   * Uniquely identifies this object within its parent block.
+   * Not _required_, but highly encouraged.
+   */
+  _key?: string;
+}
+
+/**
+ * Speakers that can actually be offered in a picker.
+ *
+ * @public
+ */
+export declare function usableSpeakers(
+  speakers: Speaker[] | undefined,
+): Speaker[];
+
+export {};

package/dist/render.js

@@ -0,0 +1,165 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { findSpeaker, askingSpeaker, timestampSeconds, timestampUrl, speakerLabel } from "./_chunks-es/speakers.js";
+import { usableSpeakers } from "./_chunks-es/speakers.js";
+import { PortableText } from "@portabletext/react";
+const DEFAULT_LABELS = {
+  translated: "Translated",
+  originalWording: "Originally"
+};
+function Turn(props) {
+  const { kind, speaker, children, meta } = props;
+  return /* @__PURE__ */ jsxs("div", { className: `sgn-interview__turn sgn-interview__turn--${kind}`, children: [
+    /* @__PURE__ */ jsxs("p", { className: "sgn-interview__speaker", children: [
+      speakerLabel(speaker),
+      speaker?.role && /* @__PURE__ */ jsx("span", { className: "sgn-interview__role", children: speaker.role })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "sgn-interview__text", children: [
+      children,
+      meta
+    ] })
+  ] });
+}
+function Interview(props) {
+  const { value, speakers, source, labels, children, className } = props, words = { ...DEFAULT_LABELS, ...labels }, answering = findSpeaker(speakers, value.speaker), asking = askingSpeaker(speakers, value), seconds = timestampSeconds(value.timestamp), link = timestampUrl(source, seconds), meta = value.timestamp || value.translated ? /* @__PURE__ */ jsxs("p", { className: "sgn-interview__meta", children: [
+    value.timestamp && /* @__PURE__ */ jsx("span", { children: link && seconds !== void 0 ? /* @__PURE__ */ jsx("a", { href: link, children: value.timestamp }) : value.timestamp }),
+    value.translated && /* @__PURE__ */ jsx("span", { children: words.translated })
+  ] }) : void 0;
+  return /* @__PURE__ */ jsxs("div", { className: ["sgn-interview", className].filter(Boolean).join(" "), children: [
+    value.question && /* @__PURE__ */ jsx(Turn, { kind: "question", speaker: asking, children: /* @__PURE__ */ jsx("p", { children: value.question }) }),
+    /* @__PURE__ */ jsxs(Turn, { kind: "answer", speaker: answering, meta, children: [
+      children,
+      value.translated && value.originalAnswer && /* @__PURE__ */ jsxs("p", { className: "sgn-interview__original", children: [
+        words.originalWording,
+        ": \u201C",
+        value.originalAnswer,
+        "\u201D"
+      ] })
+    ] })
+  ] });
+}
+function InterviewBlock(props) {
+  const { value, options } = props, { answer, ...rest } = options || {};
+  return /* @__PURE__ */ jsx(Interview, { value, ...rest, children: answer ? answer(value) : /* @__PURE__ */ jsx(PortableText, { value: value.answer ?? [] }) });
+}
+const interviewPortableTextComponents = {
+  types: {
+    interviewBlock: ({ value }) => /* @__PURE__ */ jsx(InterviewBlock, { value })
+  }
+};
+function createInterviewPortableTextComponents(options) {
+  const { typeName = "interviewBlock", ...rest } = options || {};
+  return {
+    types: {
+      [typeName]: ({ value }) => /* @__PURE__ */ jsx(InterviewBlock, { value, options: rest })
+    }
+  };
+}
+const interviewStyles = `
+.sgn-interview {
+  margin: 0;
+  color: inherit;
+  font: inherit;
+}
+
+.sgn-interview__turn {
+  display: grid;
+  grid-template-columns: var(--sgn-interview-speaker-width, 7.5rem) minmax(0, 1fr);
+  gap: var(--sgn-interview-column-gap, 1.25rem);
+  align-items: baseline;
+}
+
+.sgn-interview__turn + .sgn-interview__turn {
+  margin-top: var(--sgn-interview-turn-gap, 0.75rem);
+}
+
+.sgn-interview__turn--answer + .sgn-interview__turn--question {
+  margin-top: var(--sgn-interview-pair-gap, 1.75rem);
+}
+
+.sgn-interview__speaker {
+  margin: 0;
+  font-size: var(--sgn-interview-speaker-size, 0.8125em);
+  font-weight: var(--sgn-interview-speaker-weight, 600);
+  letter-spacing: var(--sgn-interview-speaker-tracking, 0.06em);
+  text-transform: var(--sgn-interview-speaker-transform, uppercase);
+  opacity: var(--sgn-interview-speaker-opacity, 0.72);
+  overflow-wrap: break-word;
+}
+
+.sgn-interview__role {
+  display: block;
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: normal;
+  opacity: 0.75;
+}
+
+.sgn-interview__text {
+  margin: 0;
+}
+
+.sgn-interview__text > p {
+  margin: 0;
+}
+
+.sgn-interview__text > p + p {
+  margin-top: var(--sgn-interview-paragraph-gap, 0.75em);
+}
+
+.sgn-interview__turn--question .sgn-interview__text {
+  font-weight: var(--sgn-interview-question-weight, 600);
+}
+
+.sgn-interview__meta {
+  margin: var(--sgn-interview-meta-gap, 0.35rem) 0 0;
+  font-size: var(--sgn-interview-meta-size, 0.8125em);
+  opacity: var(--sgn-interview-meta-opacity, 0.65);
+}
+
+.sgn-interview__meta > * + *::before {
+  content: ' \xB7 ';
+}
+
+.sgn-interview__original {
+  margin: var(--sgn-interview-meta-gap, 0.35rem) 0 0;
+  font-size: var(--sgn-interview-meta-size, 0.8125em);
+  font-style: italic;
+  opacity: var(--sgn-interview-meta-opacity, 0.65);
+}
+
+/* One column once the speaker column would squeeze the text, and whenever the
+   inline layout is asked for. */
+@container (max-width: 30rem) {
+  .sgn-interview__turn {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--sgn-interview-stacked-gap, 0.2rem);
+  }
+}
+
+@media (max-width: 30rem) {
+  .sgn-interview__turn {
+    grid-template-columns: minmax(0, 1fr);
+    gap: var(--sgn-interview-stacked-gap, 0.2rem);
+  }
+}
+`, STYLE_ID = "sgn-interview-styles";
+function ensureInterviewStyles() {
+  if (typeof document > "u" || document.getElementById(STYLE_ID)) return;
+  const element = document.createElement("style");
+  element.id = STYLE_ID, element.textContent = interviewStyles, document.head.appendChild(element);
+}
+export {
+  Interview,
+  InterviewBlock,
+  askingSpeaker,
+  createInterviewPortableTextComponents,
+  ensureInterviewStyles,
+  findSpeaker,
+  interviewPortableTextComponents,
+  interviewStyles,
+  speakerLabel,
+  timestampSeconds,
+  timestampUrl,
+  usableSpeakers
+};
+//# sourceMappingURL=render.js.map

package/dist/render.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.js","sources":["../src/render/Interview.tsx","../src/render/portableText.tsx","../src/render/styles.ts"],"sourcesContent":["import type {ReactNode} from 'react'\n\nimport {askingSpeaker, findSpeaker, speakerLabel, timestampSeconds, timestampUrl} from '../lib/speakers'\nimport type {InterviewValue, Speaker} from '../lib/types'\n\n/**\n * Words the renderer prints, so a site can translate them.\n *\n * @public\n */\nexport interface InterviewLabels {\n  translated: string\n  originalWording: string\n}\n\nconst DEFAULT_LABELS: InterviewLabels = {\n  translated: 'Translated',\n  originalWording: 'Originally',\n}\n\n/**\n * Props for {@link Interview}.\n *\n * @public\n */\nexport interface InterviewProps {\n  value: InterviewValue\n  /** The document's speaker list. */\n  speakers?: Speaker[]\n  /** Recording the timestamp points into; without it the time is plain text. */\n  source?: string\n  labels?: Partial<InterviewLabels>\n  /** Renders the answer's Portable Text. */\n  children?: ReactNode\n  className?: string\n}\n\nfunction Turn(props: {\n  kind: 'question' | 'answer'\n  speaker: Speaker | undefined\n  children: ReactNode\n  meta?: ReactNode\n}): React.JSX.Element {\n  const {kind, speaker, children, meta} = props\n\n  return (\n    <div className={`sgn-interview__turn sgn-interview__turn--${kind}`}>\n      <p className=\"sgn-interview__speaker\">\n        {speakerLabel(speaker)}\n        {speaker?.role && <span className=\"sgn-interview__role\">{speaker.role}</span>}\n      </p>\n      <div className=\"sgn-interview__text\">\n        {children}\n        {meta}\n      </div>\n    </div>\n  )\n}\n\n/**\n * One question-and-answer pair.\n *\n * The answer's rich text is passed in as children, so the site keeps using its\n * own Portable Text setup rather than a second one bundled here.\n *\n * @public\n */\nexport function Interview(props: InterviewProps): React.JSX.Element {\n  const {value, speakers, source, labels, children, className} = props\n  const words = {...DEFAULT_LABELS, ...labels}\n\n  const answering = findSpeaker(speakers, value.speaker)\n  const asking = askingSpeaker(speakers, value)\n  const seconds = timestampSeconds(value.timestamp)\n  const link = timestampUrl(source, seconds)\n\n  const meta =\n    value.timestamp || value.translated ? (\n      <p className=\"sgn-interview__meta\">\n        {value.timestamp && (\n          <span>\n            {link && seconds !== undefined ? <a href={link}>{value.timestamp}</a> : value.timestamp}\n          </span>\n        )}\n        {value.translated && <span>{words.translated}</span>}\n      </p>\n    ) : undefined\n\n  return (\n    <div className={['sgn-interview', className].filter(Boolean).join(' ')}>\n      {value.question && (\n        <Turn kind=\"question\" speaker={asking}>\n          <p>{value.question}</p>\n        </Turn>\n      )}\n\n      <Turn kind=\"answer\" speaker={answering} meta={meta}>\n        {children}\n        {value.translated && value.originalAnswer && (\n          <p className=\"sgn-interview__original\">\n            {words.originalWording}: “{value.originalAnswer}”\n          </p>\n        )}\n      </Turn>\n    </div>\n  )\n}\n","import {PortableText} from '@portabletext/react'\n\nimport type {InterviewValue} from '../lib/types'\nimport {Interview, type InterviewProps} from './Interview'\n\ntype RenderOptions = Omit<InterviewProps, 'value' | 'children'>\n\n/**\n * Portable Text block renderer for the `interviewBlock` object type.\n *\n * The answer is rendered with `@portabletext/react` unless the site passes its\n * own renderer through `answer`.\n *\n * @public\n */\nexport function InterviewBlock(props: {\n  value: InterviewValue\n  options?: RenderOptions & {answer?: (value: InterviewValue) => React.ReactNode}\n}): React.JSX.Element | null {\n  const {value, options} = props\n  const {answer, ...rest} = options || {}\n\n  return (\n    <Interview value={value} {...rest}>\n      {answer ? answer(value) : <PortableText value={value.answer ?? []} />}\n    </Interview>\n  )\n}\n\n/**\n * Drop-in `components` fragment for `@portabletext/react`.\n *\n * @public\n */\nexport const interviewPortableTextComponents = {\n  types: {\n    interviewBlock: ({value}: {value: InterviewValue}) => <InterviewBlock value={value} />,\n  },\n}\n\n/**\n * Same as {@link interviewPortableTextComponents}, but for a custom type name\n * or with fixed options — the speaker list and the recording URL, typically.\n *\n * @public\n */\nexport function createInterviewPortableTextComponents(\n  options?: RenderOptions & {\n    typeName?: string\n    answer?: (value: InterviewValue) => React.ReactNode\n  },\n): {types: Record<string, (props: {value: InterviewValue}) => React.JSX.Element | null>} {\n  const {typeName = 'interviewBlock', ...rest} = options || {}\n\n  return {\n    types: {\n      [typeName]: ({value}: {value: InterviewValue}) => (\n        <InterviewBlock value={value} options={rest} />\n      ),\n    },\n  }\n}\n","/**\n * Structural CSS for an interview: the speaker column and the turns.\n *\n * No colours, no fonts. Every value worth changing is a custom property with\n * its default at the point of use — a default declared on the block itself\n * would beat the same variable set on an ancestor, so theming from a wrapper\n * would silently do nothing.\n *\n * Set `--sgn-interview-layout: inline` on any ancestor to get the classic\n * `NAME: text` form instead of two columns.\n *\n * @public\n */\nexport const interviewStyles = `\n.sgn-interview {\n  margin: 0;\n  color: inherit;\n  font: inherit;\n}\n\n.sgn-interview__turn {\n  display: grid;\n  grid-template-columns: var(--sgn-interview-speaker-width, 7.5rem) minmax(0, 1fr);\n  gap: var(--sgn-interview-column-gap, 1.25rem);\n  align-items: baseline;\n}\n\n.sgn-interview__turn + .sgn-interview__turn {\n  margin-top: var(--sgn-interview-turn-gap, 0.75rem);\n}\n\n.sgn-interview__turn--answer + .sgn-interview__turn--question {\n  margin-top: var(--sgn-interview-pair-gap, 1.75rem);\n}\n\n.sgn-interview__speaker {\n  margin: 0;\n  font-size: var(--sgn-interview-speaker-size, 0.8125em);\n  font-weight: var(--sgn-interview-speaker-weight, 600);\n  letter-spacing: var(--sgn-interview-speaker-tracking, 0.06em);\n  text-transform: var(--sgn-interview-speaker-transform, uppercase);\n  opacity: var(--sgn-interview-speaker-opacity, 0.72);\n  overflow-wrap: break-word;\n}\n\n.sgn-interview__role {\n  display: block;\n  font-weight: 400;\n  text-transform: none;\n  letter-spacing: normal;\n  opacity: 0.75;\n}\n\n.sgn-interview__text {\n  margin: 0;\n}\n\n.sgn-interview__text > p {\n  margin: 0;\n}\n\n.sgn-interview__text > p + p {\n  margin-top: var(--sgn-interview-paragraph-gap, 0.75em);\n}\n\n.sgn-interview__turn--question .sgn-interview__text {\n  font-weight: var(--sgn-interview-question-weight, 600);\n}\n\n.sgn-interview__meta {\n  margin: var(--sgn-interview-meta-gap, 0.35rem) 0 0;\n  font-size: var(--sgn-interview-meta-size, 0.8125em);\n  opacity: var(--sgn-interview-meta-opacity, 0.65);\n}\n\n.sgn-interview__meta > * + *::before {\n  content: ' · ';\n}\n\n.sgn-interview__original {\n  margin: var(--sgn-interview-meta-gap, 0.35rem) 0 0;\n  font-size: var(--sgn-interview-meta-size, 0.8125em);\n  font-style: italic;\n  opacity: var(--sgn-interview-meta-opacity, 0.65);\n}\n\n/* One column once the speaker column would squeeze the text, and whenever the\n   inline layout is asked for. */\n@container (max-width: 30rem) {\n  .sgn-interview__turn {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--sgn-interview-stacked-gap, 0.2rem);\n  }\n}\n\n@media (max-width: 30rem) {\n  .sgn-interview__turn {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--sgn-interview-stacked-gap, 0.2rem);\n  }\n}\n`\n\nconst STYLE_ID = 'sgn-interview-styles'\n\n/**\n * Adds {@link interviewStyles} to the document once.\n *\n * Only needed when the stylesheet is not already part of the site's own CSS.\n *\n * @public\n */\nexport function ensureInterviewStyles(): void {\n  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return\n\n  const element = document.createElement('style')\n  element.id = STYLE_ID\n  element.textContent = interviewStyles\n  document.head.appendChild(element)\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,97 @@
+{
+  "name": "sanity-plugin-sgntech-interview",
+  "version": "1.0.0",
+  "description": "Interview blocks for Sanity Studio — question and answer pairs with speakers, timestamps and a note when an answer was translated.",
+  "keywords": [
+    "sanity",
+    "sanity-plugin",
+    "interview",
+    "portable-text",
+    "editorial",
+    "qa"
+  ],
+  "homepage": "https://github.com/netz-sg/sanity-plugin-sgntech-interview#readme",
+  "bugs": {
+    "url": "https://github.com/netz-sg/sanity-plugin-sgntech-interview/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/netz-sg/sanity-plugin-sgntech-interview.git"
+  },
+  "license": "MIT",
+  "author": "SGNTech <kontakt@lifad.world>",
+  "type": "module",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "default": "./dist/index.js"
+    },
+    "./render": {
+      "source": "./src/render.ts",
+      "default": "./dist/render.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "plugin-kit verify-package --silent && pkg-utils build --strict --check --clean",
+    "format": "oxfmt",
+    "link-watch": "plugin-kit link-watch",
+    "lint": "oxlint",
+    "prepublishOnly": "npm run build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "watch": "pkg-utils watch --strict"
+  },
+  "dependencies": {
+    "@sanity/icons": "^5.2.1"
+  },
+  "devDependencies": {
+    "@sanity/browserslist-config": "^1.0.5",
+    "@sanity/pkg-utils": "^11.0.17",
+    "@sanity/plugin-kit": "^10.0.3",
+    "@types/react": "^19.2.18",
+    "oxfmt": "^0.61.0",
+    "oxlint": "^1.77.0",
+    "oxlint-tsgolint": "^7.0.2001",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "sanity": "^6.9.0",
+    "styled-components": "^6.5.0",
+    "typescript": "^6.0.3",
+    "vitest": "^3.2.4",
+    "@portabletext/react": "^7.0.1",
+    "@portabletext/types": "^4.0.2"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19",
+    "sanity": "^5 || ^6.0.0-0",
+    "@portabletext/react": "^3 || ^4 || ^5 || ^6 || ^7"
+  },
+  "engines": {
+    "node": ">=20.19 <22 || >=22.12"
+  },
+  "browserslist": "extends @sanity/browserslist-config",
+  "publishConfig": {
+    "exports": {
+      ".": {
+        "default": "./dist/index.js"
+      },
+      "./render": {
+        "default": "./dist/render.js"
+      },
+      "./package.json": "./package.json"
+    }
+  },
+  "allowScripts": {
+    "esbuild@0.28.1": true
+  },
+  "peerDependenciesMeta": {
+    "@portabletext/react": {
+      "optional": true
+    }
+  }
+}