@bendyline/squisq-react 2.0.1 → 2.2.0

package/src/jsonView/viewers.tsx

@@ -1,343 +0,0 @@
-/**
- * Read-only viewer renderers for `<JsonView>`. Each viewer is a small
- * pure function that takes a value + schema slice and renders inline.
- * Group / card-stack viewers recurse into `RenderNode`.
- */
-
-import { Fragment, useMemo } from 'react';
-import {
-  arrayItemKind,
-  type ControlKind,
-  type SquisqAnnotatedSchema,
-} from '@bendyline/squisq/jsonForm';
-import { parseMarkdown } from '@bendyline/squisq/markdown';
-import { MarkdownRenderer } from '../MarkdownRenderer';
-import { RenderNode } from './RenderNode';
-
-export interface ViewerProps {
-  value: unknown;
-  schema: SquisqAnnotatedSchema;
-  rootSchema: SquisqAnnotatedSchema;
-  rootData: unknown;
-  pointer: string;
-  density: 'comfortable' | 'compact';
-}
-
-// ── Primitive viewers ──────────────────────────────────────────────
-
-export function TextViewer({ value }: ViewerProps) {
-  if (value === undefined || value === null || value === '') {
-    return <span className="squisq-jv-empty">—</span>;
-  }
-  return <span className="squisq-jv-value">{String(value)}</span>;
-}
-
-export function MultilineViewer({ value }: ViewerProps) {
-  if (value === undefined || value === null || value === '') {
-    return <span className="squisq-jv-empty">—</span>;
-  }
-  return <span className="squisq-jv-value squisq-jv-value--multiline">{String(value)}</span>;
-}
-
-export function RichTextViewer({ value }: ViewerProps) {
-  const nodes = useMemo(() => {
-    if (typeof value !== 'string' || value === '') return null;
-    try {
-      const doc = parseMarkdown(value);
-      return doc.children;
-    } catch {
-      return null;
-    }
-  }, [value]);
-  if (!nodes) return <span className="squisq-jv-empty">—</span>;
-  return (
-    <div className="squisq-jv-richtext">
-      <MarkdownRenderer nodes={nodes} />
-    </div>
-  );
-}
-
-export function NumberViewer({ value }: ViewerProps) {
-  if (value === undefined || value === null) {
-    return <span className="squisq-jv-empty">—</span>;
-  }
-  return <span className="squisq-jv-value">{String(value)}</span>;
-}
-
-export function BooleanViewer({ value }: ViewerProps) {
-  const on = Boolean(value);
-  return (
-    <span className={`squisq-jv-toggle squisq-jv-toggle--${on ? 'on' : 'off'}`}>
-      {on ? 'On' : 'Off'}
-    </span>
-  );
-}
-
-export function EnumViewer({ value, schema }: ViewerProps) {
-  if (value === undefined || value === null || value === '') {
-    return <span className="squisq-jv-empty">—</span>;
-  }
-  const labels = schema.squisq?.enumLabels;
-  const display = labels && typeof value === 'string' ? (labels[value] ?? value) : String(value);
-  return <span className="squisq-jv-value">{display}</span>;
-}
-
-export function ColorViewer({ value }: ViewerProps) {
-  if (typeof value !== 'string' || value === '') {
-    return <span className="squisq-jv-empty">—</span>;
-  }
-  return (
-    <span className="squisq-jv-color">
-      <span className="squisq-jv-color__swatch" style={{ background: value }} aria-hidden />
-      <span className="squisq-jv-color__hex">{value}</span>
-    </span>
-  );
-}
-
-export function DateViewer({ value, schema }: ViewerProps) {
-  if (typeof value !== 'string' || value === '') {
-    return <span className="squisq-jv-empty">—</span>;
-  }
-  const fmt = schema.format;
-  let display = value;
-  try {
-    const date = new Date(value);
-    if (!Number.isNaN(date.getTime())) {
-      if (fmt === 'time') {
-        display = date.toLocaleTimeString();
-      } else if (fmt === 'date') {
-        display = date.toLocaleDateString();
-      } else {
-        display = date.toLocaleString();
-      }
-    }
-  } catch {
-    /* fall through to raw value */
-  }
-  return <span className="squisq-jv-value">{display}</span>;
-}
-
-// ── Composite viewers ─────────────────────────────────────────────
-
-export function ChipBinViewer({ value, schema }: ViewerProps) {
-  if (!Array.isArray(value) || value.length === 0) {
-    return <span className="squisq-jv-empty">—</span>;
-  }
-  const itemSchema = Array.isArray(schema.items) ? schema.items[0] : schema.items;
-  const labels = itemSchema?.squisq?.enumLabels;
-  return (
-    <div className="squisq-jv-chip-bin">
-      {value.map((item, i) => {
-        const label =
-          labels && typeof item === 'string' ? (labels[item] ?? String(item)) : String(item);
-        return (
-          <span key={i} className="squisq-jv-chip">
-            {label}
-          </span>
-        );
-      })}
-    </div>
-  );
-}
-
-export function CardStackViewer(props: ViewerProps) {
-  const { value, schema, rootSchema, rootData, pointer, density } = props;
-  if (!Array.isArray(value) || value.length === 0) {
-    return <span className="squisq-jv-empty">No items</span>;
-  }
-  const itemSchema = (Array.isArray(schema.items) ? schema.items[0] : schema.items) ?? {};
-  const itemLabel = itemSchema.squisq?.itemLabel;
-  return (
-    <div className="squisq-jv-card-stack">
-      {value.map((item, i) => {
-        const title = resolveItemTitle(itemLabel, item, i);
-        return (
-          <div key={i} className="squisq-jv-card">
-            {title ? <h4 className="squisq-jv-card__title">{title}</h4> : null}
-            <RenderNode
-              value={item}
-              schema={itemSchema}
-              rootSchema={rootSchema}
-              rootData={rootData}
-              pointer={`${pointer}/${i}`}
-              density={density}
-              suppressTopGroupTitle
-            />
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-function resolveItemTitle(
-  spec: string | { fromField: string } | undefined,
-  item: unknown,
-  index: number,
-): string {
-  if (!spec) return `Item ${index + 1}`;
-  if (typeof spec === 'string') return spec;
-  if (item && typeof item === 'object') {
-    const v = (item as Record<string, unknown>)[spec.fromField];
-    if (typeof v === 'string' && v !== '') return v;
-    if (typeof v === 'number') return String(v);
-  }
-  return `Item ${index + 1}`;
-}
-
-export function GroupViewer(props: ViewerProps & { suppressTitle?: boolean }) {
-  const { value, schema, rootSchema, rootData, pointer, density, suppressTitle } = props;
-  const title = !suppressTitle ? (schema.squisq?.label ?? schema.title) : undefined;
-  const help = schema.squisq?.help ?? schema.description;
-  const obj = (value && typeof value === 'object' ? (value as Record<string, unknown>) : {}) ?? {};
-  const propEntries = Object.entries(schema.properties ?? {});
-
-  return (
-    <section className="squisq-jv-group">
-      {title ? <h3 className="squisq-jv-group__title">{title}</h3> : null}
-      {help ? <p className="squisq-jv-group__help">{help}</p> : null}
-      {propEntries.map(([key, propSchema]) => (
-        <Fragment key={key}>
-          <RowOrSection
-            label={propSchema.squisq?.label ?? propSchema.title ?? key}
-            help={propSchema.squisq?.help ?? propSchema.description}
-            kindHint={propSchema}
-          >
-            <RenderNode
-              value={obj[key]}
-              schema={propSchema}
-              rootSchema={rootSchema}
-              rootData={rootData}
-              pointer={`${pointer}/${key}`}
-              density={density}
-              suppressTopGroupTitle
-            />
-          </RowOrSection>
-        </Fragment>
-      ))}
-    </section>
-  );
-}
-
-/**
- * Decide whether to use the inline label/value Row layout, or to drop
- * the row chrome entirely (for nested groups, card-stacks, richtext —
- * which present their own headings).
- */
-function RowOrSection({
-  label,
-  help,
-  kindHint,
-  children,
-}: {
-  label: string;
-  help?: string;
-  kindHint: SquisqAnnotatedSchema;
-  children: React.ReactNode;
-}) {
-  const composite = isCompositeKind(kindHint);
-  if (composite) {
-    return <>{children}</>;
-  }
-  return (
-    <div className="squisq-jv-row">
-      <div className="squisq-jv-label" title={help}>
-        {label}
-      </div>
-      <div>{children}</div>
-    </div>
-  );
-}
-
-function isCompositeKind(schema: SquisqAnnotatedSchema): boolean {
-  const t = schema.type;
-  const arrayLike = t === 'array' || (Array.isArray(t) && t.includes('array'));
-  if (arrayLike) {
-    return arrayItemKind(schema) === 'object';
-  }
-  const objectLike = t === 'object' || (Array.isArray(t) && t.includes('object'));
-  if (objectLike) return true;
-  if (schema.oneOf || schema.anyOf) return true;
-  if (schema.format === 'markdown' || schema.squisq?.control === 'richtext') return true;
-  return false;
-}
-
-export function TabsViewer(props: ViewerProps) {
-  const { value, schema, rootSchema, rootData, pointer, density } = props;
-  const branches = (schema.oneOf ?? schema.anyOf ?? []).slice();
-  const matchedIndex = pickMatchingBranch(branches as SquisqAnnotatedSchema[], value);
-  const branch = branches[matchedIndex] as SquisqAnnotatedSchema | undefined;
-  if (!branch) {
-    return <TextViewer {...props} />;
-  }
-  return (
-    <div className="squisq-jv-tabs">
-      <span className="squisq-jv-tabs__discriminator">
-        {branch.squisq?.label ?? branch.title ?? `Option ${matchedIndex + 1}`}
-      </span>
-      <RenderNode
-        value={value}
-        schema={branch}
-        rootSchema={rootSchema}
-        rootData={rootData}
-        pointer={pointer}
-        density={density}
-      />
-    </div>
-  );
-}
-
-function pickMatchingBranch(branches: SquisqAnnotatedSchema[], value: unknown): number {
-  for (let i = 0; i < branches.length; i++) {
-    if (matchesShape(branches[i], value)) return i;
-  }
-  return 0;
-}
-
-function matchesShape(schema: SquisqAnnotatedSchema, value: unknown): boolean {
-  const t = schema.type;
-  const target = Array.isArray(t) ? t.find((x) => x !== 'null') : t;
-  if (!target) return true;
-  switch (target) {
-    case 'string':
-      return typeof value === 'string';
-    case 'number':
-    case 'integer':
-      return typeof value === 'number';
-    case 'boolean':
-      return typeof value === 'boolean';
-    case 'null':
-      return value === null;
-    case 'array':
-      return Array.isArray(value);
-    case 'object':
-      return value !== null && typeof value === 'object' && !Array.isArray(value);
-    default:
-      return false;
-  }
-}
-
-// ── Registry ──────────────────────────────────────────────────────
-
-// eslint-disable-next-line react-refresh/only-export-components
-export const VIEWERS: Record<ControlKind, React.ComponentType<ViewerProps>> = {
-  text: TextViewer,
-  multiline: MultilineViewer,
-  richtext: RichTextViewer,
-  color: ColorViewer,
-  date: DateViewer,
-  time: DateViewer,
-  datetime: DateViewer,
-  slider: NumberViewer,
-  stepper: NumberViewer,
-  segmented: EnumViewer,
-  radio: EnumViewer,
-  combobox: EnumViewer,
-  toggle: BooleanViewer,
-  checkbox: BooleanViewer,
-  card: GroupViewer,
-  group: GroupViewer,
-  'card-stack': CardStackViewer,
-  'chip-bin': ChipBinViewer,
-  tabs: TabsViewer,
-};

package/src/layers/ImageLayer.tsx

@@ -1,297 +0,0 @@
-/**
- * ImageLayer Component
- *
- * Renders an image layer within an SVG block. Supports Ken Burns and other
- * animations via CSS classes. Images are rendered using SVG <image> element
- * with proper aspect ratio handling.
- */
-
-import type { ImageLayer as ImageLayerType, Animation } from '@bendyline/squisq/schemas';
-import { cssFilterForTreatment } from '@bendyline/squisq/doc';
-import { getAnimationStyle } from '../utils/animationUtils';
-import { resolveValue, getAnchorOffset } from '../utils/layerUtils';
-import { useMediaUrl } from '../hooks/MediaContext';
-
-interface ImageLayerProps {
-  layer: ImageLayerType;
-  /** Base path for resolving relative image URLs */
-  basePath: string;
-  /** Viewport dimensions for percentage calculations */
-  viewport: { width: number; height: number };
-  /** Current time relative to block start (for animation timing) */
-  blockTime: number;
-  /** Whether authored and responsive image motion should run. */
-  animationsEnabled?: boolean;
-}
-
-export function ImageLayer({
-  layer,
-  basePath,
-  viewport,
-  blockTime,
-  animationsEnabled = true,
-}: ImageLayerProps) {
-  const { content, position, animation } = layer;
-
-  // Resolve position values to pixels
-  const x = resolveValue(position.x, viewport.width);
-  const y = resolveValue(position.y, viewport.height);
-  const width = position.width ? resolveValue(position.width, viewport.width) : viewport.width;
-  const height = position.height ? resolveValue(position.height, viewport.height) : viewport.height;
-
-  // Apply anchor offset
-  const offset = getAnchorOffset(position.anchor, width, height);
-  const finalX = x + offset.x;
-  const finalY = y + offset.y;
-
-  // Resolve image URL via MediaProvider (if available), falling back to basePath
-  const src = useMediaUrl(content.src, basePath);
-
-  // Get animation styles
-  const animStyle = getAnimationStyle(animation, blockTime);
-
-  // Theme-derived photographic grade + optional blur, as a CSS filter
-  // string (identical in the player and in headless frame capture).
-  const filter = cssFilterForTreatment(content.treatment, content.blur);
-
-  // SVG preserveAspectRatio based on fit mode
-  const preserveAspectRatio = getPreserveAspectRatio(content.fit);
-  const isCover = content.fit === 'cover';
-
-  // Detect spatial (transform-based) animations that need Ken Burns treatment.
-  // These animations should move the image *content* within fixed bounds rather
-  // than shifting the entire image container.
-  const isSpatialAnim = animation && SPATIAL_ANIMATION_TYPES.has(animation.type);
-
-  // Wide cover photos lose most of their composition when centered inside a
-  // portrait frame. For dominant imagery, scan the cover crop horizontally so
-  // the whole width is revealed over time. `object-position` only moves when
-  // the fitted image actually has horizontal overflow, so portrait sources stay
-  // visually still. This path deliberately avoids the extra Ken Burns scale:
-  // cover already scales the source by the minimum amount needed to fit one
-  // viewport dimension.
-  const usesPortraitPan =
-    isCover && shouldUsePortraitPan(viewport, width, height, animationsEnabled, animation);
-
-  if (usesPortraitPan) {
-    const panClass = getPortraitPanClass(animation);
-    const panStyle = getPortraitPanStyle(isSpatialAnim ? animation : undefined);
-    // Entrance/opacity animations can safely run on the fixed container while
-    // object-position pans the image. Spatial transforms are replaced by the
-    // pan so they cannot zoom an already aggressive portrait crop.
-    const containerAnim = isSpatialAnim ? { className: '', style: {} } : animStyle;
-
-    return (
-      <g
-        className={`block-layer block-layer--image ${containerAnim.className}`}
-        style={containerAnim.style}
-        data-layer-id={layer.id}
-        data-image-framing="portrait-pan"
-      >
-        <foreignObject x={finalX} y={finalY} width={width} height={height}>
-          <div
-            style={{
-              width: `${width}px`,
-              height: `${height}px`,
-              overflow: 'hidden',
-            }}
-          >
-            <img
-              src={src}
-              alt={content.alt || ''}
-              className={panClass}
-              style={{
-                width: `${width}px`,
-                height: `${height}px`,
-                objectFit: 'cover',
-                objectPosition: 'center',
-                display: 'block',
-                pointerEvents: 'none',
-                ...(filter ? { filter } : {}),
-                ...(content.blur && content.blur > 0 ? { transform: 'scale(1.06)' } : {}),
-                ...panStyle,
-              }}
-            />
-          </div>
-        </foreignObject>
-      </g>
-    );
-  }
-
-  // Ken Burns mode: cover image with spatial animation.
-  // Keep the container static, animate the inner <img> within clipped bounds.
-  if (isCover && isSpatialAnim && animation) {
-    const kbAnim = remapToKenBurns(animation);
-    const kbStyle = getAnimationStyle(kbAnim, blockTime);
-
-    return (
-      <g className="block-layer block-layer--image" data-layer-id={layer.id}>
-        <foreignObject x={finalX} y={finalY} width={width} height={height}>
-          <div
-            style={{
-              width: `${width}px`,
-              height: `${height}px`,
-              overflow: 'hidden',
-            }}
-          >
-            <img
-              src={src}
-              alt={content.alt || ''}
-              className={kbStyle.className}
-              style={{
-                width: `${width}px`,
-                height: `${height}px`,
-                objectFit: 'cover',
-                objectPosition: 'center',
-                display: 'block',
-                pointerEvents: 'none',
-                transformOrigin: 'center center',
-                ...(filter ? { filter } : {}),
-                ...kbStyle.style,
-              }}
-            />
-          </div>
-        </foreignObject>
-      </g>
-    );
-  }
-
-  // For cover mode, use foreignObject with CSS object-fit for more reliable coverage
-  // SVG's preserveAspectRatio can be inconsistent across browsers
-  if (isCover) {
-    return (
-      <g
-        className={`block-layer block-layer--image ${animStyle.className}`}
-        style={animStyle.style}
-        data-layer-id={layer.id}
-      >
-        <foreignObject x={finalX} y={finalY} width={width} height={height}>
-          <img
-            src={src}
-            alt={content.alt || ''}
-            style={{
-              width: `${width}px`,
-              height: `${height}px`,
-              objectFit: 'cover',
-              objectPosition: 'center',
-              display: 'block',
-              pointerEvents: 'none',
-              ...(filter ? { filter } : {}),
-              // Over-scan blurred imagery so the soft edges never reveal
-              // the frame behind the layer.
-              ...(content.blur && content.blur > 0 ? { transform: 'scale(1.06)' } : {}),
-            }}
-          />
-        </foreignObject>
-      </g>
-    );
-  }
-
-  // For contain/fill modes, use SVG image element
-  return (
-    <g
-      className={`block-layer block-layer--image ${animStyle.className}`}
-      style={animStyle.style}
-      data-layer-id={layer.id}
-    >
-      <image
-        href={src}
-        x={finalX}
-        y={finalY}
-        width={width}
-        height={height}
-        preserveAspectRatio={preserveAspectRatio}
-        style={{ pointerEvents: 'none', ...(filter ? { filter } : {}) }}
-      />
-    </g>
-  );
-}
-
-/**
- * Map fit mode to SVG preserveAspectRatio.
- */
-function getPreserveAspectRatio(fit?: 'cover' | 'contain' | 'fill'): string {
-  switch (fit) {
-    case 'cover':
-      return 'xMidYMid slice';
-    case 'fill':
-      return 'none';
-    case 'contain':
-    default:
-      return 'xMidYMid meet';
-  }
-}
-
-// ============================================
-// Ken Burns Helpers
-// ============================================
-
-/** Animation types that use CSS transforms (translate/scale). */
-const SPATIAL_ANIMATION_TYPES = new Set(['panLeft', 'panRight', 'slowZoom', 'zoomIn', 'zoomOut']);
-
-/** Portrait threshold matches useViewportOrientation's 0.83 aspect cutoff. */
-const PORTRAIT_ASPECT_CUTOFF = 0.83;
-
-/**
- * Only auto-pan images that act as the slide's dominant visual. This keeps
- * photo-grid tiles, thumbnails, and small authored insets from all moving at
- * once while covering the full-screen autogenerated layouts.
- */
-function shouldUsePortraitPan(
-  viewport: { width: number; height: number },
-  layerWidth: number,
-  layerHeight: number,
-  animationsEnabled: boolean,
-  animation: Animation | undefined,
-): boolean {
-  if (!animationsEnabled || animation?.type === 'none') return false;
-  if (viewport.width / viewport.height >= PORTRAIT_ASPECT_CUTOFF) return false;
-
-  return layerWidth >= viewport.width * 0.7 && layerHeight >= viewport.height * 0.7;
-}
-
-/**
- * `panLeft` means the image moves left (the framing scans toward its right
- * edge); `panRight` is the reverse. Unspecified motion defaults to revealing
- * the source from left to right.
- */
-function getPortraitPanClass(animation: Animation | undefined): string {
-  const pansBack =
-    animation?.type === 'panRight' ||
-    (animation?.type === 'slowZoom' && animation.panDirection === 'right');
-  return pansBack ? 'squisq-image--portrait-pan-left' : 'squisq-image--portrait-pan-right';
-}
-
-/** Use authored spatial timing when present, otherwise a slow ambient scan. */
-function getPortraitPanStyle(animation: Animation | undefined): Record<string, string> {
-  return {
-    '--portrait-pan-duration': `${animation?.duration ?? 12}s`,
-    '--portrait-pan-delay': `${animation?.delay ?? 0}s`,
-    '--portrait-pan-easing': animation?.easing ?? 'ease-in-out',
-  };
-}
-
-/**
- * Remap animation for Ken Burns inner-image rendering.
- *
- * Pure pan animations (panLeft/panRight) get remapped to combined slowZoom+pan
- * to maintain minimum scale and avoid revealing gaps at image edges.
- * zoomIn/zoomOut get remapped to slowZoom variants (no opacity change, which
- * is inappropriate for sustained ambient motion).
- */
-function remapToKenBurns(anim: Animation): Animation {
-  switch (anim.type) {
-    case 'panLeft':
-      return { ...anim, type: 'slowZoom', panDirection: 'left' };
-    case 'panRight':
-      return { ...anim, type: 'slowZoom', panDirection: 'right' };
-    case 'zoomIn':
-      return { ...anim, type: 'slowZoom', direction: 'in' };
-    case 'zoomOut':
-      return { ...anim, type: 'slowZoom', direction: 'out' };
-    default:
-      return anim; // slowZoom variants are already correct
-  }
-}
-
-export default ImageLayer;