@bendyline/squisq-react 1.2.0 → 1.3.0

package/src/__tests__/JsonView.test.tsx

@@ -0,0 +1,111 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import { JsonView } from '../jsonView';
+import type { SquisqAnnotatedSchema } from '@bendyline/squisq/jsonForm';
+
+describe('JsonView', () => {
+  it('renders an object schema as labeled rows', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: {
+        title: { type: 'string', title: 'Page Title' },
+        active: { type: 'boolean' },
+      },
+    };
+    const { container } = render(
+      <JsonView schema={schema} value={{ title: 'Hello', active: true }} />,
+    );
+    expect(container.textContent).toContain('Page Title');
+    expect(container.textContent).toContain('Hello');
+    expect(container.textContent).toContain('On');
+  });
+
+  it('renders an array of primitives as chips', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'array',
+      items: { type: 'string' },
+    };
+    const { container } = render(<JsonView schema={schema} value={['a', 'b', 'c']} />);
+    expect(container.querySelectorAll('.squisq-jv-chip')).toHaveLength(3);
+  });
+
+  it('renders an array of objects as cards with itemLabel.fromField', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          heading: { type: 'string' },
+          body: { type: 'string' },
+        },
+        squisq: { itemLabel: { fromField: 'heading' } },
+      },
+    };
+    const { container } = render(
+      <JsonView
+        schema={schema}
+        value={[
+          { heading: 'Section A', body: 'Body A' },
+          { heading: 'Section B', body: 'Body B' },
+        ]}
+      />,
+    );
+    const cards = container.querySelectorAll('.squisq-jv-card');
+    expect(cards).toHaveLength(2);
+    expect(cards[0].textContent).toContain('Section A');
+    expect(cards[1].textContent).toContain('Section B');
+  });
+
+  it('renders a color value as a swatch + hex', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'string',
+      format: 'color',
+    };
+    const { container } = render(<JsonView schema={schema} value="#ff0080" />);
+    const swatch = container.querySelector('.squisq-jv-color__swatch') as HTMLElement | null;
+    expect(swatch).not.toBeNull();
+    expect(swatch?.style.background).toContain('rgb(255, 0, 128)');
+    expect(container.textContent).toContain('#ff0080');
+  });
+
+  it('hides fields whose squisq.hidden rule matches', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: {
+        showAuthor: { type: 'boolean' },
+        authorName: {
+          type: 'string',
+          squisq: { hidden: { field: 'showAuthor', truthy: false } },
+        },
+      },
+    };
+    const visible = render(
+      <JsonView schema={schema} value={{ showAuthor: true, authorName: 'Alex' }} />,
+    );
+    expect(visible.container.textContent).toContain('Alex');
+
+    const hidden = render(
+      <JsonView schema={schema} value={{ showAuthor: false, authorName: 'Alex' }} />,
+    );
+    expect(hidden.container.textContent).not.toContain('Alex');
+  });
+
+  it('renders empty values as the em-dash placeholder', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'object',
+      properties: { title: { type: 'string' } },
+    };
+    const { container } = render(<JsonView schema={schema} value={{}} />);
+    expect(container.textContent).toContain('—');
+  });
+
+  it('respects squisq.enumLabels when displaying enum values', () => {
+    const schema: SquisqAnnotatedSchema = {
+      type: 'string',
+      enum: ['s', 'm', 'l'],
+      squisq: { enumLabels: { s: 'Small', m: 'Medium', l: 'Large' } },
+    };
+    const { container } = render(<JsonView schema={schema} value="m" />);
+    expect(container.textContent).toContain('Medium');
+  });
+});

package/src/__tests__/LinearDocView.test.tsx

@@ -85,6 +85,72 @@ describe('LinearDocView', () => {
     expect(container.textContent).toContain('Section body text');
   });
 
