@teambit/compositions 1.0.994 → 1.0.996

package/dist/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/dist/compositions.ui.runtime.d.ts

@@ -2,30 +2,42 @@ import type { ReactNode, ComponentType } from 'react';
 import type { SlotRegistry } from '@teambit/harmony';
 import type { ComponentUI } from '@teambit/component';
 import type { ComponentCompareUI } from '@teambit/component-compare';
-import type { UseSandboxPermission } from '@teambit/preview.ui.component-preview';
+import type { UsePreviewProps, UseSandboxPermission } from '@teambit/preview.ui.component-preview';
 import type { MenuBarWidget } from './compositions';
 export type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;
 export type EmptyStateSlot = SlotRegistry<ComponentType>;
 export type UsePreviewSandboxSlot = SlotRegistry<UseSandboxPermission>;
+export type UsePreviewPropsSlot = SlotRegistry<UsePreviewProps>;
 export declare class CompositionsUI {
     private menuBarWidgetSlot;
     private emptyStateSlot;
     private usePreviewSandboxSlot;
-    constructor(menuBarWidgetSlot: CompositionsMenuSlot, emptyStateSlot: EmptyStateSlot, usePreviewSandboxSlot: UsePreviewSandboxSlot);
+    private usePreviewPropsSlot;
+    constructor(menuBarWidgetSlot: CompositionsMenuSlot, emptyStateSlot: EmptyStateSlot, usePreviewSandboxSlot: UsePreviewSandboxSlot, usePreviewPropsSlot: UsePreviewPropsSlot);
     /**
      * register a new tester empty state. this allows to register a different empty state from each environment for example.
      */
     registerEmptyState(emptyStateComponent: ComponentType): this;
     registerMenuWidget(...widget: MenuBarWidget[]): void;
     registerPreviewSandbox(useSandboxPermission: UseSandboxPermission): void;
+    /**
+     * 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): void;
     getCompositionsCompare: () => import("react/jsx-runtime").JSX.Element;
     static dependencies: import("@teambit/harmony").Aspect[];
     static runtime: import("@teambit/harmony").RuntimeDefinition;
-    static slots: (((registerFn: () => string) => SlotRegistry<UseSandboxPermission>) | ((registerFn: () => string) => SlotRegistry<ComponentType>) | ((registerFn: () => string) => SlotRegistry<ReactNode>))[];
-    static provider([component, componentCompare]: [ComponentUI, ComponentCompareUI], config: {}, [compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot]: [
+    static slots: (((registerFn: () => string) => SlotRegistry<UseSandboxPermission>) | ((registerFn: () => string) => SlotRegistry<UsePreviewProps>) | ((registerFn: () => string) => SlotRegistry<ComponentType>) | ((registerFn: () => string) => SlotRegistry<ReactNode>))[];
+    static provider([component, componentCompare]: [ComponentUI, ComponentCompareUI], config: {}, [compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot, usePreviewPropsSlot]: [
         CompositionsMenuSlot,
         EmptyStateSlot,
-        UsePreviewSandboxSlot
+        UsePreviewSandboxSlot,
+        UsePreviewPropsSlot
     ]): Promise<CompositionsUI>;
 }
 export default CompositionsUI;

package/dist/compositions.ui.runtime.js

@@ -80,10 +80,11 @@ function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 class CompositionsUI {
-  constructor(menuBarWidgetSlot, emptyStateSlot, usePreviewSandboxSlot) {
+  constructor(menuBarWidgetSlot, emptyStateSlot, usePreviewSandboxSlot, usePreviewPropsSlot) {
     this.menuBarWidgetSlot = menuBarWidgetSlot;
     this.emptyStateSlot = emptyStateSlot;
     this.usePreviewSandboxSlot = usePreviewSandboxSlot;
+    this.usePreviewPropsSlot = usePreviewPropsSlot;
     _defineProperty(this, "getCompositionsCompare", () => {
       return /*#__PURE__*/_react().default.createElement(_compositionsUi2().CompositionCompare, {
         emptyState: this.emptyStateSlot,
@@ -109,11 +110,23 @@ class CompositionsUI {
   registerPreviewSandbox(useSandboxPermission) {
     this.usePreviewSandboxSlot.register(useSandboxPermission);
   }
-  static async provider([component, componentCompare], config, [compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot]) {
-    const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot);
+
+  /**
+   * 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) {
+    this.usePreviewPropsSlot.register(usePreviewProps);
+  }
+  static async provider([component, componentCompare], config, [compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot, usePreviewPropsSlot]) {
+    const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot, usePreviewPropsSlot);
     const section = new (_composition().CompositionsSection)(compositions, {
       menuBarWidgetSlot: compositions.menuBarWidgetSlot
-    }, emptyStateSlot, usePreviewSandboxSlot);
+    }, emptyStateSlot, usePreviewSandboxSlot, usePreviewPropsSlot);
     const compositionCompare = new (_compositionsUi().CompositionCompareSection)(compositions);
     component.registerRoute(section.route);
     component.registerNavigation(section.navigationLink, section.order);
@@ -125,13 +138,19 @@ 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;
   }
 }
 exports.CompositionsUI = CompositionsUI;
 _defineProperty(CompositionsUI, "dependencies", [_component().ComponentAspect, _componentCompare().ComponentCompareAspect]);
 _defineProperty(CompositionsUI, "runtime", _ui().UIRuntime);
-_defineProperty(CompositionsUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]);
+_defineProperty(CompositionsUI, "slots", [_harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType(), _harmony().Slot.withType()]);
 var _default = exports.default = CompositionsUI;
 _compositions().CompositionsAspect.addRuntime(CompositionsUI);
 

package/dist/compositions.ui.runtime.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireDefault","require","_harmony","_component","_ui","_compositionsUi","_compositionsUi2","_componentCompare","_composition","_compositions","_compositions2","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_defineProperty","_toPropertyKey","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","CompositionsUI","constructor","menuBarWidgetSlot","emptyStateSlot","usePreviewSandboxSlot","createElement","CompositionCompare","emptyState","PreviewView","compositionProps","CompositionContent","fullContentHeight","forceHeight","registerEmptyState","emptyStateComponent","register","registerMenuWidget","widget","registerPreviewSandbox","useSandboxPermission","provider","component","componentCompare","config","compositionMenuSlot","compositions","section","CompositionsSection","compositionCompare","CompositionCompareSection","registerRoute","route","registerNavigation","navigationLink","order","registerRoutes","manager","componentModel","host","add","exports","ComponentAspect","ComponentCompareAspect","UIRuntime","Slot","withType","_default","CompositionsAspect","addRuntime"],"sources":["compositions.ui.runtime.tsx"],"sourcesContent":["import type { ReactNode, ComponentType } from 'react';\nimport React from 'react';\nimport type { SlotRegistry } from '@teambit/harmony';\nimport { Slot } from '@teambit/harmony';\nimport type { ComponentUI } from '@teambit/component';\nimport { ComponentAspect } from '@teambit/component';\nimport { UIRuntime } from '@teambit/ui';\nimport { CompositionCompareSection } from '@teambit/compositions.ui.composition-compare-section';\nimport { CompositionCompare } from '@teambit/compositions.ui.composition-compare';\nimport type { ComponentCompareUI } from '@teambit/component-compare';\nimport { ComponentCompareAspect } from '@teambit/component-compare';\nimport type { UseSandboxPermission } from '@teambit/preview.ui.component-preview';\nimport { CompositionsSection } from './composition.section';\nimport { CompositionsAspect } from './compositions.aspect';\nimport type { MenuBarWidget } from './compositions';\nimport { CompositionContent } from './compositions';\n\nexport type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;\nexport type EmptyStateSlot = SlotRegistry<ComponentType>;\nexport type UsePreviewSandboxSlot = SlotRegistry<UseSandboxPermission>;\n\nexport class CompositionsUI {\n  constructor(\n    private menuBarWidgetSlot: CompositionsMenuSlot,\n    private emptyStateSlot: EmptyStateSlot,\n    private usePreviewSandboxSlot: UsePreviewSandboxSlot\n  ) {}\n  /**\n   * register a new tester empty state. this allows to register a different empty state from each environment for example.\n   */\n  registerEmptyState(emptyStateComponent: ComponentType) {\n    this.emptyStateSlot.register(emptyStateComponent);\n    return this;\n  }\n\n  registerMenuWidget(...widget: MenuBarWidget[]) {\n    this.menuBarWidgetSlot.register(widget);\n  }\n\n  registerPreviewSandbox(useSandboxPermission: UseSandboxPermission) {\n    this.usePreviewSandboxSlot.register(useSandboxPermission);\n  }\n\n  getCompositionsCompare = () => {\n    return (\n      <CompositionCompare\n        emptyState={this.emptyStateSlot}\n        PreviewView={(compositionProps) => {\n          return <CompositionContent {...compositionProps} fullContentHeight forceHeight={'100%'} />;\n        }}\n      />\n    );\n  };\n\n  static dependencies = [ComponentAspect, ComponentCompareAspect];\n  static runtime = UIRuntime;\n  static slots = [Slot.withType<ReactNode>(), Slot.withType<ComponentType>(), Slot.withType<UseSandboxPermission>()];\n\n  static async provider(\n    [component, componentCompare]: [ComponentUI, ComponentCompareUI],\n    config: {},\n    [compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot]: [\n      CompositionsMenuSlot,\n      EmptyStateSlot,\n      UsePreviewSandboxSlot,\n    ]\n  ) {\n    const compositions = new CompositionsUI(compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot);\n    const section = new CompositionsSection(\n      compositions,\n      { menuBarWidgetSlot: compositions.menuBarWidgetSlot },\n      emptyStateSlot,\n      usePreviewSandboxSlot\n    );\n    const compositionCompare = new CompositionCompareSection(compositions);\n    component.registerRoute(section.route);\n    component.registerNavigation(section.navigationLink, section.order);\n    componentCompare.registerNavigation(compositionCompare);\n    componentCompare.registerRoutes([compositionCompare.route]);\n    compositions.registerPreviewSandbox((manager, componentModel) => {\n      if (componentModel?.host === 'teambit.scope/scope') {\n        manager.add('allow-scripts');\n        manager.add('allow-same-origin');\n      }\n    });\n    return compositions;\n  }\n}\n\nexport default CompositionsUI;\n\nCompositionsAspect.addRuntime(CompositionsUI);\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_harmony","_component","_ui","_compositionsUi","_compositionsUi2","_componentCompare","_composition","_compositions","_compositions2","e","__esModule","default","_extends","Object","assign","bind","n","arguments","length","t","r","hasOwnProperty","call","apply","_defineProperty","_toPropertyKey","defineProperty","value","enumerable","configurable","writable","i","_toPrimitive","Symbol","toPrimitive","TypeError","String","Number","CompositionsUI","constructor","menuBarWidgetSlot","emptyStateSlot","usePreviewSandboxSlot","usePreviewPropsSlot","createElement","CompositionCompare","emptyState","PreviewView","compositionProps","CompositionContent","fullContentHeight","forceHeight","registerEmptyState","emptyStateComponent","register","registerMenuWidget","widget","registerPreviewSandbox","useSandboxPermission","registerPreviewProps","usePreviewProps","provider","component","componentCompare","config","compositionMenuSlot","compositions","section","CompositionsSection","compositionCompare","CompositionCompareSection","registerRoute","route","registerNavigation","navigationLink","order","registerRoutes","manager","componentModel","host","add","set","exports","ComponentAspect","ComponentCompareAspect","UIRuntime","Slot","withType","_default","CompositionsAspect","addRuntime"],"sources":["compositions.ui.runtime.tsx"],"sourcesContent":["import type { ReactNode, ComponentType } from 'react';\nimport React from 'react';\nimport type { SlotRegistry } from '@teambit/harmony';\nimport { Slot } from '@teambit/harmony';\nimport type { ComponentUI } from '@teambit/component';\nimport { ComponentAspect } from '@teambit/component';\nimport { UIRuntime } from '@teambit/ui';\nimport { CompositionCompareSection } from '@teambit/compositions.ui.composition-compare-section';\nimport { CompositionCompare } from '@teambit/compositions.ui.composition-compare';\nimport type { ComponentCompareUI } from '@teambit/component-compare';\nimport { ComponentCompareAspect } from '@teambit/component-compare';\nimport type { UsePreviewProps, UseSandboxPermission } from '@teambit/preview.ui.component-preview';\nimport { CompositionsSection } from './composition.section';\nimport { CompositionsAspect } from './compositions.aspect';\nimport type { MenuBarWidget } from './compositions';\nimport { CompositionContent } from './compositions';\n\nexport type CompositionsMenuSlot = SlotRegistry<MenuBarWidget[]>;\nexport type EmptyStateSlot = SlotRegistry<ComponentType>;\nexport type UsePreviewSandboxSlot = SlotRegistry<UseSandboxPermission>;\nexport type UsePreviewPropsSlot = SlotRegistry<UsePreviewProps>;\n\nexport class CompositionsUI {\n  constructor(\n    private menuBarWidgetSlot: CompositionsMenuSlot,\n    private emptyStateSlot: EmptyStateSlot,\n    private usePreviewSandboxSlot: UsePreviewSandboxSlot,\n    private usePreviewPropsSlot: UsePreviewPropsSlot\n  ) {}\n  /**\n   * register a new tester empty state. this allows to register a different empty state from each environment for example.\n   */\n  registerEmptyState(emptyStateComponent: ComponentType) {\n    this.emptyStateSlot.register(emptyStateComponent);\n    return this;\n  }\n\n  registerMenuWidget(...widget: MenuBarWidget[]) {\n    this.menuBarWidgetSlot.register(widget);\n  }\n\n  registerPreviewSandbox(useSandboxPermission: UseSandboxPermission) {\n    this.usePreviewSandboxSlot.register(useSandboxPermission);\n  }\n\n  /**\n   * register a per-component resolver for iframe attributes on the composition preview\n   * (`allow`, `referrerPolicy`, ...). The resolver runs at render time with the current\n   * `ComponentModel`; results from multiple resolvers merge with later keys winning. Use\n   * this to grant a specific subset of components extra Permissions Policy capabilities\n   * (e.g. `fullscreen` for chart/video components) without loosening the default for all\n   * components.\n   */\n  registerPreviewProps(usePreviewProps: UsePreviewProps) {\n    this.usePreviewPropsSlot.register(usePreviewProps);\n  }\n\n  getCompositionsCompare = () => {\n    return (\n      <CompositionCompare\n        emptyState={this.emptyStateSlot}\n        PreviewView={(compositionProps) => {\n          return <CompositionContent {...compositionProps} fullContentHeight forceHeight={'100%'} />;\n        }}\n      />\n    );\n  };\n\n  static dependencies = [ComponentAspect, ComponentCompareAspect];\n  static runtime = UIRuntime;\n  static slots = [\n    Slot.withType<ReactNode>(),\n    Slot.withType<ComponentType>(),\n    Slot.withType<UseSandboxPermission>(),\n    Slot.withType<UsePreviewProps>(),\n  ];\n\n  static async provider(\n    [component, componentCompare]: [ComponentUI, ComponentCompareUI],\n    config: {},\n    [compositionMenuSlot, emptyStateSlot, usePreviewSandboxSlot, usePreviewPropsSlot]: [\n      CompositionsMenuSlot,\n      EmptyStateSlot,\n      UsePreviewSandboxSlot,\n      UsePreviewPropsSlot,\n    ]\n  ) {\n    const compositions = new CompositionsUI(\n      compositionMenuSlot,\n      emptyStateSlot,\n      usePreviewSandboxSlot,\n      usePreviewPropsSlot\n    );\n    const section = new CompositionsSection(\n      compositions,\n      { menuBarWidgetSlot: compositions.menuBarWidgetSlot },\n      emptyStateSlot,\n      usePreviewSandboxSlot,\n      usePreviewPropsSlot\n    );\n    const compositionCompare = new CompositionCompareSection(compositions);\n    component.registerRoute(section.route);\n    component.registerNavigation(section.navigationLink, section.order);\n    componentCompare.registerNavigation(compositionCompare);\n    componentCompare.registerRoutes([compositionCompare.route]);\n    compositions.registerPreviewSandbox((manager, componentModel) => {\n      if (componentModel?.host === 'teambit.scope/scope') {\n        manager.add('allow-scripts');\n        manager.add('allow-same-origin');\n      }\n    });\n    // Default Permissions Policy: allow clipboard writes so copy-to-clipboard buttons in\n    // compositions work. Clipboard-read, camera, mic, geolocation, etc. remain denied. Other\n    // aspects may layer on (e.g. `fullscreen` for chart/video components).\n    compositions.registerPreviewProps((manager) => {\n      manager.set('allow', 'clipboard-write');\n    });\n    return compositions;\n  }\n}\n\nexport default CompositionsUI;\n\nCompositionsAspect.addRuntime(CompositionsUI);\n"],"mappings":"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","ignoreList":[]}

package/dist/{preview-1779298653501.js → preview-1779737067779.js}

@@ -1,5 +1,5 @@
-import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.994/dist/compositions.composition.js';
-import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.994/dist/compositions.docs.mdx';
+import * as compositions_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.996/dist/compositions.composition.js';
+import * as overview_0 from '/home/circleci/Library/Caches/Bit/capsules/8891be5ad/teambit.compositions_compositions@1.0.996/dist/compositions.docs.mdx';
 
 export const compositions = [compositions_0];
 export const overview = [overview_0];

package/dist/ui/compositions-panel/compositions-panel.d.ts

@@ -3,10 +3,13 @@ import type { Composition } from '../../composition';
 export type CompositionsPanelProps = {
     compositions: Composition[];
     onSelectComposition: (composition: Composition) => void;
+    onToggleLiveControls?: () => void;
+    hasLiveControls?: boolean;
+    liveControlsActive?: boolean;
     active?: Composition;
     url: string;
     isScaling?: boolean;
     includesEnvTemplate?: boolean;
     useNameParam?: boolean;
 } & React.HTMLAttributes<HTMLUListElement>;
-export declare function CompositionsPanel({ url, compositions, isScaling, onSelectComposition: onSelect, active, includesEnvTemplate, useNameParam, className, ...rest }: CompositionsPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function CompositionsPanel({ url, compositions, isScaling, onSelectComposition: onSelect, onToggleLiveControls, hasLiveControls, liveControlsActive, active, includesEnvTemplate, useNameParam, className, ...rest }: CompositionsPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/compositions-panel/compositions-panel.js

@@ -67,7 +67,7 @@ function _compositionsPanelModule() {
   };
   return data;
 }
-const _excluded = ["url", "compositions", "isScaling", "onSelectComposition", "active", "includesEnvTemplate", "useNameParam", "className"];
+const _excluded = ["url", "compositions", "isScaling", "onSelectComposition", "onToggleLiveControls", "hasLiveControls", "liveControlsActive", "active", "includesEnvTemplate", "useNameParam", "className"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
@@ -79,6 +79,9 @@ function CompositionsPanel(_ref) {
       compositions,
       isScaling,
       onSelectComposition: onSelect,
+      onToggleLiveControls,
+      hasLiveControls,
+      liveControlsActive,
       active,
       includesEnvTemplate,
       useNameParam,
@@ -124,7 +127,21 @@ function CompositionsPanel(_ref) {
       className: _compositionsPanelModule().default.name
     }, composition.displayName)), /*#__PURE__*/_react().default.createElement("div", {
       className: _compositionsPanelModule().default.itemActions
-    }, /*#__PURE__*/_react().default.createElement(_uiFoundationUi().MenuWidgetIcon, {
+    }, hasLiveControls && onToggleLiveControls && composition === active && /*#__PURE__*/_react().default.createElement(_designUi().Tooltip, {
+      content: liveControlsActive ? 'Hide live controls' : 'Show live controls',
+      placement: "bottom"
+    }, /*#__PURE__*/_react().default.createElement("button", {
+      type: "button",
+      "aria-label": liveControlsActive ? 'Hide live controls' : 'Show live controls',
+      className: (0, _classnames().default)(_compositionsPanelModule().default.actionIcon, _compositionsPanelModule().default.iconButton, liveControlsActive && _compositionsPanelModule().default.actionIconActive),
+      onClick: e => {
+        e.preventDefault();
+        e.stopPropagation();
+        onToggleLiveControls();
+      }
+    }, /*#__PURE__*/_react().default.createElement(_evangelistElements().Icon, {
+      of: "settings"
+    }))), /*#__PURE__*/_react().default.createElement(_uiFoundationUi().MenuWidgetIcon, {
       className: _compositionsPanelModule().default.actionIcon,
       icon: "Code",
       tooltipContent: "View source",

package/dist/ui/compositions-panel/compositions-panel.js.map

@@ -1 +1 @@
-{"version":3,"names":["_evangelistElements","data","require","_classnames","_interopRequireDefault","_reactRouterDom","_react","_interopRequireWildcard","_uiFoundationUi","_designUi","_baseReactNavigation","_compositionsUi","_compositionsPanelModule","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","CompositionsPanel","_ref","url","compositions","isScaling","onSelectComposition","onSelect","active","includesEnvTemplate","useNameParam","className","rest","setTimestamp","useLiveControls","shouldAddNameParam","location","useLocation","searchParams","useSearchParams","versionFromQueryParams","navigate","useNavigate","handleSelect","useCallback","selected","onCompositionCodeClicked","composition","preventDefault","queryParams","URLSearchParams","basePath","pathname","split","filepath","toString","identifier","createElement","styles","container","classNames","compositionsList","map","href","key","compositionItem","panelLink","onClick","name","displayName","itemActions","MenuWidgetIcon","actionIcon","icon","tooltipContent","Tooltip","content","placement","iconLink","target","rel","Icon","of"],"sources":["compositions-panel.tsx"],"sourcesContent":["import { Icon } from '@teambit/evangelist.elements.icon';\nimport classNames from 'classnames';\nimport { useSearchParams } from 'react-router-dom';\nimport React, { useCallback } from 'react';\nimport { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';\nimport { Tooltip } from '@teambit/design.ui.tooltip';\nimport { useNavigate, useLocation } from '@teambit/base-react.navigation.link';\nimport { useLiveControls } from '@teambit/compositions.ui.composition-live-controls';\nimport styles from './compositions-panel.module.scss';\nimport type { Composition } from '../../composition';\n\nexport type CompositionsPanelProps = {\n  compositions: Composition[];\n  onSelectComposition: (composition: Composition) => void;\n  active?: Composition;\n  url: string;\n  isScaling?: boolean;\n  includesEnvTemplate?: boolean;\n  useNameParam?: boolean;\n} & React.HTMLAttributes<HTMLUListElement>;\n\nexport function CompositionsPanel({\n  url,\n  compositions,\n  isScaling,\n  onSelectComposition: onSelect,\n  active,\n  includesEnvTemplate,\n  useNameParam,\n  className,\n  ...rest\n}: CompositionsPanelProps) {\n  const { setTimestamp } = useLiveControls();\n  const shouldAddNameParam = useNameParam || (isScaling && includesEnvTemplate === false);\n\n  const location = useLocation();\n  const [searchParams] = useSearchParams();\n  const versionFromQueryParams = searchParams.get('version');\n  const navigate = useNavigate();\n\n  const handleSelect = useCallback(\n    (selected: Composition) => {\n      onSelect && onSelect(selected);\n      if (selected === active) return;\n      setTimestamp(0);\n    },\n    [onSelect, active, setTimestamp]\n  );\n\n  const onCompositionCodeClicked = useCallback(\n    (composition: Composition) => (e: React.MouseEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      setTimestamp(0);\n      const queryParams = new URLSearchParams();\n      if (versionFromQueryParams) {\n        queryParams.set('version', versionFromQueryParams);\n      }\n      const basePath = location?.pathname.split('/~compositions')[0];\n      navigate(`${basePath}/~code/${composition.filepath}?${queryParams.toString()}#search=${composition.identifier}`);\n    },\n    [location?.pathname, navigate, setTimestamp, versionFromQueryParams]\n  );\n\n  return (\n    <div className={styles.container}>\n      <ul {...rest} className={classNames(styles.compositionsList, className)}>\n        {compositions.map((composition) => {\n          const href = shouldAddNameParam\n            ? `${url}&name=${composition.identifier}`\n            : `${url}&${composition.identifier}`;\n          return (\n            <li\n              key={composition.identifier}\n              className={classNames(styles.compositionItem, composition === active && styles.active)}\n            >\n              <a className={styles.panelLink} onClick={() => handleSelect(composition)}>\n                <span className={styles.name}>{composition.displayName}</span>\n              </a>\n              <div className={styles.itemActions}>\n                <MenuWidgetIcon\n                  className={styles.actionIcon}\n                  icon=\"Code\"\n                  tooltipContent=\"View source\"\n                  onClick={onCompositionCodeClicked(composition)}\n                />\n                <Tooltip content=\"Open in new tab\" placement=\"bottom\">\n                  <a\n                    className={classNames(styles.actionIcon, styles.iconLink)}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    href={href}\n                  >\n                    <Icon of=\"open-tab\" />\n                  </a>\n                </Tooltip>\n              </div>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_evangelistElements","data","require","_classnames","_interopRequireDefault","_reactRouterDom","_react","_interopRequireWildcard","_uiFoundationUi","_designUi","_baseReactNavigation","_compositionsUi","_compositionsPanelModule","_excluded","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","_extends","assign","bind","arguments","length","apply","_objectWithoutProperties","_objectWithoutPropertiesLoose","getOwnPropertySymbols","indexOf","propertyIsEnumerable","CompositionsPanel","_ref","url","compositions","isScaling","onSelectComposition","onSelect","onToggleLiveControls","hasLiveControls","liveControlsActive","active","includesEnvTemplate","useNameParam","className","rest","setTimestamp","useLiveControls","shouldAddNameParam","location","useLocation","searchParams","useSearchParams","versionFromQueryParams","navigate","useNavigate","handleSelect","useCallback","selected","onCompositionCodeClicked","composition","preventDefault","queryParams","URLSearchParams","basePath","pathname","split","filepath","toString","identifier","createElement","styles","container","classNames","compositionsList","map","href","key","compositionItem","panelLink","onClick","name","displayName","itemActions","Tooltip","content","placement","type","actionIcon","iconButton","actionIconActive","stopPropagation","Icon","of","MenuWidgetIcon","icon","tooltipContent","iconLink","target","rel"],"sources":["compositions-panel.tsx"],"sourcesContent":["import { Icon } from '@teambit/evangelist.elements.icon';\nimport classNames from 'classnames';\nimport { useSearchParams } from 'react-router-dom';\nimport React, { useCallback } from 'react';\nimport { MenuWidgetIcon } from '@teambit/ui-foundation.ui.menu-widget-icon';\nimport { Tooltip } from '@teambit/design.ui.tooltip';\nimport { useNavigate, useLocation } from '@teambit/base-react.navigation.link';\nimport { useLiveControls } from '@teambit/compositions.ui.composition-live-controls';\nimport styles from './compositions-panel.module.scss';\nimport type { Composition } from '../../composition';\n\nexport type CompositionsPanelProps = {\n  compositions: Composition[];\n  onSelectComposition: (composition: Composition) => void;\n  onToggleLiveControls?: () => void;\n  hasLiveControls?: boolean;\n  liveControlsActive?: boolean;\n  active?: Composition;\n  url: string;\n  isScaling?: boolean;\n  includesEnvTemplate?: boolean;\n  useNameParam?: boolean;\n} & React.HTMLAttributes<HTMLUListElement>;\n\nexport function CompositionsPanel({\n  url,\n  compositions,\n  isScaling,\n  onSelectComposition: onSelect,\n  onToggleLiveControls,\n  hasLiveControls,\n  liveControlsActive,\n  active,\n  includesEnvTemplate,\n  useNameParam,\n  className,\n  ...rest\n}: CompositionsPanelProps) {\n  const { setTimestamp } = useLiveControls();\n  const shouldAddNameParam = useNameParam || (isScaling && includesEnvTemplate === false);\n\n  const location = useLocation();\n  const [searchParams] = useSearchParams();\n  const versionFromQueryParams = searchParams.get('version');\n  const navigate = useNavigate();\n\n  const handleSelect = useCallback(\n    (selected: Composition) => {\n      onSelect && onSelect(selected);\n      if (selected === active) return;\n      setTimestamp(0);\n    },\n    [onSelect, active, setTimestamp]\n  );\n\n  const onCompositionCodeClicked = useCallback(\n    (composition: Composition) => (e: React.MouseEvent<HTMLDivElement>) => {\n      e.preventDefault();\n      setTimestamp(0);\n      const queryParams = new URLSearchParams();\n      if (versionFromQueryParams) {\n        queryParams.set('version', versionFromQueryParams);\n      }\n      const basePath = location?.pathname.split('/~compositions')[0];\n      navigate(`${basePath}/~code/${composition.filepath}?${queryParams.toString()}#search=${composition.identifier}`);\n    },\n    [location?.pathname, navigate, setTimestamp, versionFromQueryParams]\n  );\n\n  return (\n    <div className={styles.container}>\n      <ul {...rest} className={classNames(styles.compositionsList, className)}>\n        {compositions.map((composition) => {\n          const href = shouldAddNameParam\n            ? `${url}&name=${composition.identifier}`\n            : `${url}&${composition.identifier}`;\n          return (\n            <li\n              key={composition.identifier}\n              className={classNames(styles.compositionItem, composition === active && styles.active)}\n            >\n              <a className={styles.panelLink} onClick={() => handleSelect(composition)}>\n                <span className={styles.name}>{composition.displayName}</span>\n              </a>\n              <div className={styles.itemActions}>\n                {hasLiveControls && onToggleLiveControls && composition === active && (\n                  <Tooltip\n                    content={liveControlsActive ? 'Hide live controls' : 'Show live controls'}\n                    placement=\"bottom\"\n                  >\n                    <button\n                      type=\"button\"\n                      aria-label={liveControlsActive ? 'Hide live controls' : 'Show live controls'}\n                      className={classNames(\n                        styles.actionIcon,\n                        styles.iconButton,\n                        liveControlsActive && styles.actionIconActive\n                      )}\n                      onClick={(e) => {\n                        e.preventDefault();\n                        e.stopPropagation();\n                        onToggleLiveControls();\n                      }}\n                    >\n                      <Icon of=\"settings\" />\n                    </button>\n                  </Tooltip>\n                )}\n                <MenuWidgetIcon\n                  className={styles.actionIcon}\n                  icon=\"Code\"\n                  tooltipContent=\"View source\"\n                  onClick={onCompositionCodeClicked(composition)}\n                />\n                <Tooltip content=\"Open in new tab\" placement=\"bottom\">\n                  <a\n                    className={classNames(styles.actionIcon, styles.iconLink)}\n                    target=\"_blank\"\n                    rel=\"noopener noreferrer\"\n                    href={href}\n                  >\n                    <Icon of=\"open-tab\" />\n                  </a>\n                </Tooltip>\n              </div>\n            </li>\n          );\n        })}\n      </ul>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui/compositions-panel/compositions-panel.module.scss

@@ -121,6 +121,19 @@
   text-decoration: none;
 }
 
+.iconButton {
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+}
+
+.actionIconActive {
+  background: rgba(255, 255, 255, 0.15);
+  color: #ffffff !important;
+}
+
 // ─── Legacy compat ──────────────────────────────────────────────────────
 .liveControlsSkeleton {
   padding: 12px 16px;

package/dist/ui/compositions-panel/live-control-input.module.scss

@@ -53,13 +53,12 @@
 }
 
 .toggleControl {
-  width: 42px;
-  max-width: 42px;
-  min-width: 42px;
-}
-
-.toggleControl > * {
-  width: 100%;
+  // Let the Toggle keep its native dimensions. The component sizes its
+  // knob travel in `em`, so stretching the wrapper width without scaling
+  // the font-size leaves the knob short of the right edge in the "on"
+  // state.
+  display: inline-flex;
+  flex: 0 0 auto;
 }
 
 .rangeWrapper {

package/dist/ui/compositions-panel/overlay.module.scss

@@ -10,6 +10,10 @@
   box-shadow:
     0 4px 16px rgba(0, 0, 0, 0.08),
     0 1px 3px rgba(0, 0, 0, 0.06);
+  // Portaled into <body>, outside the BaseTheme wrapper that carries the
+  // app font. Set the family here so descendants (MenuItems, color swatches,
+  // etc.) inherit it via the global `font: inherit` reset.
+  font-family: 'CircularXX', 'Gill Sans', 'Gill Sans MT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
 .suppressNativeMenu {

package/package.json

@@ -1,21 +1,25 @@
 {
   "name": "@teambit/compositions",
-  "version": "1.0.994",
+  "version": "1.0.996",
   "homepage": "https://bit.cloud/teambit/compositions/compositions",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.compositions",
     "name": "compositions",
-    "version": "1.0.994"
+    "version": "1.0.996"
   },
   "dependencies": {
     "graphql-tag": "2.12.1",
     "lodash": "4.17.21",
+    "classnames": "^2.5.1",
     "lodash.head": "4.0.1",
     "query-string": "7.0.0",
-    "classnames": "^2.5.1",
     "@teambit/compositions.model.composition-id": "0.0.507",
     "@teambit/harmony": "0.4.7",
+    "@teambit/cli": "0.0.1327",
+    "@teambit/component.sources": "0.0.169",
+    "@teambit/legacy.consumer-component": "0.0.118",
+    "@teambit/toolbox.path.match-patterns": "0.0.28",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.504",
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.1",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
@@ -34,9 +38,10 @@
     "@teambit/documenter.ui.property-table": "4.1.11",
     "@teambit/evangelist.elements.icon": "1.0.5",
     "@teambit/mdx.ui.mdx-layout": "1.0.12",
-    "@teambit/preview.ui.component-preview": "1.0.34",
+    "@teambit/panels": "0.0.1330",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.234",
     "@teambit/ui-foundation.ui.hooks.use-is-mobile": "0.0.200",
+    "@teambit/compositions.ui.composition-compare-section": "0.0.105",
     "@teambit/compositions.ui.composition-compare": "0.0.265",
     "@teambit/api-reference.hooks.use-api": "0.0.57",
     "@teambit/workspace.ui.use-workspace-mode": "0.0.3",
@@ -49,22 +54,17 @@
     "@teambit/design.inputs.toggle-switch": "0.0.9",
     "@teambit/design.ui.input.color-picker": "0.0.56",
     "@teambit/base-ui.loaders.skeleton": "1.0.2",
-    "@teambit/component": "1.0.994",
-    "@teambit/graphql": "1.0.994",
-    "@teambit/cli": "0.0.1327",
-    "@teambit/component.sources": "0.0.169",
-    "@teambit/dev-files": "1.0.994",
-    "@teambit/envs": "1.0.994",
-    "@teambit/legacy.consumer-component": "0.0.118",
-    "@teambit/preview": "1.0.994",
-    "@teambit/schema": "1.0.994",
-    "@teambit/scope": "1.0.994",
-    "@teambit/toolbox.path.match-patterns": "0.0.28",
-    "@teambit/workspace": "1.0.994",
-    "@teambit/panels": "0.0.1330",
-    "@teambit/component-compare": "1.0.994",
-    "@teambit/compositions.ui.composition-compare-section": "0.0.105",
-    "@teambit/ui": "1.0.994"
+    "@teambit/component": "1.0.996",
+    "@teambit/graphql": "1.0.996",
+    "@teambit/dev-files": "1.0.996",
+    "@teambit/envs": "1.0.996",
+    "@teambit/preview": "1.0.996",
+    "@teambit/schema": "1.0.996",
+    "@teambit/scope": "1.0.996",
+    "@teambit/workspace": "1.0.996",
+    "@teambit/preview.ui.component-preview": "1.0.36",
+    "@teambit/component-compare": "1.0.996",
+    "@teambit/ui": "1.0.996"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",

package/ui/compositions-panel/compositions-panel.module.scss

@@ -121,6 +121,19 @@
   text-decoration: none;
 }
 
+.iconButton {
+  background: transparent;
+  border: none;
+  padding: 0;
+  color: inherit;
+  font: inherit;
+}
+
+.actionIconActive {
+  background: rgba(255, 255, 255, 0.15);
+  color: #ffffff !important;
+}
+
 // ─── Legacy compat ──────────────────────────────────────────────────────
 .liveControlsSkeleton {
   padding: 12px 16px;

package/ui/compositions-panel/compositions-panel.tsx

@@ -12,6 +12,9 @@ import type { Composition } from '../../composition';
 export type CompositionsPanelProps = {
   compositions: Composition[];
   onSelectComposition: (composition: Composition) => void;
+  onToggleLiveControls?: () => void;
+  hasLiveControls?: boolean;
+  liveControlsActive?: boolean;
   active?: Composition;
   url: string;
   isScaling?: boolean;
@@ -24,6 +27,9 @@ export function CompositionsPanel({
   compositions,
   isScaling,
   onSelectComposition: onSelect,
+  onToggleLiveControls,
+  hasLiveControls,
+  liveControlsActive,
   active,
   includesEnvTemplate,
   useNameParam,
@@ -77,6 +83,29 @@ export function CompositionsPanel({
                 <span className={styles.name}>{composition.displayName}</span>
               </a>
               <div className={styles.itemActions}>
+                {hasLiveControls && onToggleLiveControls && composition === active && (
+                  <Tooltip
+                    content={liveControlsActive ? 'Hide live controls' : 'Show live controls'}
+                    placement="bottom"
+                  >
+                    <button
+                      type="button"
+                      aria-label={liveControlsActive ? 'Hide live controls' : 'Show live controls'}
+                      className={classNames(
+                        styles.actionIcon,
+                        styles.iconButton,
+                        liveControlsActive && styles.actionIconActive
+                      )}
+                      onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onToggleLiveControls();
+                      }}
+                    >
+                      <Icon of="settings" />
+                    </button>
+                  </Tooltip>
+                )}
                 <MenuWidgetIcon
                   className={styles.actionIcon}
                   icon="Code"