@orangelogic/design-system 4.32.0 → 4.33.0

package/library/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "4.32.0",
+  "version": "4.33.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {

package/library/packages/events/src/cx-video-segment.d.ts

@@ -0,0 +1,41 @@
+export type CxVideoSegmentClickEvent = CustomEvent<{
+    id: string;
+}>;
+export type CxVideoSegmentsUnderPlayheadEvent = CustomEvent<{
+    ids: string[];
+}>;
+export type CxVideoSegmentCreateEvent = CustomEvent<{
+    startPosition: number;
+    stopPosition: number;
+}>;
+export type CxVideoSegmentPanelChangeEvent = CustomEvent<{
+    open: boolean;
+}>;
+export type CxVideoSegmentVisibilityChangeEvent = CustomEvent<{
+    visible: boolean;
+}>;
+export type CxVideoSegmentTimecodeFormattedEvent = CustomEvent<{
+    format: string;
+    seconds: number;
+    text: string;
+}>;
+export type CxVideoSegmentTimecodeParsedEvent = CustomEvent<{
+    format: string;
+    input: string;
+    seconds: number | null;
+}>;
+export type CxVideoTimeFormatChangeEvent = CustomEvent<{
+    format: string;
+}>;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        'cx-video-segment-click': CxVideoSegmentClickEvent;
+        'cx-video-segment-create': CxVideoSegmentCreateEvent;
+        'cx-video-segment-panel-change': CxVideoSegmentPanelChangeEvent;
+        'cx-video-segment-timecode-formatted': CxVideoSegmentTimecodeFormattedEvent;
+        'cx-video-segment-timecode-parsed': CxVideoSegmentTimecodeParsedEvent;
+        'cx-video-segment-visibility-change': CxVideoSegmentVisibilityChangeEvent;
+        'cx-video-segments-under-playhead': CxVideoSegmentsUnderPlayheadEvent;
+        'cx-video-time-format-change': CxVideoTimeFormatChangeEvent;
+    }
+}

package/library/packages/events/src/events.d.ts

@@ -259,6 +259,7 @@ export * from './cx-video-prev-frame';
 export * from './cx-video-seeked';
 export * from './cx-video-segment-change';
 export * from './cx-video-media';
+export * from './cx-video-segment';
 export * from './cx-video-time-update';
 export * from './cx-view-and-sort-action-click';
 export * from './cx-view-logs';

package/library/packages/hybrid/video-advanced/src/react/components/ControlBarTimeControls/ControlBarTimeControls.d.ts

@@ -1,7 +1,8 @@
 import { EDIT_MODE, TIMECODE_MODE, VIDEO_STATUS_ENUM } from '../../constants';
 import { Chapter } from '../../plugins/Chapters';
 import { ExtendedQualityLevelList, ExtendedTextTrackList, Timecode } from '../../type';
