@teambit/compositions 1.0.994 → 1.0.996

package/composition.section.tsx

@@ -6,6 +6,7 @@ import type {
   CompositionsMenuSlot,
   EmptyStateSlot,
   UsePreviewSandboxSlot,
+  UsePreviewPropsSlot,
 } from './compositions.ui.runtime';
 
 type Options = { menuBarWidgetSlot: CompositionsMenuSlot };
@@ -18,7 +19,8 @@ export class CompositionsSection implements Section {
     private compositions: CompositionsUI,
     private options: Options,
     private emptyStateSlot: EmptyStateSlot,
-    private usePreviewSandboxSlot: UsePreviewSandboxSlot
+    private usePreviewSandboxSlot: UsePreviewSandboxSlot,
+    private usePreviewPropsSlot: UsePreviewPropsSlot
   ) {}
 
   navigationLink = {
@@ -33,6 +35,7 @@ export class CompositionsSection implements Section {
         menuBarWidgets={this.options.menuBarWidgetSlot}
         emptyState={this.emptyStateSlot}
         usePreviewSandboxSlot={this.usePreviewSandboxSlot}
+        usePreviewPropsSlot={this.usePreviewPropsSlot}
         enableLiveControls
       />
     ),

package/compositions.module.scss

@@ -146,20 +146,37 @@
   border-top: 1px solid var(--bit-border-color-lightest, #eaeaec);
   background: var(--bit-bg-color, #ffffff);
   overflow: hidden;
+  min-height: 0;
+  // Never overflow the previewArea: if the inline `height` (or a user-set
+  // resize) ends up taller than the parent allows (e.g. browser zoom shrinks
+  // available space, or there are many controls), `max-height` wins and the
+  // tray stays inside its container so `trayBody`'s `overflow-y: auto` keeps
+  // working instead of the bottom rows getting clipped off-screen.
+  max-height: calc(100% - 80px);
+  box-sizing: border-box;
 }
 
-.trayDragHandle {
+.controlsTrayCollapsed {
+  // when collapsed, only show the header bar
+  height: auto;
+}
+
+// ─── Two-zone header: resize strip on top, click-to-collapse below ─────
+// The two zones are visually separated by a divider so the boundary is
+// obvious: top = "grab to resize", bottom = "click to collapse".
+
+.trayResizeStrip {
+  position: relative;
   flex-shrink: 0;
-  height: 8px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  height: 12px;
   cursor: ns-resize;
-  background: transparent;
-  transition: background 120ms ease;
+  user-select: none;
+  background: var(--surface01-color, rgba(0, 0, 0, 0.02));
+  border-bottom: 1px solid var(--bit-border-color-lightest, #eaeaec);
+  transition: background 140ms ease;
 
   &:hover {
-    background: rgba(0, 0, 0, 0.03);
+    background: var(--surface-hover-color, rgba(0, 0, 0, 0.05));
   }
 
   &:hover .trayDragBar {
@@ -169,19 +186,36 @@
 }
 
 .trayDragBar {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
   width: 32px;
   height: 3px;
   border-radius: 2px;
   background: var(--bit-border-color-lightest, #d0d0d3);
   transition: all 140ms ease;
+  pointer-events: none;
 }
 
-.trayHeader {
-  flex-shrink: 0;
+.trayHeaderInner {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 4px 14px 8px;
+  padding: 8px 14px;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background 140ms ease;
+
+  &:hover {
+    background: var(--surface-hover-color, rgba(0, 0, 0, 0.03));
+  }
+}
+
+// give the collapsed bar a bit more breathing room
+.controlsTrayCollapsed .trayHeaderInner {
+  padding: 10px 14px;
 }
 
 .trayTitleRow {
@@ -218,29 +252,31 @@
   line-height: 1;
 }
 
-.trayClose {
-  display: flex;
+.trayCollapseIcon {
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 4px;
-  border: none;
-  background: transparent;
+  width: 20px;
+  height: 20px;
+  font-size: 10px;
   color: var(--bit-text-color-light, #8b8d98);
-  cursor: pointer;
-  font-size: 12px;
-  padding: 0;
-  transition: all 120ms ease;
+  transform: rotate(90deg);
+  transform-origin: center;
+  transition: transform 200ms ease-in-out;
+  pointer-events: none;
+}
 
-  &:hover {
-    background: rgba(0, 0, 0, 0.06);
-    color: var(--bit-text-color-heavy, #1c2024);
-  }
+.trayCollapseIconCollapsed {
+  transform: rotate(-90deg);
 }
 
 .trayBody {
-  flex: 1;
+  // `flex-basis: auto` so the body contributes its natural content height to
+  // the tray's intrinsic size — without this, an auto-sized tray collapses to
+  // just the header. `min-height: 0` keeps `overflow-y: auto` working when
+  // the parent's `max-height` clamps the tray.
+  flex: 1 1 auto;
+  min-height: 0;
   overflow-y: auto;
   overflow-x: hidden;
 }

package/compositions.tsx

@@ -1,6 +1,7 @@
 import type { ReactNode } from 'react';
 import React, { useContext, useEffect, useState, useMemo, useRef, useCallback } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
+import classNames from 'classnames';
 import head from 'lodash.head';
 import queryString from 'query-string';
 import { ThemeContext } from '@teambit/documenter.theme.theme-context';
@@ -13,7 +14,11 @@ import { Tab, TabContainer, TabList, TabPanel } from '@teambit/panels';
 import { useDocs } from '@teambit/docs.ui.queries.get-docs';
 import { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';
 import { EmptyBox } from '@teambit/design.ui.empty-box';
-import { SandboxPermissionsAggregator, toPreviewUrl } from '@teambit/preview.ui.component-preview';
+import {
+  PreviewPropsAggregator,
+  SandboxPermissionsAggregator,
+  toPreviewUrl,
+} from '@teambit/preview.ui.component-preview';
 import { useIsMobile } from '@teambit/ui-foundation.ui.hooks.use-is-mobile';
 import { CompositionsMenuBar } from '@teambit/compositions.ui.compositions-menu-bar';
 import { CompositionContextProvider } from '@teambit/compositions.ui.hooks.use-composition';
@@ -26,8 +31,14 @@ import { OptionButton } from '@teambit/design.ui.input.option-button';
 import { StatusMessageCard } from '@teambit/design.ui.surfaces.status-message-card';
 import { Tooltip } from '@teambit/design.ui.tooltip';
 import { Icon } from '@teambit/evangelist.elements.icon';
+import type { UseLiveControlsResult } from '@teambit/compositions.ui.composition-live-controls';
 import { useLiveControls } from '@teambit/compositions.ui.composition-live-controls';
-import type { EmptyStateSlot, CompositionsMenuSlot, UsePreviewSandboxSlot } from './compositions.ui.runtime';
+import type {
+  EmptyStateSlot,
+  CompositionsMenuSlot,
+  UsePreviewSandboxSlot,
+  UsePreviewPropsSlot,
+} from './compositions.ui.runtime';
 import type { Composition } from './composition';
 import styles from './compositions.module.scss';
 import { ComponentComposition } from './ui';
@@ -47,6 +58,13 @@ export type CompositionsProp = {
   menuBarWidgets?: CompositionsMenuSlot;
   emptyState?: EmptyStateSlot;
   usePreviewSandboxSlot?: UsePreviewSandboxSlot;
+  /**
+   * per-component resolvers for iframe attributes on the composition preview (`allow`,
+   * `referrerPolicy`, ...). Each resolver gets the current `ComponentModel`; results merge
+   * with later registrations winning. Default `allow` (`clipboard-write`) lives on
+   * `ComponentPreview` and applies when no resolver overrides it.
+   */
+  usePreviewPropsSlot?: UsePreviewPropsSlot;
   enableLiveControls?: boolean;
 };
 
@@ -54,6 +72,7 @@ export function Compositions({
   menuBarWidgets,
   emptyState,
   usePreviewSandboxSlot,
+  usePreviewPropsSlot,
   enableLiveControls = true,
 }: CompositionsProp) {
   const component = useContext(ComponentContext);
@@ -74,6 +93,7 @@ export function Compositions({
 
   const properties = useDocs(component.id);
   const previewSandboxHooks = usePreviewSandboxSlot?.values() ?? [];
+  const previewPropsHooks = usePreviewPropsSlot?.values() ?? [];
   const isMobile = useIsMobile();
   const showSidebar = !isMobile && component.compositions.length > 0;
   const [isSidebarOpen, setSidebarOpenness] = useState(showSidebar);
@@ -97,28 +117,50 @@ export function Compositions({
 
   const queryParams = useMemo(() => queryString.stringify(compositionParams), [compositionParams]);
 
-  const [controlsTrayOpen, setControlsTrayOpen] = useState(false);
+  // Tracks compositions the user has explicitly collapsed. Anything not in
+  // this set defaults to expanded, which gives us "auto-open on load" as a
+  // pure derivation rather than an effect.
+  const [collapsedCompositions, setCollapsedCompositions] = useState<Set<string>>(() => new Set());
   const [isDraggingTray, setIsDraggingTray] = useState(false);
-  const trayRef = useRef<HTMLDivElement>(null);
-  const trayHeightRef = useRef(260);
+  const trayRef = useRef<HTMLDivElement | null>(null);
+  // `null` = auto-size to content (default). Becomes a number once the user
+  // drag-resizes — only then do we pin a fixed height.
+  const [trayHeight, setTrayHeight] = useState<number | null>(null);
   const { ready, defs, values, onChange } = useLiveControls();
 
-  const onTrayDragStart = useCallback((e: React.MouseEvent) => {
+  const onResizeStripMouseDown = useCallback((e: React.MouseEvent) => {
+    if (e.button !== 0) return;
     e.preventDefault();
     const startY = e.clientY;
-    const startHeight = trayHeightRef.current;
+    // Seed the drag from the tray's current rendered height — handles the
+    // initial auto-sized case (where `trayHeight` is still null).
+    const startHeight = trayRef.current?.offsetHeight ?? 0;
+    const parentEl = trayRef.current?.parentElement;
+    const parentHeight = parentEl?.clientHeight ?? window.innerHeight;
+    const maxHeight = Math.max(120, parentHeight - 80);
     setIsDraggingTray(true);
     document.body.style.cursor = 'ns-resize';
     document.body.style.userSelect = 'none';
+    // Mutate the tray's inline height directly and rAF-throttle, so dragging
+    // doesn't re-render the whole compositions tree (including the iframe)
+    // on every mousemove. State is committed once on mouseup.
+    let pendingHeight = startHeight;
+    let rafScheduled = false;
+    const applyHeight = () => {
+      rafScheduled = false;
+      if (trayRef.current) trayRef.current.style.height = `${pendingHeight}px`;
+    };
     const onMove = (ev: MouseEvent) => {
-      const next = Math.max(120, Math.min(600, startHeight + (startY - ev.clientY)));
-      trayHeightRef.current = next;
-      if (trayRef.current) {
-        trayRef.current.style.maxHeight = `${next}px`;
+      const delta = startY - ev.clientY;
+      pendingHeight = Math.max(120, Math.min(maxHeight, startHeight + delta));
+      if (!rafScheduled) {
+        rafScheduled = true;
+        requestAnimationFrame(applyHeight);
       }
     };
     const onUp = () => {
       setIsDraggingTray(false);
+      setTrayHeight(pendingHeight);
       document.body.style.cursor = '';
       document.body.style.userSelect = '';
       document.removeEventListener('mousemove', onMove);
@@ -148,7 +190,21 @@ export function Compositions({
   }, [enableLiveControls]);
 
   const currentCompositionHasControls = ready && defs.length > 0;
-  const showControlsTray = currentCompositionHasControls && controlsTrayOpen;
+  const currentCompositionIdentifier = currentComposition?.identifier;
+  const isTrayCollapsedForCurrent =
+    !!currentCompositionIdentifier && collapsedCompositions.has(currentCompositionIdentifier);
+  const showControlsTray = currentCompositionHasControls;
+  const isTrayCollapsed = showControlsTray && isTrayCollapsedForCurrent;
+
+  const toggleTrayCollapsed = useCallback(() => {
+    if (!currentCompositionIdentifier) return;
+    setCollapsedCompositions((prev) => {
+      const next = new Set(prev);
+      if (next.has(currentCompositionIdentifier)) next.delete(currentCompositionIdentifier);
+      else next.add(currentCompositionIdentifier);
+      return next;
+    });
+  }, [currentCompositionIdentifier]);
 
   return (
     <CompositionContextProvider queryParams={compositionParams} setQueryParams={setCompositionParams}>
@@ -160,16 +216,6 @@ export function Compositions({
                 <OptionButton icon="open-tab" />
               </Link>
             </Tooltip>
-            {currentCompositionHasControls && (
-              <Tooltip content={controlsTrayOpen ? 'Hide controls' : 'Show controls'} placement="bottom">
-                <button
-                  className={`${styles.toolbarButton} ${controlsTrayOpen ? styles.toolbarButtonActive : ''}`}
-                  onClick={() => setControlsTrayOpen((o) => !o)}
-                >
-                  <Icon of="settings" />
-                </button>
-              </Tooltip>
-            )}
           </CompositionsMenuBar>
           <SandboxPermissionsAggregator
             hooks={previewSandboxHooks}
@@ -178,37 +224,31 @@ export function Compositions({
           />
           <div className={styles.previewArea}>
             {isDraggingTray && <div className={styles.dragOverlay} />}
-            <CompositionContent
-              className={styles.compositionPanel}
-              emptyState={emptyState}
-              component={component}
-              selected={currentComposition}
-              queryParams={queryParams}
-              sandbox={sandboxValue}
-            />
+            <PreviewPropsAggregator hooks={previewPropsHooks} component={component}>
+              {(previewAttrs) => (
+                <CompositionContent
+                  {...previewAttrs}
+                  className={styles.compositionPanel}
+                  emptyState={emptyState}
+                  component={component}
+                  selected={currentComposition}
+                  queryParams={queryParams}
+                  sandbox={sandboxValue}
+                />
+              )}
+            </PreviewPropsAggregator>
             {showControlsTray && (
-              <div ref={trayRef} className={styles.controlsTray} style={{ maxHeight: trayHeightRef.current }}>
-                <div className={styles.trayDragHandle} onMouseDown={onTrayDragStart}>
-                  <div className={styles.trayDragBar} />
-                </div>
-                <div className={styles.trayHeader}>
-                  <div className={styles.trayTitleRow}>
-                    <Icon of="settings" className={styles.trayIcon} />
-                    <span className={styles.trayTitle}>Live Controls</span>
-                    {ready && defs.length > 0 && <span className={styles.trayBadge}>{defs.length}</span>}
-                  </div>
-                  <button className={styles.trayClose} onClick={() => setControlsTrayOpen(false)}>
-                    <Icon of="x" />
-                  </button>
-                </div>
-                <div className={styles.trayBody}>
-                  {ready ? (
-                    <LiveControls defs={defs} values={values} onChange={onChange} />
-                  ) : (
-                    <div className={styles.trayEmpty}>No live controls available for this composition</div>
-                  )}
-                </div>
-              </div>
+              <LiveControlsTray
+                trayRef={trayRef}
+                collapsed={isTrayCollapsed}
+                height={trayHeight}
+                ready={ready}
+                defs={defs}
+                values={values}
+                onChange={onChange}
+                onResizeStripMouseDown={onResizeStripMouseDown}
+                onToggleExpanded={toggleTrayCollapsed}
+              />
             )}
           </div>
         </Pane>
@@ -234,6 +274,9 @@ export function Compositions({
                   isScaling={isScaling}
                   useNameParam={useNameParam}
                   includesEnvTemplate={component.preview?.includesEnvTemplate}
+                  hasLiveControls={currentCompositionHasControls}
+                  liveControlsActive={currentCompositionHasControls && !isTrayCollapsedForCurrent}
+                  onToggleLiveControls={toggleTrayCollapsed}
                   onSelectComposition={(composition) => {
                     if (!currentComposition || !location) return;
                     const selectedCompositionFromUrl = params['*'];
@@ -252,9 +295,6 @@ export function Compositions({
                     }
                     const newPath = pathSegments.join('/');
                     navigate(`/${newPath}?${urlParams.toString()}`);
-                    // open the tray only on explicit user selection, so the
-                    // tray stays closed on navigation/tab return.
-                    setControlsTrayOpen(true);
                   }}
                   url={compositionUrl}
                   compositions={component.compositions}
@@ -272,6 +312,89 @@ export function Compositions({
   );
 }
 
+type LiveControlsTrayProps = {
+  trayRef: React.RefObject<HTMLDivElement | null>;
+  collapsed: boolean;
+  height: number | null;
+  ready: boolean;
+  defs: UseLiveControlsResult['defs'];
+  values: UseLiveControlsResult['values'];
+  onChange: UseLiveControlsResult['onChange'];
+  onResizeStripMouseDown: (e: React.MouseEvent) => void;
+  onToggleExpanded: () => void;
+};
+
+function LiveControlsTray({
+  trayRef,
+  collapsed,
+  height,
+  ready,
+  defs,
+  values,
+  onChange,
+  onResizeStripMouseDown,
+  onToggleExpanded,
+}: LiveControlsTrayProps) {
+  // height = null → let CSS size the tray to its content (with the max-height
+  // clamp doing the upper bound); height = number → user has drag-resized,
+  // pin to that.
+  const trayStyle = collapsed || height === null ? undefined : { height };
+  return (
+    <div
+      ref={trayRef}
+      className={classNames(styles.controlsTray, collapsed && styles.controlsTrayCollapsed)}
+      style={trayStyle}
+    >
+      {!collapsed && (
+        <div
+          className={styles.trayResizeStrip}
+          onMouseDown={onResizeStripMouseDown}
+          role="separator"
+          aria-orientation="horizontal"
+          aria-label="Resize live controls"
+          title="Drag to resize"
+        >
+          <div className={styles.trayDragBar} />
+        </div>
+      )}
+      <div
+        className={styles.trayHeaderInner}
+        onClick={onToggleExpanded}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            onToggleExpanded();
+          }
+        }}
+        title={collapsed ? 'Click to expand' : 'Click to collapse'}
+      >
+        <div className={styles.trayTitleRow}>
+          <Icon of="settings" className={styles.trayIcon} />
+          <span className={styles.trayTitle}>Live Controls</span>
+          {ready && defs.length > 0 && <span className={styles.trayBadge}>{defs.length}</span>}
+        </div>
+        <span
+          className={classNames(styles.trayCollapseIcon, collapsed && styles.trayCollapseIconCollapsed)}
+          aria-hidden
+        >
+          <Icon of="right-rounded-corners" />
+        </span>
+      </div>
+      {!collapsed && (
+        <div className={styles.trayBody}>
+          {ready ? (
+            <LiveControls defs={defs} values={values} onChange={onChange} />
+          ) : (
+            <div className={styles.trayEmpty}>No live controls available for this composition</div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
 export type CompositionContentProps = {
   component: ComponentModel;
   selected?: Composition;

package/compositions.ui.runtime.tsx

@@ -9,7 +9,7 @@ import { CompositionCompareSection } from '@teambit/compositions.ui.composition-
 import { CompositionCompare } from '@teambit/compositions.ui.composition-compare';
 import type { ComponentCompareUI } from '@teambit/component-compare';
 import { ComponentCompareAspect } from '@teambit/component-compare';
-import type { UseSandboxPermission } from '@teambit/preview.ui.component-preview';
+import type { UsePreviewProps, UseSandboxPermission } from '@teambit/preview.ui.component-preview';
 import { CompositionsSection } from './composition.section';
 import { CompositionsAspect } from './compositions.aspect';
 import type { MenuBarWidget } from './compositions';
@@ -18,12 +18,14 @@ import { CompositionContent } from './compositions';
 export type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;
 export type EmptyStateSlot = SlotRegistry<ComponentType>;
 export type UsePreviewSandboxSlot = SlotRegistry<UseSandboxPermission>;
+export type UsePreviewPropsSlot = SlotRegistry<UsePreviewProps>;
 
 export class CompositionsUI {
   constructor(
     private menuBarWidgetSlot: CompositionsMenuSlot,
     private emptyStateSlot: EmptyStateSlot,
-    private usePreviewSandboxSlot: UsePreviewSandboxSlot
+    private usePreviewSandboxSlot: UsePreviewSandboxSlot,
+    private usePreviewPropsSlot: UsePreviewPropsSlot
   ) {}
   /**
    * register a new tester empty state. this allows to register a different empty state from each environment for example.
@@ -41,6 +43,18 @@ export class CompositionsUI {
     this.usePreviewSandboxSlot.register(useSandboxPermission);
   }
 
+  /**
+   * register a per-component resolver for iframe attributes on the composition preview
+   * (`allow`, `referrerPolicy`, ...). The resolver runs at render time with the current
+   * `ComponentModel`; results from multiple resolvers merge with later keys winning. Use
+   * this to grant a specific subset of components extra Permissions Policy capabilities
+   * (e.g. `fullscreen` for chart/video components) without loosening the default for all
+   * components.
+   */
+  registerPreviewProps(usePreviewProps: UsePreviewProps) {
+    this.usePreviewPropsSlot.register(usePreviewProps);
+  }
+
   getCompositionsCompare = () => {
     return (
       <CompositionCompare
@@ -54,23 +68,35 @@ export class CompositionsUI {
 
   static dependencies = [ComponentAspect, ComponentCompareAspect];
   static runtime = UIRuntime;
-  static slots = [Slot.withType<ReactNode>(), Slot.withType<ComponentType>(), Slot.withType<UseSandboxPermission>()];
+  static slots = [
+    Slot.withType<ReactNode>(),
+    Slot.withType<ComponentType>(),
+    Slot.withType<UseSandboxPermission>(),
+    Slot.withType<UsePreviewProps>(),
+  ];
 
   static async provider(
     [component, componentCompare]: [ComponentUI, ComponentCompareUI],
     config: {},
-    [compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot]: [
+    [compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot, usePreviewPropsSlot]: [
       CompositionsMenuSlot,
       EmptyStateSlot,
       UsePreviewSandboxSlot,
+      UsePreviewPropsSlot,
     ]
   ) {
-    const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot);
+    const compositions = new CompositionsUI(
+      compositionMenuSlot,
+      emptyStateSlot,
+      usePreviewSandboxSlot,
+      usePreviewPropsSlot
+    );
     const section = new CompositionsSection(
       compositions,
       { menuBarWidgetSlot: compositions.menuBarWidgetSlot },
       emptyStateSlot,
-      usePreviewSandboxSlot
+      usePreviewSandboxSlot,
+      usePreviewPropsSlot
     );
     const compositionCompare = new CompositionCompareSection(compositions);
     component.registerRoute(section.route);
@@ -83,6 +109,12 @@ export class CompositionsUI {
         manager.add('allow-same-origin');
       }
     });
+    // Default Permissions Policy: allow clipboard writes so copy-to-clipboard buttons in
+    // compositions work. Clipboard-read, camera, mic, geolocation, etc. remain denied. Other
+    // aspects may layer on (e.g. `fullscreen` for chart/video components).
+    compositions.registerPreviewProps((manager) => {
+      manager.set('allow', 'clipboard-write');
+    });
     return compositions;
   }
 }

package/dist/composition.section.d.ts

@@ -1,5 +1,5 @@
 import type { Section } from '@teambit/component';
-import type { CompositionsUI, CompositionsMenuSlot, EmptyStateSlot, UsePreviewSandboxSlot } from './compositions.ui.runtime';
+import type { CompositionsUI, CompositionsMenuSlot, EmptyStateSlot, UsePreviewSandboxSlot, UsePreviewPropsSlot } from './compositions.ui.runtime';
 type Options = {
     menuBarWidgetSlot: CompositionsMenuSlot;
 };
@@ -11,11 +11,12 @@ export declare class CompositionsSection implements Section {
     private options;
     private emptyStateSlot;
     private usePreviewSandboxSlot;
+    private usePreviewPropsSlot;
     constructor(
     /**
      * simulations ui extension.
      */
-    compositions: CompositionsUI, options: Options, emptyStateSlot: EmptyStateSlot, usePreviewSandboxSlot: UsePreviewSandboxSlot);
+    compositions: CompositionsUI, options: Options, emptyStateSlot: EmptyStateSlot, usePreviewSandboxSlot: UsePreviewSandboxSlot, usePreviewPropsSlot: UsePreviewPropsSlot);
     navigationLink: {
         href: string;
         children: string;

package/dist/composition.section.js

@@ -27,11 +27,12 @@ class CompositionsSection {
   /**
    * simulations ui extension.
    */
-  compositions, options, emptyStateSlot, usePreviewSandboxSlot) {
+  compositions, options, emptyStateSlot, usePreviewSandboxSlot, usePreviewPropsSlot) {
     this.compositions = compositions;
     this.options = options;
     this.emptyStateSlot = emptyStateSlot;
     this.usePreviewSandboxSlot = usePreviewSandboxSlot;
+    this.usePreviewPropsSlot = usePreviewPropsSlot;
     _defineProperty(this, "navigationLink", {
       href: '~compositions',
       children: 'Preview'
@@ -42,6 +43,7 @@ class CompositionsSection {
         menuBarWidgets: this.options.menuBarWidgetSlot,
         emptyState: this.emptyStateSlot,
         usePreviewSandboxSlot: this.usePreviewSandboxSlot,
+        usePreviewPropsSlot: this.usePreviewPropsSlot,
         enableLiveControls: true
       })
     });

package/dist/composition.section.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireDefault","require","_compositions","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","CompositionsSection","constructor","compositions","options","emptyStateSlot","usePreviewSandboxSlot","href","children","path","element","createElement","Compositions","menuBarWidgets","menuBarWidgetSlot","emptyState","enableLiveControls","exports"],"sources":["composition.section.tsx"],"sourcesContent":["import type { Section } from '@teambit/component';\nimport React from 'react';\nimport { Compositions } from './compositions';\nimport type {\n  CompositionsUI,\n  CompositionsMenuSlot,\n  EmptyStateSlot,\n  UsePreviewSandboxSlot,\n} from './compositions.ui.runtime';\n\ntype Options = { menuBarWidgetSlot: CompositionsMenuSlot };\n\nexport class CompositionsSection implements Section {\n  constructor(\n    /**\n     * simulations ui extension.\n     */\n    private compositions: CompositionsUI,\n    private options: Options,\n    private emptyStateSlot: EmptyStateSlot,\n    private usePreviewSandboxSlot: UsePreviewSandboxSlot\n  ) {}\n\n  navigationLink = {\n    href: '~compositions',\n    children: 'Preview',\n  };\n\n  route = {\n    path: '~compositions/*',\n    element: (\n      <Compositions\n        menuBarWidgets={this.options.menuBarWidgetSlot}\n        emptyState={this.emptyStateSlot}\n        usePreviewSandboxSlot={this.usePreviewSandboxSlot}\n        enableLiveControls\n      />\n    ),\n  };\n\n  order = 20;\n}\n"],"mappings":";;;;;;AACA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,cAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,aAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA8C,SAAAC,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,gBAAAH,CAAA,EAAAI,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAE,cAAA,CAAAF,CAAA,MAAAJ,CAAA,GAAAO,MAAA,CAAAC,cAAA,CAAAR,CAAA,EAAAI,CAAA,IAAAK,KAAA,EAAAJ,CAAA,EAAAK,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAZ,CAAA,CAAAI,CAAA,IAAAC,CAAA,EAAAL,CAAA;AAAA,SAAAM,eAAAD,CAAA,QAAAQ,CAAA,GAAAC,YAAA,CAAAT,CAAA,uCAAAQ,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAC,aAAAT,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAL,CAAA,GAAAK,CAAA,CAAAU,MAAA,CAAAC,WAAA,kBAAAhB,CAAA,QAAAa,CAAA,GAAAb,CAAA,CAAAiB,IAAA,CAAAZ,CAAA,EAAAD,CAAA,uCAAAS,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAAd,CAAA,GAAAe,MAAA,GAAAC,MAAA,EAAAf,CAAA;AAUvC,MAAMgB,mBAAmB,CAAoB;EAClDC,WAAWA;EACT;AACJ;AACA;EACYC,YAA4B,EAC5BC,OAAgB,EAChBC,cAA8B,EAC9BC,qBAA4C,EACpD;IAAA,KAJQH,YAA4B,GAA5BA,YAA4B;IAAA,KAC5BC,OAAgB,GAAhBA,OAAgB;IAAA,KAChBC,cAA8B,GAA9BA,cAA8B;IAAA,KAC9BC,qBAA4C,GAA5CA,qBAA4C;IAAAvB,eAAA,yBAGrC;MACfwB,IAAI,EAAE,eAAe;MACrBC,QAAQ,EAAE;IACZ,CAAC;IAAAzB,eAAA,gBAEO;MACN0B,IAAI,EAAE,iBAAiB;MACvBC,OAAO,eACLnC,MAAA,GAAAO,OAAA,CAAA6B,aAAA,CAAChC,aAAA,GAAAiC,YAAY;QACXC,cAAc,EAAE,IAAI,CAACT,OAAO,CAACU,iBAAkB;QAC/CC,UAAU,EAAE,IAAI,CAACV,cAAe;QAChCC,qBAAqB,EAAE,IAAI,CAACA,qBAAsB;QAClDU,kBAAkB;MAAA,CACnB;IAEL,CAAC;IAAAjC,eAAA,gBAEO,EAAE;EAnBP;AAoBL;AAACkC,OAAA,CAAAhB,mBAAA,GAAAA,mBAAA","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_compositions","e","__esModule","default","_defineProperty","r","t","_toPropertyKey","Object","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","call","TypeError","String","Number","CompositionsSection","constructor","compositions","options","emptyStateSlot","usePreviewSandboxSlot","usePreviewPropsSlot","href","children","path","element","createElement","Compositions","menuBarWidgets","menuBarWidgetSlot","emptyState","enableLiveControls","exports"],"sources":["composition.section.tsx"],"sourcesContent":["import type { Section } from '@teambit/component';\nimport React from 'react';\nimport { Compositions } from './compositions';\nimport type {\n  CompositionsUI,\n  CompositionsMenuSlot,\n  EmptyStateSlot,\n  UsePreviewSandboxSlot,\n  UsePreviewPropsSlot,\n} from './compositions.ui.runtime';\n\ntype Options = { menuBarWidgetSlot: CompositionsMenuSlot };\n\nexport class CompositionsSection implements Section {\n  constructor(\n    /**\n     * simulations ui extension.\n     */\n    private compositions: CompositionsUI,\n    private options: Options,\n    private emptyStateSlot: EmptyStateSlot,\n    private usePreviewSandboxSlot: UsePreviewSandboxSlot,\n    private usePreviewPropsSlot: UsePreviewPropsSlot\n  ) {}\n\n  navigationLink = {\n    href: '~compositions',\n    children: 'Preview',\n  };\n\n  route = {\n    path: '~compositions/*',\n    element: (\n      <Compositions\n        menuBarWidgets={this.options.menuBarWidgetSlot}\n        emptyState={this.emptyStateSlot}\n        usePreviewSandboxSlot={this.usePreviewSandboxSlot}\n        usePreviewPropsSlot={this.usePreviewPropsSlot}\n        enableLiveControls\n      />\n    ),\n  };\n\n  order = 20;\n}\n"],"mappings":";;;;;;AACA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,cAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,aAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA8C,SAAAC,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,gBAAAH,CAAA,EAAAI,CAAA,EAAAC,CAAA,YAAAD,CAAA,GAAAE,cAAA,CAAAF,CAAA,MAAAJ,CAAA,GAAAO,MAAA,CAAAC,cAAA,CAAAR,CAAA,EAAAI,CAAA,IAAAK,KAAA,EAAAJ,CAAA,EAAAK,UAAA,MAAAC,YAAA,MAAAC,QAAA,UAAAZ,CAAA,CAAAI,CAAA,IAAAC,CAAA,EAAAL,CAAA;AAAA,SAAAM,eAAAD,CAAA,QAAAQ,CAAA,GAAAC,YAAA,CAAAT,CAAA,uCAAAQ,CAAA,GAAAA,CAAA,GAAAA,CAAA;AAAA,SAAAC,aAAAT,CAAA,EAAAD,CAAA,2BAAAC,CAAA,KAAAA,CAAA,SAAAA,CAAA,MAAAL,CAAA,GAAAK,CAAA,CAAAU,MAAA,CAAAC,WAAA,kBAAAhB,CAAA,QAAAa,CAAA,GAAAb,CAAA,CAAAiB,IAAA,CAAAZ,CAAA,EAAAD,CAAA,uCAAAS,CAAA,SAAAA,CAAA,YAAAK,SAAA,yEAAAd,CAAA,GAAAe,MAAA,GAAAC,MAAA,EAAAf,CAAA;AAWvC,MAAMgB,mBAAmB,CAAoB;EAClDC,WAAWA;EACT;AACJ;AACA;EACYC,YAA4B,EAC5BC,OAAgB,EAChBC,cAA8B,EAC9BC,qBAA4C,EAC5CC,mBAAwC,EAChD;IAAA,KALQJ,YAA4B,GAA5BA,YAA4B;IAAA,KAC5BC,OAAgB,GAAhBA,OAAgB;IAAA,KAChBC,cAA8B,GAA9BA,cAA8B;IAAA,KAC9BC,qBAA4C,GAA5CA,qBAA4C;IAAA,KAC5CC,mBAAwC,GAAxCA,mBAAwC;IAAAxB,eAAA,yBAGjC;MACfyB,IAAI,EAAE,eAAe;MACrBC,QAAQ,EAAE;IACZ,CAAC;IAAA1B,eAAA,gBAEO;MACN2B,IAAI,EAAE,iBAAiB;MACvBC,OAAO,eACLpC,MAAA,GAAAO,OAAA,CAAA8B,aAAA,CAACjC,aAAA,GAAAkC,YAAY;QACXC,cAAc,EAAE,IAAI,CAACV,OAAO,CAACW,iBAAkB;QAC/CC,UAAU,EAAE,IAAI,CAACX,cAAe;QAChCC,qBAAqB,EAAE,IAAI,CAACA,qBAAsB;QAClDC,mBAAmB,EAAE,IAAI,CAACA,mBAAoB;QAC9CU,kBAAkB;MAAA,CACnB;IAEL,CAAC;IAAAlC,eAAA,gBAEO,EAAE;EApBP;AAqBL;AAACmC,OAAA,CAAAjB,mBAAA,GAAAA,mBAAA","ignoreList":[]}