@teambit/compositions 1.0.957 → 1.0.958

package/compositions.module.scss

@@ -1,5 +1,4 @@
 @import '@teambit/ui-foundation.ui.constants.z-indexes/z-indexes.module.scss';
-$panelBg: #fafafa;
 
 .compositionsPage {
   height: 100%;
@@ -13,27 +12,250 @@ $panelBg: #fafafa;
 
 .left {
   min-width: 200px;
-
-  //cannot assign max-width directly to right side
   max-width: calc(100% - 200px);
-
   display: flex;
-  overflow-y: auto;
+  overflow: hidden;
   flex-direction: column;
+  background: var(--bit-bg-color, #ffffff);
 }
 
 .right {
-  background: var(--background-color, $panelBg);
+  background: var(--compositions-panel-bg, #f7f7f8);
   overflow-y: auto;
-  // this is to fix the right panel when it gets too big or too small
   min-width: 200px;
   max-width: calc(100% - 200px);
+  border-left: 1px solid var(--bit-border-color-lightest, #eaeaec);
 }
 
 .menuBar {
-  border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
+  border-bottom: 1px solid var(--bit-border-color-lightest, #eaeaec);
+  background: var(--bit-bg-color, #ffffff);
+  flex-shrink: 0;
+
+  > div {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  // normalize all OptionButton instances to match our toolbar style
+  :global([class*='optionButton']) {
+    width: 30px;
+    height: 30px;
+    padding: 0;
+    border-radius: 6px;
+    font-size: 14px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: transparent;
+    color: var(--bit-text-color-light, #8b8d98);
+    border: none;
+    cursor: pointer;
+    transition: all 140ms ease;
+
+    &:hover {
+      background: var(--surface-hover-color, #f0f0f2) !important;
+      color: var(--bit-text-color-heavy, #1c2024);
+    }
+
+    &:active {
+      transform: scale(0.95);
+    }
+
+    &:global(.active),
+    &[class*='active'] {
+      background: rgba(108, 92, 231, 0.1) !important;
+      color: var(--bit-accent-color, #6c5ce7) !important;
+    }
+  }
 }
 
+// ─── Toolbar ────────────────────────────────────────────────────────────
+.toolbar {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 4px;
+}
+
+.toolbarButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  border: none;
+  background: transparent;
+  color: var(--bit-text-color-light, #8b8d98);
+  cursor: pointer;
+  transition: all 140ms ease;
+  text-decoration: none;
+  font-size: 14px;
+  padding: 0;
+
+  &:hover {
+    background: var(--surface-hover-color, #f0f0f2);
+    color: var(--bit-text-color-heavy, #1c2024);
+  }
+
+  &:active {
+    background: var(--bit-border-color-lightest, #eaeaec);
+    transform: scale(0.95);
+  }
+}
+
+.toolbarButtonActive {
+  background: rgba(108, 92, 231, 0.1);
+  color: var(--bit-accent-color, #6c5ce7);
+
+  &:hover {
+    background: rgba(108, 92, 231, 0.15);
+    color: var(--bit-accent-color, #6c5ce7);
+  }
+}
+
+// ─── Preview + Controls Tray area ───────────────────────────────────────
+.previewArea {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.compositionPanel {
+  display: flex;
+  flex: 1;
+  min-height: 0;
+}
+
+.dragOverlay {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  cursor: ns-resize;
+}
+
+// ─── Controls Tray (bottom panel, like DevTools) ────────────────────────
+.controlsTray {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid var(--bit-border-color-lightest, #eaeaec);
+  background: var(--compositions-panel-bg, #f7f7f8);
+  overflow: hidden;
+}
+
+.trayDragHandle {
+  flex-shrink: 0;
+  height: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: ns-resize;
+  background: transparent;
+  transition: background 120ms ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.03);
+  }
+
+  &:hover .trayDragBar {
+    background: var(--bit-text-color-light, #8b8d98);
+    width: 48px;
+  }
+}
+
+.trayDragBar {
+  width: 32px;
+  height: 3px;
+  border-radius: 2px;
+  background: var(--bit-border-color-lightest, #d0d0d3);
+  transition: all 140ms ease;
+}
+
+.trayHeader {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 4px 14px 8px;
+}
+
+.trayTitleRow {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.trayIcon {
+  font-size: 13px;
+  color: var(--bit-accent-color, #6c5ce7);
+}
+
+.trayTitle {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  color: var(--bit-text-color-light, #8b8d98);
+}
+
+.trayBadge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  border-radius: 9px;
+  font-size: 10px;
+  font-weight: 600;
+  background: var(--bit-accent-color, #6c5ce7);
+  color: #ffffff;
+  line-height: 1;
+}
+
+.trayClose {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 4px;
+  border: none;
+  background: transparent;
+  color: var(--bit-text-color-light, #8b8d98);
+  cursor: pointer;
+  font-size: 12px;
+  padding: 0;
+  transition: all 120ms ease;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.06);
+    color: var(--bit-text-color-heavy, #1c2024);
+  }
+}
+
+.trayBody {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.trayEmpty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 24px 16px;
+  font-size: 12px;
+  color: var(--bit-text-color-light, #8b8d98);
+}
+
+// ─── Splitter ───────────────────────────────────────────────────────────
 .splitter {
   position: relative;
 
@@ -47,6 +269,7 @@ $panelBg: #fafafa;
   right: 0;
 }
 
+// ─── Tabs ───────────────────────────────────────────────────────────────
 .tabsContainer {
   display: flex;
   flex-direction: column;
@@ -78,6 +301,7 @@ $panelBg: #fafafa;
   }
 }
 
+// ─── Empty / error states ───────────────────────────────────────────────
 .noCompositionsPage {
   padding: 50px 40px 100px 40px;
   width: 100%;
@@ -97,8 +321,3 @@ $panelBg: #fafafa;
 .buildStatusMessage {
   margin: auto;
 }
-
-.compositionPanel {
-  display: flex;
-  flex: 1;
-}

package/compositions.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import React, { useContext, useEffect, useState, useMemo, useRef } from 'react';
+import React, { useContext, useEffect, useState, useMemo, useRef, useCallback } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
 import head from 'lodash.head';
 import queryString from 'query-string';
@@ -25,11 +25,14 @@ import { Link as BaseLink, useNavigate, useLocation } from '@teambit/base-react.
 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 { useLiveControls } from '@teambit/compositions.ui.composition-live-controls';
 import type { EmptyStateSlot, CompositionsMenuSlot, UsePreviewSandboxSlot } from './compositions.ui.runtime';
 import type { Composition } from './composition';
 import styles from './compositions.module.scss';
 import { ComponentComposition } from './ui';
 import { CompositionsPanel } from './ui/compositions-panel/compositions-panel';
+import { LiveControls } from './ui/compositions-panel/live-control-panel';
 import type { ComponentCompositionProps } from './ui/composition-preview';
 import { useDefaultControlsSchemaResponder } from './use-default-controls-schema-responder';
 
@@ -94,6 +97,37 @@ export function Compositions({
 
   const queryParams = useMemo(() => queryString.stringify(compositionParams), [compositionParams]);
 
+  const [controlsTrayOpen, setControlsTrayOpen] = useState(true);
+  const [isDraggingTray, setIsDraggingTray] = useState(false);
+  const trayRef = useRef<HTMLDivElement>(null);
+  const trayHeightRef = useRef(260);
+  const { ready, defs, values, onChange } = useLiveControls();
+
+  const onTrayDragStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault();
+    const startY = e.clientY;
+    const startHeight = trayHeightRef.current;
+    setIsDraggingTray(true);
+    document.body.style.cursor = 'ns-resize';
+    document.body.style.userSelect = 'none';
+    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.height = `${next}px`;
+      }
+    };
+    const onUp = () => {
+      setIsDraggingTray(false);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  }, []);
+
   // collapse sidebar when empty, reopen when not
   useEffect(() => setSidebarOpenness(showSidebar), [showSidebar]);
   useEffect(() => {
@@ -113,30 +147,70 @@ export function Compositions({
     });
   }, [enableLiveControls]);
 
+  const currentCompositionHasControls = ready && defs.length > 0;
+  const showControlsTray = currentCompositionHasControls && controlsTrayOpen;
+
   return (
     <CompositionContextProvider queryParams={compositionParams} setQueryParams={setCompositionParams}>
       <SplitPane layout={sidebarOpenness} size="80%" className={styles.compositionsPage}>
         <Pane className={styles.left}>
           <CompositionsMenuBar menuBarWidgets={menuBarWidgets} className={styles.menuBar}>
-            <Tooltip content={'Open in new tab'} placement="right">
-              <Link external href={currentCompositionFullUrl} className={styles.openInNewTab}>
+            <Tooltip content={'Open in new tab'} placement="bottom">
+              <Link external href={currentCompositionFullUrl} className={styles.toolbarButton}>
                 <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}
             onSandboxChange={setSandboxValue}
             component={component}
           />
-          <CompositionContent
-            className={styles.compositionPanel}
-            emptyState={emptyState}
-            component={component}
-            selected={currentComposition}
-            queryParams={queryParams}
-            sandbox={sandboxValue}
-          />
+          <div className={styles.previewArea}>
+            {isDraggingTray && <div className={styles.dragOverlay} />}
+            <CompositionContent
+              className={styles.compositionPanel}
+              emptyState={emptyState}
+              component={component}
+              selected={currentComposition}
+              queryParams={queryParams}
+              sandbox={sandboxValue}
+            />
+            {showControlsTray && (
+              <div ref={trayRef} className={styles.controlsTray} style={{ height: 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>
+            )}
+          </div>
         </Pane>
         <HoverSplitter className={styles.splitter}>
           <Collapser

package/dist/compositions.js

@@ -180,6 +180,20 @@ function _designUi4() {
   };
   return data;
 }
+function _evangelistElements() {
+  const data = require("@teambit/evangelist.elements.icon");
+  _evangelistElements = function () {
+    return data;
+  };
+  return data;
+}
+function _compositionsUi2() {
+  const data = require("@teambit/compositions.ui.composition-live-controls");
+  _compositionsUi2 = function () {
+    return data;
+  };
+  return data;
+}
 function _compositionsModule() {
   const data = _interopRequireDefault(require("./compositions.module.scss"));
   _compositionsModule = function () {
@@ -201,6 +215,13 @@ function _compositionsPanel() {
   };
   return data;
 }
+function _liveControlPanel() {
+  const data = require("./ui/compositions-panel/live-control-panel");
+  _liveControlPanel = function () {
+    return data;
+  };
+  return data;
+}
 function _useDefaultControlsSchemaResponder() {
   const data = require("./use-default-controls-schema-responder");
   _useDefaultControlsSchemaResponder = function () {
@@ -259,6 +280,40 @@ function Compositions({
     fullscreen: true
   });
   const queryParams = (0, _react().useMemo)(() => _queryString().default.stringify(compositionParams), [compositionParams]);
+  const [controlsTrayOpen, setControlsTrayOpen] = (0, _react().useState)(true);
+  const [isDraggingTray, setIsDraggingTray] = (0, _react().useState)(false);
+  const trayRef = (0, _react().useRef)(null);
+  const trayHeightRef = (0, _react().useRef)(260);
+  const {
+    ready,
+    defs,
+    values,
+    onChange
+  } = (0, _compositionsUi2().useLiveControls)();
+  const onTrayDragStart = (0, _react().useCallback)(e => {
+    e.preventDefault();
+    const startY = e.clientY;
+    const startHeight = trayHeightRef.current;
+    setIsDraggingTray(true);
+    document.body.style.cursor = 'ns-resize';
+    document.body.style.userSelect = 'none';
+    const onMove = ev => {
+      const next = Math.max(120, Math.min(600, startHeight + (startY - ev.clientY)));
+      trayHeightRef.current = next;
+      if (trayRef.current) {
+        trayRef.current.style.height = `${next}px`;
+      }
+    };
+    const onUp = () => {
+      setIsDraggingTray(false);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+    };
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  }, []);
 
   // collapse sidebar when empty, reopen when not
   (0, _react().useEffect)(() => setSidebarOpenness(showSidebar), [showSidebar]);
@@ -279,6 +334,8 @@ function Compositions({
       return next;
     });
   }, [enableLiveControls]);
+  const currentCompositionHasControls = ready && defs.length > 0;
+  const showControlsTray = currentCompositionHasControls && controlsTrayOpen;
   return /*#__PURE__*/_react().default.createElement(_compositionsUiHooks().CompositionContextProvider, {
     queryParams: compositionParams,
     setQueryParams: setCompositionParams
@@ -293,17 +350,29 @@ function Compositions({
     className: _compositionsModule().default.menuBar
   }, /*#__PURE__*/_react().default.createElement(_designUi4().Tooltip, {
     content: 'Open in new tab',
-    placement: "right"
+    placement: "bottom"
   }, /*#__PURE__*/_react().default.createElement(Link, {
     external: true,
     href: currentCompositionFullUrl,
-    className: _compositionsModule().default.openInNewTab
+    className: _compositionsModule().default.toolbarButton
   }, /*#__PURE__*/_react().default.createElement(_designUiInput().OptionButton, {
     icon: "open-tab"
+  }))), currentCompositionHasControls && /*#__PURE__*/_react().default.createElement(_designUi4().Tooltip, {
+    content: controlsTrayOpen ? 'Hide controls' : 'Show controls',
+    placement: "bottom"
+  }, /*#__PURE__*/_react().default.createElement("button", {
+    className: `${_compositionsModule().default.toolbarButton} ${controlsTrayOpen ? _compositionsModule().default.toolbarButtonActive : ''}`,
+    onClick: () => setControlsTrayOpen(o => !o)
+  }, /*#__PURE__*/_react().default.createElement(_evangelistElements().Icon, {
+    of: "settings"
   })))), /*#__PURE__*/_react().default.createElement(_previewUi().SandboxPermissionsAggregator, {
     hooks: previewSandboxHooks,
     onSandboxChange: setSandboxValue,
     component: component
+  }), /*#__PURE__*/_react().default.createElement("div", {
+    className: _compositionsModule().default.previewArea
+  }, isDraggingTray && /*#__PURE__*/_react().default.createElement("div", {
+    className: _compositionsModule().default.dragOverlay
   }), /*#__PURE__*/_react().default.createElement(CompositionContent, {
     className: _compositionsModule().default.compositionPanel,
     emptyState: emptyState,
@@ -311,7 +380,42 @@ function Compositions({
     selected: currentComposition,
     queryParams: queryParams,
     sandbox: sandboxValue
-  })), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane2().HoverSplitter, {
+  }), showControlsTray && /*#__PURE__*/_react().default.createElement("div", {
+    ref: trayRef,
+    className: _compositionsModule().default.controlsTray,
+    style: {
+      height: trayHeightRef.current
+    }
+  }, /*#__PURE__*/_react().default.createElement("div", {
+    className: _compositionsModule().default.trayDragHandle,
+    onMouseDown: onTrayDragStart
+  }, /*#__PURE__*/_react().default.createElement("div", {
+    className: _compositionsModule().default.trayDragBar
+  })), /*#__PURE__*/_react().default.createElement("div", {
+    className: _compositionsModule().default.trayHeader
+  }, /*#__PURE__*/_react().default.createElement("div", {
+    className: _compositionsModule().default.trayTitleRow
+  }, /*#__PURE__*/_react().default.createElement(_evangelistElements().Icon, {
+    of: "settings",
+    className: _compositionsModule().default.trayIcon
+  }), /*#__PURE__*/_react().default.createElement("span", {
+    className: _compositionsModule().default.trayTitle
+  }, "Live Controls"), ready && defs.length > 0 && /*#__PURE__*/_react().default.createElement("span", {
+    className: _compositionsModule().default.trayBadge
+  }, defs.length)), /*#__PURE__*/_react().default.createElement("button", {
+    className: _compositionsModule().default.trayClose,
+    onClick: () => setControlsTrayOpen(false)
+  }, /*#__PURE__*/_react().default.createElement(_evangelistElements().Icon, {
+    of: "x"
+  }))), /*#__PURE__*/_react().default.createElement("div", {
+    className: _compositionsModule().default.trayBody
+  }, ready ? /*#__PURE__*/_react().default.createElement(_liveControlPanel().LiveControls, {
+    defs: defs,
+    values: values,
+    onChange: onChange
+  }) : /*#__PURE__*/_react().default.createElement("div", {
+    className: _compositionsModule().default.trayEmpty
+  }, "No live controls available for this composition"))))), /*#__PURE__*/_react().default.createElement(_baseUiSurfacesSplitPane2().HoverSplitter, {
     className: _compositionsModule().default.splitter
   }, /*#__PURE__*/_react().default.createElement(_uiFoundationUiButtons().Collapser, {
     placement: "left",