@bendyline/squisq-react 2.0.1 → 2.2.0

package/src/index.ts

@@ -1,70 +0,0 @@
-// Main components
-export { DocPlayer } from './DocPlayer.js';
-export type { DocPlayerProps } from './DocPlayer.js';
-export type { MountOptions, SquisqPlayerHandle } from './standalone-entry.js';
-export { BlockRenderer } from './BlockRenderer.js';
-export { CaptionOverlay } from './CaptionOverlay.js';
-export { SocialCaptionOverlay } from './SocialCaptionOverlay.js';
-export { DocControlsOverlay } from './DocControlsOverlay.js';
-export { DocControlsBottom } from './DocControlsBottom.js';
-export { DocControlsSidebar } from './DocControlsSidebar.js';
-export { DocControlsSlideshow } from './DocControlsSlideshow.js';
-export { DocPlayerWithSidebar } from './DocPlayerWithSidebar.js';
-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';
-export { TextLayer } from './layers/TextLayer.js';
-export { ShapeLayer } from './layers/ShapeLayer.js';
-export { PathLayer } from './layers/PathLayer.js';
-export { VideoLayer } from './layers/VideoLayer.js';
-export { TableLayer } from './layers/TableLayer.js';
-export { TreeLayer } from './layers/TreeLayer.js';
-export { MapLayer } from './layers/MapLayer.js';
-
-// Timed media clips (block.media + doc.documentMedia playback)
-export { MediaClipLayer } from './MediaClipLayer.js';
-export type { MediaClipLayerProps } from './MediaClipLayer.js';
-
-// Hooks
-export { useAudioSync } from './hooks/useAudioSync.js';
-export { useMediaSchedule } from './hooks/useMediaSchedule.js';
-export type { MediaScheduleController } from './hooks/useMediaSchedule.js';
-export { useDocPlayback } from './hooks/useDocPlayback.js';
-export type { UseDocPlaybackOptions } 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 { AudioController, AudioState, AudioActions } from './hooks/AudioController.js';
-export type {
-  PlaybackState,
-  PlaybackActions,
-  BlockMarker,
-  ControlsLayout,
-  DisplayMode,
-  CaptionStyle,
-  CaptionMode,
-  SlideNavActions,
-  SquisqRenderAPI,
-  RenderBlockInfo,
-  RenderAudioSegmentInfo,
-  RenderCaptionInfo,
-  RenderChapterInfo,
-} from './types.js';
-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

@@ -1,51 +0,0 @@
-/**
- * <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

@@ -1,51 +0,0 @@
-/**
- * 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

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

package/src/jsonView/json-view.css

@@ -1,206 +0,0 @@
-/**
- * <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

@@ -1,32 +0,0 @@
-/**
- * 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 { type SurfaceScheme, type Theme } from '@bendyline/squisq/schemas';
-import { buildJsonFormTokens, resolveJsonFormTheme } from '@bendyline/squisq/jsonForm';
-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 style = buildJsonFormTokens(theme, effectiveSurface, {
-      prefix: '--squisq-json',
-    }) as unknown as React.CSSProperties;
-    return { style, theme: resolveJsonFormTheme(theme, effectiveSurface) };
-  }, [theme, effectiveSurface]);
-}