-type Props = {
+import { SegmentPlayback } from '../SegmentPlayerControls/SegmentPlayerControls';
+export type Props = {
     activatePremiumFeatures: boolean;
     changePlaybackSpeed: (speed: number) => void;
     changeQualityLevel: (levelIndex: number) => void;
@@ -28,6 +29,7 @@ type Props = {
     playbackSpeed: number;
     playbackSpeedOptions: number[];
     qualityLevelList: ExtendedQualityLevelList;
+    segmentPlayback?: SegmentPlayback;
     showTimeline: boolean;
     showTranscription: boolean;
     textTrackList: ExtendedTextTrackList | null;

package/library/packages/hybrid/video-advanced/src/react/components/SegmentPlayerControls/ChapterTrack.d.ts

@@ -0,0 +1,13 @@
+import { Chapter } from '../../plugins/Chapters';
+import { SegmentPlayback } from './SegmentPlayerControls';
+/** Reuse the legacy chapter renderer; the native range owns seeking and keyboard input. */
+export default function ChapterTrack({ chapters, clipEnd, clipStart, currentTime, duration, hoverTime, hoveredChapterId, player, }: {
+    chapters: Chapter[];
+    clipEnd?: number;
+    clipStart?: number;
+    currentTime: number;
+    duration: number;
+    hoverTime: number | null;
+    hoveredChapterId: string | null;
+    player: SegmentPlayback['player'];
+}): import('react/jsx-runtime').JSX.Element;

package/library/packages/hybrid/video-advanced/src/react/components/SegmentPlayerControls/SegmentPlayerControls.d.ts

@@ -0,0 +1,37 @@
+import { ReactNode, RefObject } from 'react';
+import { TIMECODE_MODE } from '../../constants';
+import { TimelineHandle } from '../../plugins/Timeline';
+import { Context, SelectedTimeSegment } from '../../type';
+import { Props as ControlProps } from '../ControlBarTimeControls/ControlBarTimeControls';
+export interface SegmentPlayback {
+    ctx: Context;
+    currentTime: number;
+    duration: number;
+    focusVideo: () => void;
+    fractionalSegmentInput: boolean;
+    hover: (seconds: number | null, track: HTMLElement) => void;
+    isPlayingSegment: boolean;
+    pause: () => void;
+    paused: boolean;
+    playSegment: () => void;
+    player: {
+        buffered: () => TimeRanges;
+        currentTime: () => number;
+        muted: (value?: boolean) => boolean;
+        off: (event: string, handler: () => void) => void;
+        on: (event: string, handler: () => void) => void;
+        requestPictureInPicture?: () => void;
+        volume: (value?: number) => number;
+    } | null;
+    seek: (seconds: number) => void;
+    segmentEditOnMouseUp: boolean;
+    selectedTimeSegments: SelectedTimeSegment[];
+    thumbnail: (mode: TIMECODE_MODE) => ReactNode;
+    timelineRef: RefObject<TimelineHandle | null>;
+    toggleFullscreen: () => void;
+    togglePlay: () => void;
+}
+declare const SegmentPlayerControls: import('react').ForwardRefExoticComponent<ControlProps & {
+    playback: SegmentPlayback;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export default SegmentPlayerControls;

package/library/packages/hybrid/video-advanced/src/react/components/SegmentPlayerControls/SegmentPlayerControls.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('lit').CSSResult;
+export default _default;

package/library/packages/hybrid/video-advanced/src/react/constants.d.ts

@@ -50,6 +50,13 @@ export declare const _1_EXP_3 = 1000;
 export declare const _36_EXP_8 = 3600000000;
 export declare const _6_EXP_7 = 60000000;
 export declare const MINUTE_TO_SECOND = 60;
+/**
+ * NTSC rate = whole rate × 1000/1001 (30 → 29.97…).
+ * @see https://en.wikipedia.org/wiki/NTSC#History
+ */
+export declare const NTSC_RATE_FACTOR: number;
+/** Max gap to count a rate as NTSC; 2-decimal rounding (29.97) is off by ≤ 0.005. */
+export declare const NTSC_FRAME_RATE_TOLERANCE = 0.01;
 export declare const AUTOPLAY_TIMEOUT = 500;
 export declare const INACTIVITY_TIMEOUT = 5000;
 export declare const REWIND_INTERVAL = 50;

package/library/packages/hybrid/video-advanced/src/react/context/annotationCommentContext.d.ts

@@ -9,6 +9,7 @@ interface IAnnotationCommentContext {
     enableAnnotation: boolean | null;
     enableComment: boolean | null;
     enableCommentTimelineMarkers: boolean;
+    hideCommentButton: boolean;
     isCommentAnchorActive: boolean;
     setActiveTimelineCommentId: (id: string | null) => void;
     setAnnotationLayerElement: (annotationLayer: HTMLElement | null) => void;

package/library/packages/hybrid/video-advanced/src/react/context.d.ts

@@ -1,3 +1,4 @@
+import { VideoPlayerVariant } from '../../../../types/src/video-advanced';
 import { Dispatch, SetStateAction } from 'react';
 import { TIMECODE_MODE } from './constants';
 import { ExtendedSubClip, Timecode } from './type';
@@ -21,6 +22,6 @@ export declare const VideoReactContext: import('react').Context<{
     subClips: ExtendedSubClip[];
     timecodeMode: TIMECODE_MODE;
     totalDuration: number;
-    useNewUI: boolean;
+    variant: VideoPlayerVariant;
     videoID: string;
 }>;

package/library/packages/hybrid/video-advanced/src/react/hooks/useControlBar.d.ts

@@ -4,7 +4,7 @@ interface IUseControlBarProps {
     videoRef: RefObject<HTMLDivElement | null>;
 }
 declare function useControlBar({ isVideoMounted, videoRef }: IUseControlBarProps): {
-    loopButtonRef: RefObject<HTMLElement | null>;
-    timeDisplayRef: RefObject<HTMLDivElement | null>;
+    controlsHost: HTMLDivElement | null;
+    loopHost: HTMLDivElement | null;
 };
 export default useControlBar;

package/library/packages/hybrid/video-advanced/src/react/plugins/Chapters/Select.d.ts

@@ -9,13 +9,15 @@ type ChapterSelectPropstype = {
     chaptersList: Chapter[];
     frameRate: number;
     isFullscreen: boolean;
+    menuItem?: boolean;
     onHoverChapter: (chap: Chapter | null) => void;
     onSaveChapters: (chaptersList: Chapter[]) => void;
     onSelectChapter: (chap: Chapter) => void;
     timecode: Timecode;
     timecodeMode: TIMECODE_MODE;
+    toolbar?: boolean;
     videoDuration: number;
     videoRect: DOMRectReadOnly | null | undefined;
 };
-declare const _default: import('react').MemoExoticComponent<({ chaptersList, frameRate, isFullscreen, onHoverChapter, onSaveChapters, onSelectChapter, timecode, timecodeMode, videoDuration, videoRect, }: ChapterSelectPropstype) => import('react/jsx-runtime').JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ chaptersList, frameRate, isFullscreen, menuItem, onHoverChapter, onSaveChapters, onSelectChapter, timecode, timecodeMode, toolbar, videoDuration, videoRect, }: ChapterSelectPropstype) => import('react/jsx-runtime').JSX.Element>;
 export default _default;

package/library/packages/hybrid/video-advanced/src/react/plugins/PlaybackSlider/PlaybackSlider.d.ts

@@ -1,8 +1,11 @@
-declare const _default: import('react').MemoExoticComponent<({ changePlaybackSpeed, disabledForward, disabledRewind, isFullscreen, playbackSpeed, }: {
+declare const _default: import('react').MemoExoticComponent<({ changePlaybackSpeed, disabledForward, disabledRewind, isFullscreen, modern, playbackSpeed, playbackSpeedOptions, premium, }: {
     changePlaybackSpeed: (speed: number) => void;
     disabledForward: boolean;
     disabledRewind: boolean;
     isFullscreen: boolean;
+    modern?: boolean;
     playbackSpeed: number;
+    playbackSpeedOptions?: number[];
+    premium?: boolean;
 }) => import('react/jsx-runtime').JSX.Element>;
 export default _default;

package/library/packages/hybrid/video-advanced/src/react/plugins/SettingsMenu/RewindMenu.d.ts

@@ -0,0 +1 @@
+export default function RewindMenu(): import('react/jsx-runtime').JSX.Element;

package/library/packages/hybrid/video-advanced/src/react/plugins/SettingsMenu/SettingsMenu.d.ts

@@ -1,16 +1,19 @@
-import { FunctionComponent } from 'react';
+import { FunctionComponent, ReactNode } from 'react';
 import { EDIT_MODE } from '../../constants';
 import { ExtendedQualityLevelList } from '../../type';
 interface ISettingsMenuProps {
     changePlaybackSpeed: (speed: number) => void;
     changeQualityLevel: (levelIndex: number) => void;
     editMode: EDIT_MODE;
+    extraItems?: ReactNode;
+    modern?: boolean;
     onToggleTimeline: (show: boolean) => void;
     openShortcutsModal: () => void;
     playbackSpeed: number;
     playbackSpeedOptions: number[];
     qualityLevelList: ExtendedQualityLevelList;
     showTimeline: boolean;
+    timelineItems?: ReactNode;
 }
 declare const SettingsMenu: FunctionComponent<ISettingsMenuProps>;
 export default SettingsMenu;

package/library/packages/hybrid/video-advanced/src/react/type.d.ts

@@ -1,3 +1,4 @@
+import { VideoPlayerVariant, VideoSegmentUIConfig } from '../../../../types/src/video-advanced';
 import { CSSProperties } from 'react';
 import { QualityLevel, QualityLevelList } from 'videojs-contrib-quality-levels';
 import { EDIT_MODE } from './constants';
@@ -122,7 +123,8 @@ export type Context = {
          */
         collabUI?: boolean;
         darkMode: boolean;
-        useNewUI?: boolean;
+        hideCommentButton?: boolean;
+        variant?: VideoPlayerVariant;
     };
     extractCurrentFrameEvent: {
         onFired: (handler: () => void) => () => void;
@@ -130,6 +132,7 @@ export type Context = {
     fetchCortexApi: (relativeUrl: string, init: any, params: any) => any;
     fireEvent: (eventName: string, args: any) => void;
     onClosed?: (cleanup: () => void) => void;
+    segmentUI?: VideoContextItem<VideoSegmentUIConfig>;
     videoContext: {
         activatePremiumFeatures: VideoContextItem<boolean>;
         activeCaptionID: VideoContextItem<string>;
@@ -137,6 +140,10 @@ export type Context = {
          * comment id selected on the timeline (collab / marker UI)
          */
         activeTimelineCommentId: VideoContextItem<string | null>;
+        /**
+         * timeline segment id selected on the modern timeline
+         */
+        activeTimelineSegmentId: VideoContextItem<string | null>;
         alwaysShowControls: VideoContextItem<boolean>;
         autoPlay: VideoContextItem<boolean>;
         canAddSubClip: VideoContextItem<boolean>;
@@ -194,6 +201,10 @@ export type Context = {
          */
         showCommentSidebar: VideoContextItem<boolean>;
         showExport: VideoContextItem<boolean>;
+        /**
+         * whether the consumer-owned segment panel is open
+         */
+        showSegmentSidebar: VideoContextItem<boolean>;
         showTranscription: VideoContextItem<boolean>;
         smallMode: VideoContextItem<boolean>;
         sourceMIME: VideoContextItem<string>;
@@ -396,10 +407,84 @@ export type Context = {
                 stopPosition: number;
             }) => void) => () => void;
         };
+        segmentClickEvent: {
+            fire: (args: {
+                id: string;
+            }) => void;
+            onFired: (handler: (args: {
+                id: string;
+            }) => void) => () => void;
+        };
+        segmentCreateEvent: {
+            fire: (detail: {
+                startPosition: number;
+                stopPosition: number;
+            }) => void;
+            onFired: (handler: (detail: {
+                startPosition: number;
+                stopPosition: number;
+            }) => void) => () => void;
+        };
+        segmentPanelChangeEvent: {
+            fire: (args: {
+                open: boolean;
+            }) => void;
+            onFired: (handler: (args: {
+                open: boolean;
+            }) => void) => () => void;
+        };
+        segmentTimecodeFormattedEvent: {
+            fire: (detail: {
+                format: string;
+                seconds: number;
+                text: string;
+            }) => void;
+            onFired: (handler: (detail: {
+                format: string;
+                seconds: number;
+                text: string;
+            }) => void) => () => void;
+        };
+        segmentTimecodeParsedEvent: {
+            fire: (detail: {
+                format: string;
+                input: string;
+                seconds: number | null;
+            }) => void;
+            onFired: (handler: (detail: {
+                format: string;
+                input: string;
+                seconds: number | null;
+            }) => void) => () => void;
+        };
+        segmentVisibilityChangeEvent: {
+            fire: (args: {
+                visible: boolean;
+            }) => void;
+            onFired: (handler: (args: {
+                visible: boolean;
+            }) => void) => () => void;
+        };
+        segmentsUnderPlayheadEvent: {
+            fire: (args: {
+                ids: string[];
+            }) => void;
+            onFired: (handler: (args: {
+                ids: string[];
+            }) => void) => () => void;
+        };
         setTimeEvent: {
             fire: (time: number) => void;
             onFired: (handler: (time: number) => void) => () => void;
         };
+        timeFormatChangeEvent: {
+            fire: (args: {
+                format: string;
+            }) => void;
+            onFired: (handler: (args: {
+                format: string;
+            }) => void) => () => void;
+        };
         timeUpdateEvent: {
             fire: (detail?: {
                 currentTime: number;

package/library/packages/hybrid/video-advanced/src/react/utils/frameUtils.d.ts

@@ -31,3 +31,10 @@ export declare function isValidFrameIndex(frameIndex: number, timestampsLength:
  * @returns The timestamp if valid, null otherwise
  */
 export declare function getCurrentFrameTimestamp(timestamps: number[], frameIndex: number): number | null;
+/**
+ * Gets the time to seek to for a frame: a quarter frame in, since a seek to its exact start can land on the previous frame.
+ * @param frameStart - Start of the frame
+ * @param frameDuration - Duration of a single frame, in the unit of frameStart
+ * @returns The time to seek to
+ */
+export declare function getFrameSeekTime(frameStart: number, frameDuration: number): number;

package/library/packages/hybrid/video-advanced/src/react/utils/segmentTime.d.ts

@@ -0,0 +1,8 @@
+import { TIMECODE_MODE } from '../constants';
+/** Strict input grammar. Returns seconds, or null without seeking on invalid input. */
+export declare function parseSegmentTime(input: string, mode: TIMECODE_MODE, frameRate: number, dropFrame: boolean): number | null;
+export declare function formatSegmentTime(seconds: number, mode: TIMECODE_MODE, frameRate: number, dropFrame: boolean): string;
+/** Clamps to the last frame and rounds to the nearest frame start, unless `roundToFrame` is false. */
+export declare function clampSegmentTime(seconds: number, duration: number, frameRate: number, roundToFrame?: boolean): number;
+/** Keeps the opposite edge fixed. Null means no valid frame exists at that boundary. */
+export declare function clampSegmentEdge(seconds: number, opposite: number, from: boolean, duration: number, frameRate: number, roundToFrame?: boolean): number | null;

package/library/packages/hybrid/video-advanced/src/react/utils/useMenuKeyboardBoundary.d.ts

@@ -0,0 +1,2 @@
+/** Let nested controls handle keys before the menu/player sees them. */
+export default function useMenuKeyboardBoundary(active: boolean): import('react').RefObject<HTMLDivElement | null>;

package/library/packages/hybrid/video-advanced/src/video-advanced/video-advanced.d.ts

@@ -20,6 +20,7 @@ import { default as CxTabPanel } from '../../../../atoms/src/components/tab-pane
 import { default as CxTooltip } from '../../../../atoms/src/components/tooltip/tooltip.ts';
 import { default as CxTypography } from '../../../../atoms/src/components/typography/typography.ts';
 import { default as CortexElement } from '../../../../base/src/cortex-element.ts';
+import { VideoTimelineSegment, VideoPlayerVariant } from '../../../../types/src/video-advanced';
 import { CSSResultGroup, PropertyValues } from 'lit';
 import { EDIT_MODE } from '../react/constants';
 import { Chapter } from '../react/plugins/Chapters';
@@ -28,6 +29,14 @@ import { default as CxVideoChaptersManager } from '../video-chapters-manager/vid
 import { default as CxVideoEditor } from '../video-editor/video-editor';
 /**
  * @summary Video player with frame-accurate seeking, editor, annotations, and transcription.
+ * @event {{ id: string }} cx-video-segment-click - A timeline segment was selected; playback seeks to its start.
+ * @event {{ ids: string[] }} cx-video-segments-under-playhead - Matching segment IDs, ordered by start then input order.
+ * @event {{ startPosition: number; stopPosition: number }} cx-video-segment-create - A handle starts a draft; bounds use seconds.
+ * @event {{ open: boolean }} cx-video-segment-panel-change - Requests the consumer-owned segment panel.
+ * @event {{ visible: boolean }} cx-video-segment-visibility-change - Segment timeline visibility changed for this session.
+ * @event {{ format: string }} cx-video-time-format-change - User selected Standard, Frame, or SMPTE for this session.
+ * @event {{ format: string; input: string; seconds: number | null }} cx-video-segment-timecode-parsed - parseTimecode() result; seconds is null for invalid input.
+ * @event {{ format: string; seconds: number; text: string }} cx-video-segment-timecode-formatted - formatTimecode() result.
  *
  * @event cx-video-time-update - Fired on video time update.
  * @event cx-video-seeked - Fired when the video has been seeked.
@@ -42,7 +51,7 @@ import { default as CxVideoEditor } from '../video-editor/video-editor';
  * @event {{ id: string }} cx-video-comment-mouseleave - Fired when leaving a comment marker.
  * @event {{ name: string; data: unknown }} cx-video-event - Generic player event bridge.
  * @event {{ layer: HTMLElement | null }} cx-video-annotation-layer-change - Fired when the player (re)mounts its annotation layer div; hosts mount annotators into this element.
- * @event {{ key: 'editMode' | 'enableAnnotation' | 'enableComment' | 'isCommentAnchorActive' | 'showCommentSidebar' | 'startPosition' | 'stopPosition'; value: boolean | number | string | null }} cx-video-context-change - Fired when the player UI changes one of these context values (toggles, or the segment selection); hosts sync their context cells from it.
+ * @event {{ key: 'activeTimelineSegmentId' | 'editMode' | 'enableAnnotation' | 'enableComment' | 'isCommentAnchorActive' | 'showCommentSidebar' | 'showSegmentSidebar' | 'startPosition' | 'stopPosition'; value: boolean | number | string | null }} cx-video-context-change - Fired when the player UI changes one of these context values (toggles, or the segment selection); hosts sync their context cells from it.
  * @event cx-video-closed - Fired when the player is torn down.
  * @event cx-video-editor-undo - Fired when the editor undo action is requested.
  * @event cx-video-editor-redo - Fired when the editor redo action is requested.
@@ -90,6 +99,23 @@ export default class CxVideoAdvanced extends CortexElement {
     static readonly styles: CSSResultGroup;
     private readonly _extractFrameHandlers;
     private readonly _ctx;
+    private segmentSession;
+    /** Source-asset markers after Type filtering, never after list search. @defaultValue [] */
+    timelineSegments: VideoTimelineSegment[];
+    /** Selected marker ID is retained even when the consumer filters it out. @defaultValue null */
+    activeTimelineSegmentId: string | null;
+    /** Consumer-owned panel visibility. Closing it cancels the segment draft. @defaultValue false */
+    showSegmentSidebar: boolean;
+    /** Account-specific display label; API terminology remains segments. @defaultValue 'Subclips' */
+    segmentLabel: string;
+    /** Show Subclips controls in the new UI. @defaultValue false */
+    enableSubclips: boolean;
+    /** Show the timeline handles that start a new segment; enable only for users allowed to create segments. @defaultValue false */
+    enableSegmentCreation: boolean;
+    /** Workspace configuration: hide segment markers by default. @defaultValue false */
+    noSegmentTimelineMarkers: boolean;
+    /** Explicit source metadata: SMPTE drop-frame numbering at 29.97/59.94 fps. @defaultValue false */
+    dropFrame: boolean;
     private readonly ctxOutputUnsubscribes;
     /** Required. Cortex API fetch function forwarded to the React player. */
     fetchCortexApi: Context['fetchCortexApi'];
@@ -144,7 +170,10 @@ export default class CxVideoAdvanced extends CortexElement {
     smallMode: boolean;
     collabUI: boolean | undefined;
     darkMode: boolean;
-    useNewUI: boolean | undefined;
+    /** Hide the comment sidebar toolbar button while keeping the other collab controls. @defaultValue false */
+    hideCommentButton: boolean;
+    /** Player layout. Classic enables chapter editing and selected ranges; modern uses the redesigned controls. @defaultValue 'default' */
+    variant: VideoPlayerVariant;
     annotationLayer: HTMLElement | null;
     captionsURI: Caption;
     chaptersList: Chapter[];
@@ -158,6 +187,20 @@ export default class CxVideoAdvanced extends CortexElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
+    /** Call when reopening the same asset in a reused instance. Resets transient UI choices. */
+    resetSegmentSession(): void;
+    /** Shares the player's strict input grammar with consumer-owned From/To fields. Also emits cx-video-segment-timecode-parsed. */
+    parseTimecode(input: string, format?: string): number | null;
+    /** Formats seconds for consumer-owned fields using the player's timecode rules. Also emits cx-video-segment-timecode-formatted. */
+    formatTimecode(seconds: number, format?: string): string;
+    /** Updates the draft's in-point without moving its out-point. */
+    setSegmentStart(seconds: number): void;
+    /** Updates the draft's out-point without moving its in-point. */
+    setSegmentEnd(seconds: number): void;
+    private updateSegmentEdge;
+    /** Consumer calls only after saving successfully. Failed saves leave the draft intact. */
+    completeSegmentCreation(): void;
+    private segmentConfig;
     play(): void;
     pause(): void;
     setTime(time: number): void;

package/library/packages/organisms/src/content-builder/styleController.d.ts

@@ -16,12 +16,12 @@ export default class StyleController {
         name?: string | undefined;
         value?: any;
         id: string;
+        text?: string | undefined;
         unit?: string | undefined;
         attributes?: Record<string, any> | undefined;
         default?: any;
         max?: number | undefined;
         min?: number | undefined;
-        text?: string | undefined;
         placeholder?: string;
         category?: (string | import('grapesjs').BlockCategoryProperties) | undefined;
         step?: number | undefined;

package/library/packages/tools/src/tiptap/utils/md/schema.d.ts

@@ -9,4 +9,4 @@ import { Schema } from '@tiptap/pm/model';
  * Constructs the model cannot represent are not dropped: `html_block` and `html_inline` hold their
  * source verbatim and are replayed on the way out.
  */
-export declare const markdownSchema: Schema<"image" | "blockquote" | "table" | "text" | "heading" | "paragraph" | "frontmatter" | "doc" | "bullet_list" | "code_block" | "horizontal_rule" | "list_item" | "ordered_list" | "table_row" | "table_cell" | "table_header" | "hard_break" | "html_block" | "html_inline", "code" | "link" | "strike" | "em" | "strong">;
+export declare const markdownSchema: Schema<"image" | "text" | "blockquote" | "table" | "heading" | "paragraph" | "frontmatter" | "doc" | "bullet_list" | "code_block" | "horizontal_rule" | "list_item" | "ordered_list" | "table_row" | "table_cell" | "table_header" | "hard_break" | "html_block" | "html_inline", "code" | "link" | "strike" | "em" | "strong">;

package/library/packages/types/src/video-advanced.d.ts

@@ -1,10 +1,39 @@
+export declare enum VideoPlayerVariant {
+    Classic = "classic",
+    Default = "default",
+    Modern = "modern"
+}
 export declare enum VideoContextOutputKey {
+    ActiveTimelineSegmentId = "activeTimelineSegmentId",
     AnnotationLayer = "annotationLayer",
     EditMode = "editMode",
     EnableAnnotation = "enableAnnotation",
     EnableComment = "enableComment",
     IsCommentAnchorActive = "isCommentAnchorActive",
     ShowCommentSidebar = "showCommentSidebar",
+    ShowSegmentSidebar = "showSegmentSidebar",
     StartPosition = "startPosition",
     StopPosition = "stopPosition"
 }
+/** Segments on the source asset, independent of video-editor clips. Times are seconds. */
+export interface VideoTimelineSegment {
+    color?: string;
+    end: number;
+    id: string;
+    label: string;
+    start: number;
+    typeId?: string;
+}
+/** Consumer-owned inputs; visibility/format choices are local to a view session. */
+export interface VideoSegmentUIConfig {
+    activeId: string | null;
+    dropFrame: boolean;
+    enableSegmentCreation?: boolean;
+    enableSubclips?: boolean;
+    enabled: boolean;
+    label: string;
+    panelOpen: boolean;
+    segments: VideoTimelineSegment[];
+    session: number;
+    timecodeMode: string;
+}

package/library/react-web-component.d.ts

@@ -11276,6 +11276,34 @@
             */
             interface CxVideoAdvancedAttributes extends HTMLAttributes<CxVideoAdvanced> {
               
+        /**
+          * Selected marker ID is retained even when the consumer filters it out. @defaultValue null
+        */
+        activeTimelineSegmentId?: string;
+        /**
+          * Consumer-owned panel visibility. Closing it cancels the segment draft. @defaultValue false
+        */
+        showSegmentSidebar?: boolean;
+        /**
+          * Account-specific display label; API terminology remains segments. @defaultValue 'Subclips'
+        */
+        segmentLabel?: string;
+        /**
+          * Show Subclips controls in the new UI. @defaultValue false
+        */
+        enableSubclips?: boolean;
+        /**
+          * Show the timeline handles that start a new segment; enable only for users allowed to create segments. @defaultValue false
+        */
+        enableSegmentCreation?: boolean;
+        /**
+          * Workspace configuration: hide segment markers by default. @defaultValue false
+        */
+        noSegmentTimelineMarkers?: boolean;
+        /**
+          * Explicit source metadata: SMPTE drop-frame numbering at 29.97/59.94 fps. @defaultValue false
+        */
+        dropFrame?: boolean;
         /**
           * — strings —
         */
@@ -11449,9 +11477,13 @@
         */
         darkMode?: boolean;
         /**
-          * 
+          * Hide the comment sidebar toolbar button while keeping the other collab controls. @defaultValue false
+        */
+        hideCommentButton?: boolean;
+        /**
+          * Player layout. Classic enables chapter editing and selected ranges; modern uses the redesigned controls. @defaultValue 'default'
         */
-        useNewUi?: boolean;
+        variant?: "classic" | "default" | "modern";
         /**
           * 
         */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@orangelogic/design-system",
   "type": "module",
-  "version": "4.32.0",
+  "version": "4.33.0",
   "license": "UNLICENSED",
   "types": "library/types.d.ts",
   "scripts": {