+  it('feeds imageWithCaption blocks the first body image as imageSrc', () => {
+    // Regression: without auto-extracting imageSrc from contents, the
+    // template renders a layer with `src=undefined` and the SVG card
+    // shows a broken image in document (linear) mode.
+    const doc = mkDoc([
+      mkBlock({
+        id: 'img-1',
+        sourceHeading: {
+          type: 'heading',
+          depth: 1,
+          children: [text('Mike Ammerlaan')],
+          templateAnnotation: { template: 'imageWithCaption' },
+        },
+        contents: [paragraph({ type: 'image', url: 'mikehome_files/profile.png', alt: 'Mike' })],
+      }),
+    ]);
+    const { container } = render(<LinearDocView doc={doc} />);
+    const card = container.querySelector('.squisq-linear-card');
+    expect(card).toBeTruthy();
+    const img = card!.querySelector('image, img') as Element | null;
+    expect(img).toBeTruthy();
+    const href =
+      img!.getAttribute('href') ?? img!.getAttribute('xlink:href') ?? img!.getAttribute('src');
+    expect(href).toContain('mikehome_files/profile.png');
+  });
+
+  it('extracts imageSrc from raw HTML <img> (resized image)', () => {
+    // The WYSIWYG editor emits `<img src width>` for resized images
+    // because markdown shorthand has no width syntax. The linear view
+    // must read that form too, or every resized imageWithCaption block
+    // renders as a broken card.
+    const doc = mkDoc([
+      mkBlock({
+        id: 'img-2',
+        sourceHeading: {
+          type: 'heading',
+          depth: 1,
+          children: [text('Resized')],
+          templateAnnotation: { template: 'imageWithCaption' },
+        },
+        contents: [
+          {
+            type: 'htmlBlock',
+            rawHtml: '<img alt="resized" src="resized.png" width="194">',
+            htmlChildren: [
+              {
+                type: 'htmlElement',
+                tagName: 'img',
+                attributes: { src: 'resized.png', alt: 'resized', width: '194' },
+                children: [],
+                selfClosing: true,
+              },
+            ],
+          } as unknown as MarkdownBlockNode,
+        ],
+      }),
+    ]);
+    const { container } = render(<LinearDocView doc={doc} />);
+    const card = container.querySelector('.squisq-linear-card');
+    expect(card).toBeTruthy();
+    const img = card!.querySelector('image, img') as Element | null;
+    const href =
+      img?.getAttribute('href') ?? img?.getAttribute('xlink:href') ?? img?.getAttribute('src');
+    expect(href).toContain('resized.png');
+  });
+
   it('renders annotated block as SVG card', () => {
     const doc = mkDoc([
       mkBlock({

package/src/hooks/MediaContext.tsx

@@ -41,17 +41,24 @@ export function useMediaProvider(): MediaProvider | null {
 export function useMediaUrl(relativePath: string, basePath: string): string {
   const provider = useMediaProvider();
 
+  // Defensive: callers (esp. preview surfaces like InlinePreviewGutter)
+  // sometimes feed in template-generated layers whose `content.src` is
+  // undefined while the user is still authoring the block. Treat that
+  // as an empty string rather than crashing the whole React tree.
+  const safePath = typeof relativePath === 'string' ? relativePath : '';
+
   // For absolute/http URLs, skip resolution entirely
   const isAbsolute =
-    relativePath.startsWith('http') ||
-    relativePath.startsWith('/') ||
-    relativePath.startsWith('data:') ||
-    relativePath.startsWith('blob:');
+    !safePath ||
+    safePath.startsWith('http') ||
+    safePath.startsWith('/') ||
+    safePath.startsWith('data:') ||
+    safePath.startsWith('blob:');
 
   // Memoize fallback to avoid recalculating on every render
   const fallback = useMemo(
-    () => (isAbsolute ? relativePath : `${basePath}/${relativePath}`),
-    [isAbsolute, relativePath, basePath],
+    () => (isAbsolute ? safePath : `${basePath}/${safePath}`),
+    [isAbsolute, safePath, basePath],
   );
 
   // Fast path: no provider or absolute URL — return synchronously, skip effect entirely
@@ -66,14 +73,14 @@ export function useMediaUrl(relativePath: string, basePath: string): string {
     }
 
     let cancelled = false;
-    provider!.resolveUrl(relativePath).then((resolved) => {
+    provider!.resolveUrl(safePath).then((resolved) => {
       if (!cancelled) setUrl(resolved);
     });
 
     return () => {
       cancelled = true;
     };
-  }, [needsProvider, provider, relativePath, fallback]);
+  }, [needsProvider, provider, safePath, fallback]);
 
   // When provider is not needed, return fallback directly to avoid
   // the one-frame delay from the initial useState → useEffect cycle

package/src/index.ts

@@ -12,6 +12,10 @@ export { DocProgressBar } from './DocProgressBar.js';
 export { MarkdownRenderer } from './MarkdownRenderer.js';
 export { LinearDocView } from './LinearDocView.js';
 export type { LinearDocViewProps, ImageDisplayMode } from './LinearDocView.js';
+export { InlineVideoPlayer } from './InlineVideoPlayer.js';
+export type { InlineVideoPlayerProps } from './InlineVideoPlayer.js';
+export { InlineAudioPlayer } from './InlineAudioPlayer.js';
+export type { InlineAudioPlayerProps } from './InlineAudioPlayer.js';
 
 // Layer components
 export { ImageLayer } from './layers/ImageLayer.js';
@@ -26,6 +30,7 @@ export { useAudioSync } from './hooks/useAudioSync.js';
 export { useDocPlayback } from './hooks/useDocPlayback.js';
 export { useViewportOrientation } from './hooks/useViewportOrientation.js';
 export { MediaContext, useMediaProvider, useMediaUrl } from './hooks/MediaContext.js';
+export { useAutoSurface } from './hooks/useAutoSurface.js';
 
 // Types
 export type { AudioProvider, AudioState, AudioActions } from './hooks/AudioProvider.js';
@@ -49,3 +54,7 @@ export { formatTime } from './types.js';
 
 // Utilities
 export { getAnimationStyle, getTransitionClass } from './utils/animationUtils.js';
+
+// JSON Form — read-only viewer
+export { JsonView } from './jsonView/index.js';
+export type { JsonViewProps } from './jsonView/index.js';

package/src/jsonView/JsonView.tsx

@@ -0,0 +1,51 @@
+/**
+ * <JsonView>
+ *
+ * Read-only renderer for any JSON value bound to a JSON Schema (with
+ * optional Squisq UI hints). Designed to look like a polished settings
+ * summary or CRM record — not a disabled form. Themable via the
+ * standard Theme + SurfaceScheme props used elsewhere in Squisq.
+ */
+
+import type { SquisqAnnotatedSchema } from '@bendyline/squisq/jsonForm';
+import type { SurfaceScheme, Theme } from '@bendyline/squisq/schemas';
+import { useJsonViewTokens } from './useJsonViewTokens';
+import { RenderNode } from './RenderNode';
+
+export interface JsonViewProps {
+  /** Schema describing the value's shape (with optional `squisq` UI hints). */
+  schema: SquisqAnnotatedSchema;
+  /** The value to display. */
+  value: unknown;
+  /** Optional theme. Defaults to `DEFAULT_THEME`. */
+  theme?: Theme;
+  /** Light/dark surface override; `'auto'` follows `prefers-color-scheme`. */
+  surface?: SurfaceScheme | 'auto';
+  /** Padding/gap density. Default: 'comfortable'. */
+  density?: 'comfortable' | 'compact';
+  /** Optional CSS class for the outer container. */
+  className?: string;
+}
+
+export function JsonView(props: JsonViewProps) {
+  const { schema, value, theme, surface, density = 'comfortable', className } = props;
+  const { style } = useJsonViewTokens(theme, surface);
+
+  const cls =
+    'squisq-json-view' +
+    (density === 'compact' ? ' squisq-json-view--compact' : '') +
+    (className ? ` ${className}` : '');
+
+  return (
+    <div className={cls} style={style}>
+      <RenderNode
+        value={value}
+        schema={schema}
+        rootSchema={schema}
+        rootData={value}
+        pointer=""
+        density={density}
+      />
+    </div>
+  );
+}

package/src/jsonView/RenderNode.tsx

@@ -0,0 +1,51 @@
+/**
+ * Recursive dispatcher: looks at a schema node + value, chooses a
+ * `ControlKind`, evaluates `hidden` rules, and renders the matching
+ * read-only viewer.
+ */
+
+import {
+  chooseControl,
+  resolveFlag,
+  resolveRef,
+  type SquisqAnnotatedSchema,
+} from '@bendyline/squisq/jsonForm';
+import { VIEWERS, type ViewerProps } from './viewers';
+
+export interface RenderNodeProps {
+  value: unknown;
+  schema: SquisqAnnotatedSchema;
+  rootSchema: SquisqAnnotatedSchema;
+  rootData: unknown;
+  pointer: string;
+  density: 'comfortable' | 'compact';
+  /**
+   * When a parent group already wrote its own card chrome (e.g. a
+   * card-stack item), suppress the nested group's outer title so the
+   * UI doesn't double up on labels.
+   */
+  suppressTopGroupTitle?: boolean;
+}
+
+export function RenderNode(props: RenderNodeProps): React.ReactElement | null {
+  const resolved = resolveRef(props.schema, props.rootSchema) ?? props.schema;
+
+  if (resolveFlag(resolved.squisq?.hidden, props.rootData)) return null;
+
+  const kind = chooseControl(resolved);
+  const Viewer = VIEWERS[kind];
+  const viewerProps: ViewerProps = {
+    value: props.value,
+    schema: resolved,
+    rootSchema: props.rootSchema,
+    rootData: props.rootData,
+    pointer: props.pointer,
+    density: props.density,
+  };
+  if (kind === 'group' || kind === 'card') {
+    // GroupViewer accepts an extra prop that RenderNode forwards.
+    const Group = Viewer as React.ComponentType<ViewerProps & { suppressTitle?: boolean }>;
+    return <Group {...viewerProps} suppressTitle={props.suppressTopGroupTitle} />;
+  }
+  return <Viewer {...viewerProps} />;
+}

package/src/jsonView/index.ts

@@ -0,0 +1,2 @@
+export { JsonView } from './JsonView';
+export type { JsonViewProps } from './JsonView';

package/src/jsonView/json-view.css

@@ -0,0 +1,206 @@
+/**
+ * <JsonView> — read-only viewer styles.
+ *
+ * All colors flow through scoped CSS custom properties on the root
+ * element so the same component re-themes cleanly without re-render.
+ */
+
+.squisq-json-view {
+  font-family: var(--squisq-json-body-font, system-ui, sans-serif);
+  color: var(--squisq-json-text);
+  background: var(--squisq-json-bg);
+  border-radius: var(--squisq-json-radius, 8px);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  container-type: inline-size;
+}
+
+.squisq-json-view--compact {
+  padding: 8px;
+  gap: 8px;
+}
+
+.squisq-jv-group {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: color-mix(in srgb, var(--squisq-json-bg) 92%, var(--squisq-json-text) 8%);
+  border: 1px solid var(--squisq-json-border);
+  border-radius: var(--squisq-json-radius, 8px);
+  padding: 14px 16px;
+}
+
+.squisq-jv-group__title {
+  font-family: var(--squisq-json-title-font, inherit);
+  font-size: 1.05em;
+  font-weight: 600;
+  color: var(--squisq-json-text);
+  margin: 0;
+}
+
+.squisq-jv-group__help {
+  font-size: 0.85em;
+  color: var(--squisq-json-muted);
+  margin: -6px 0 0 0;
+}
+
+.squisq-jv-row {
+  display: grid;
+  grid-template-columns: minmax(110px, 0.4fr) minmax(0, 1fr);
+  gap: 12px;
+  align-items: baseline;
+}
+
+.squisq-json-view--compact .squisq-jv-row {
+  gap: 8px;
+}
+
+@container (max-width: 480px) {
+  .squisq-jv-row {
+    grid-template-columns: 1fr;
+    gap: 2px;
+  }
+}
+
+.squisq-jv-label {
+  color: var(--squisq-json-muted);
+  font-size: 0.85em;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  font-weight: 500;
+}
+
+.squisq-jv-value {
+  color: var(--squisq-json-text);
+  word-break: break-word;
+}
+
+.squisq-jv-value--multiline {
+  white-space: pre-wrap;
+}
+
+.squisq-jv-empty {
+  color: var(--squisq-json-muted);
+  font-style: italic;
+}
+
+.squisq-jv-chip-bin {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.squisq-jv-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 3px 10px;
+  font-size: 0.85em;
+  background: color-mix(in srgb, var(--squisq-json-primary) 16%, transparent);
+  color: var(--squisq-json-text);
+  border-radius: 999px;
+  border: 1px solid color-mix(in srgb, var(--squisq-json-primary) 30%, transparent);
+}
+
+.squisq-jv-card-stack {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.squisq-jv-card {
+  background: color-mix(in srgb, var(--squisq-json-bg) 95%, var(--squisq-json-text) 5%);
+  border: 1px solid var(--squisq-json-border);
+  border-radius: var(--squisq-json-radius, 6px);
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.squisq-jv-card__title {
+  font-family: var(--squisq-json-title-font, inherit);
+  font-weight: 600;
+  font-size: 0.95em;
+  color: var(--squisq-json-text);
+  margin: 0;
+}
+
+.squisq-jv-color {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.squisq-jv-color__swatch {
+  width: 18px;
+  height: 18px;
+  border-radius: 4px;
+  border: 1px solid var(--squisq-json-border);
+  display: inline-block;
+}
+
+.squisq-jv-color__hex {
+  font-family: var(--squisq-json-mono-font, ui-monospace, Consolas, monospace);
+  font-size: 0.9em;
+  color: var(--squisq-json-muted);
+}
+
+.squisq-jv-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 2px 10px;
+  border-radius: 999px;
+  font-size: 0.8em;
+  font-weight: 500;
+}
+
+.squisq-jv-toggle--on {
+  background: color-mix(in srgb, var(--squisq-json-primary) 18%, transparent);
+  color: var(--squisq-json-primary);
+}
+
+.squisq-jv-toggle--off {
+  background: color-mix(in srgb, var(--squisq-json-muted) 14%, transparent);
+  color: var(--squisq-json-muted);
+}
+
+.squisq-jv-tabs {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.squisq-jv-tabs__discriminator {
+  font-size: 0.8em;
+  color: var(--squisq-json-muted);
+}
+
+.squisq-jv-richtext {
+  color: var(--squisq-json-text);
+  font-family: var(--squisq-json-body-font, inherit);
+  line-height: 1.55;
+}
+
+.squisq-jv-richtext h1,
+.squisq-jv-richtext h2,
+.squisq-jv-richtext h3,
+.squisq-jv-richtext h4 {
+  font-family: var(--squisq-json-title-font, inherit);
+  margin: 0.6em 0 0.3em;
+  font-weight: 600;
+}
+
+.squisq-jv-richtext p {
+  margin: 0.4em 0;
+}
+
+.squisq-jv-richtext code {
+  font-family: var(--squisq-json-mono-font, ui-monospace, Consolas, monospace);
+  background: color-mix(in srgb, var(--squisq-json-text) 10%, transparent);
+  padding: 1px 4px;
+  border-radius: 3px;
+  font-size: 0.92em;
+}

package/src/jsonView/useJsonViewTokens.ts

@@ -0,0 +1,57 @@
+/**
+ * Derive the CSS custom-property bag for `<JsonView>` from a Theme + Surface.
+ * Mirrors the pattern in LinearDocView so JsonView re-themes consistently
+ * with the rest of Squisq.
+ */
+
+import { useMemo } from 'react';
+import {
+  applySurface,
+  resolveFontFamily,
+  type SurfaceScheme,
+  type Theme,
+} from '@bendyline/squisq/schemas';
+import { DEFAULT_THEME } from '@bendyline/squisq/doc';
+import { useAutoSurface } from '../hooks/useAutoSurface';
+
+export interface JsonViewTokens {
+  /** Inline style object to spread onto the root element. */
+  style: React.CSSProperties;
+  /** The effective theme (after surface application). */
+  theme: Theme;
+}
+
+export function useJsonViewTokens(
+  theme: Theme | undefined,
+  surface: SurfaceScheme | 'auto' | undefined,
+): JsonViewTokens {
+  const auto = useAutoSurface(surface === 'auto');
+  const effectiveSurface = surface === 'auto' ? auto : (surface ?? undefined);
+
+  return useMemo(() => {
+    const baseTheme = theme ?? DEFAULT_THEME;
+    const finalTheme = effectiveSurface ? applySurface(baseTheme, effectiveSurface) : baseTheme;
+
+    const titleFont = resolveFontFamily(finalTheme.typography.titleFont, 'system-ui, sans-serif');
+    const bodyFont = resolveFontFamily(finalTheme.typography.bodyFont, 'system-ui, sans-serif');
+    const monoFont = resolveFontFamily(
+      finalTheme.typography.monoFont,
+      'ui-monospace, Consolas, monospace',
+    );
+
+    const style: React.CSSProperties = {
+      ['--squisq-json-bg' as string]: finalTheme.colors.background,
+      ['--squisq-json-text' as string]: finalTheme.colors.text,
+      ['--squisq-json-muted' as string]: finalTheme.colors.textMuted,
+      ['--squisq-json-primary' as string]: finalTheme.colors.primary,
+      ['--squisq-json-accent' as string]: finalTheme.colors.secondary,
+      ['--squisq-json-border' as string]: `color-mix(in srgb, ${finalTheme.colors.textMuted} 35%, transparent)`,
+      ['--squisq-json-title-font' as string]: titleFont,
+      ['--squisq-json-body-font' as string]: bodyFont,
+      ['--squisq-json-mono-font' as string]: monoFont,
+      ['--squisq-json-radius' as string]: `${finalTheme.style.borderRadius ?? 8}px`,
+    };
+
+    return { style, theme: finalTheme };
+  }, [theme, effectiveSurface]);
+}