@teambit/compositions 1.0.893 → 1.0.895

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

@@ -36,13 +36,15 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
 function LiveControls({
   defs,
   values,
-  onChange
+  onChange,
+  renderLabel
 }) {
   return /*#__PURE__*/_react().default.createElement("ul", {
     className: (0, _classnames().default)(_liveControlPanelModule().default.container)
   }, defs.map(field => {
     const key = field.id;
     const InputComponent = (0, _liveControlInput().getInputComponent)(field.input || 'text');
+    const labelContent = renderLabel ? renderLabel(field) : field.label || field.id;
     return /*#__PURE__*/_react().default.createElement("li", {
       key: key,
       className: (0, _classnames().default)(_liveControlPanelModule().default.item)
@@ -50,7 +52,7 @@ function LiveControls({
       className: (0, _classnames().default)(_liveControlPanelModule().default.label)
     }, /*#__PURE__*/_react().default.createElement("label", {
       htmlFor: `control-${key}`
-    }, field.label || field.id)), /*#__PURE__*/_react().default.createElement("div", null, /*#__PURE__*/_react().default.createElement(InputComponent, {
+    }, labelContent)), /*#__PURE__*/_react().default.createElement("div", null, /*#__PURE__*/_react().default.createElement(InputComponent, {
       id: `control-${key}`,
       value: values[key],
       onChange: v => onChange(key, v),

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

@@ -1 +1 @@
-{"version":3,"names":["_react","data","_interopRequireDefault","require","_classnames","_liveControlPanelModule","_liveControlInput","e","__esModule","default","LiveControls","defs","values","onChange","createElement","className","classNames","styles","container","map","field","key","id","InputComponent","getInputComponent","input","item","label","htmlFor","value","v","meta"],"sources":["live-control-panel.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { type Control } from '@teambit/compositions.ui.composition-live-controls';\n\nimport styles from './live-control-panel.module.scss';\nimport { getInputComponent } from './live-control-input';\n\nexport function LiveControls({\n  defs,\n  values,\n  onChange,\n}: {\n  defs: Array<Control>;\n  values: Record<string, any>;\n  onChange: (key: string, value: any) => void;\n}) {\n  return (\n    <ul className={classNames(styles.container)}>\n      {defs.map((field) => {\n        const key = field.id;\n        const InputComponent = getInputComponent(field.input || 'text');\n        return (\n          <li key={key} className={classNames(styles.item)}>\n            <div className={classNames(styles.label)}>\n              <label htmlFor={`control-${key}`}>{field.label || field.id}</label>\n            </div>\n            <div>\n              <InputComponent\n                id={`control-${key}`}\n                value={values[key]}\n                onChange={(v: any) => onChange(key, v)}\n                meta={field}\n              />\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,YAAA;EAAA,MAAAH,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAC,WAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAGA,SAAAI,wBAAA;EAAA,MAAAJ,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAE,uBAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,kBAAA;EAAA,MAAAL,IAAA,GAAAE,OAAA;EAAAG,iBAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAyD,SAAAC,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAElD,SAASG,YAAYA,CAAC;EAC3BC,IAAI;EACJC,MAAM;EACNC;AAKF,CAAC,EAAE;EACD,oBACEb,MAAA,GAAAS,OAAA,CAAAK,aAAA;IAAIC,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACC,SAAS;EAAE,GACzCP,IAAI,CAACQ,GAAG,CAAEC,KAAK,IAAK;IACnB,MAAMC,GAAG,GAAGD,KAAK,CAACE,EAAE;IACpB,MAAMC,cAAc,GAAG,IAAAC,qCAAiB,EAACJ,KAAK,CAACK,KAAK,IAAI,MAAM,CAAC;IAC/D,oBACEzB,MAAA,GAAAS,OAAA,CAAAK,aAAA;MAAIO,GAAG,EAAEA,GAAI;MAACN,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACS,IAAI;IAAE,gBAC/C1B,MAAA,GAAAS,OAAA,CAAAK,aAAA;MAAKC,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACU,KAAK;IAAE,gBACvC3B,MAAA,GAAAS,OAAA,CAAAK,aAAA;MAAOc,OAAO,EAAE,WAAWP,GAAG;IAAG,GAAED,KAAK,CAACO,KAAK,IAAIP,KAAK,CAACE,EAAU,CAC/D,CAAC,eACNtB,MAAA,GAAAS,OAAA,CAAAK,aAAA,2BACEd,MAAA,GAAAS,OAAA,CAAAK,aAAA,CAACS,cAAc;MACbD,EAAE,EAAE,WAAWD,GAAG,EAAG;MACrBQ,KAAK,EAAEjB,MAAM,CAACS,GAAG,CAAE;MACnBR,QAAQ,EAAGiB,CAAM,IAAKjB,QAAQ,CAACQ,GAAG,EAAES,CAAC,CAAE;MACvCC,IAAI,EAAEX;IAAM,CACb,CACE,CACH,CAAC;EAET,CAAC,CACC,CAAC;AAET","ignoreList":[]}
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_classnames","_liveControlPanelModule","_liveControlInput","e","__esModule","default","LiveControls","defs","values","onChange","renderLabel","createElement","className","classNames","styles","container","map","field","key","id","InputComponent","getInputComponent","input","labelContent","label","item","htmlFor","value","v","meta"],"sources":["live-control-panel.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { type Control } from '@teambit/compositions.ui.composition-live-controls';\n\nimport styles from './live-control-panel.module.scss';\nimport { getInputComponent } from './live-control-input';\n\nexport function LiveControls({\n  defs,\n  values,\n  onChange,\n  renderLabel,\n}: {\n  defs: Array<Control>;\n  values: Record<string, any>;\n  onChange: (key: string, value: any) => void;\n  renderLabel?: (field: Control) => React.ReactNode;\n}) {\n  return (\n    <ul className={classNames(styles.container)}>\n      {defs.map((field) => {\n        const key = field.id;\n        const InputComponent = getInputComponent(field.input || 'text');\n        const labelContent = renderLabel ? renderLabel(field) : field.label || field.id;\n        return (\n          <li key={key} className={classNames(styles.item)}>\n            <div className={classNames(styles.label)}>\n              <label htmlFor={`control-${key}`}>{labelContent}</label>\n            </div>\n            <div>\n              <InputComponent\n                id={`control-${key}`}\n                value={values[key]}\n                onChange={(v: any) => onChange(key, v)}\n                meta={field}\n              />\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,YAAA;EAAA,MAAAH,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAC,WAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAGA,SAAAI,wBAAA;EAAA,MAAAJ,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAE,uBAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,kBAAA;EAAA,MAAAL,IAAA,GAAAE,OAAA;EAAAG,iBAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAyD,SAAAC,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAElD,SAASG,YAAYA,CAAC;EAC3BC,IAAI;EACJC,MAAM;EACNC,QAAQ;EACRC;AAMF,CAAC,EAAE;EACD,oBACEd,MAAA,GAAAS,OAAA,CAAAM,aAAA;IAAIC,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACC,SAAS;EAAE,GACzCR,IAAI,CAACS,GAAG,CAAEC,KAAK,IAAK;IACnB,MAAMC,GAAG,GAAGD,KAAK,CAACE,EAAE;IACpB,MAAMC,cAAc,GAAG,IAAAC,qCAAiB,EAACJ,KAAK,CAACK,KAAK,IAAI,MAAM,CAAC;IAC/D,MAAMC,YAAY,GAAGb,WAAW,GAAGA,WAAW,CAACO,KAAK,CAAC,GAAGA,KAAK,CAACO,KAAK,IAAIP,KAAK,CAACE,EAAE;IAC/E,oBACEvB,MAAA,GAAAS,OAAA,CAAAM,aAAA;MAAIO,GAAG,EAAEA,GAAI;MAACN,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACW,IAAI;IAAE,gBAC/C7B,MAAA,GAAAS,OAAA,CAAAM,aAAA;MAAKC,SAAS,EAAE,IAAAC,qBAAU,EAACC,iCAAM,CAACU,KAAK;IAAE,gBACvC5B,MAAA,GAAAS,OAAA,CAAAM,aAAA;MAAOe,OAAO,EAAE,WAAWR,GAAG;IAAG,GAAEK,YAAoB,CACpD,CAAC,eACN3B,MAAA,GAAAS,OAAA,CAAAM,aAAA,2BACEf,MAAA,GAAAS,OAAA,CAAAM,aAAA,CAACS,cAAc;MACbD,EAAE,EAAE,WAAWD,GAAG,EAAG;MACrBS,KAAK,EAAEnB,MAAM,CAACU,GAAG,CAAE;MACnBT,QAAQ,EAAGmB,CAAM,IAAKnB,QAAQ,CAACS,GAAG,EAAEU,CAAC,CAAE;MACvCC,IAAI,EAAEZ;IAAM,CACb,CACE,CACH,CAAC;EAET,CAAC,CACC,CAAC;AAET","ignoreList":[]}

package/dist/ui/compositions-panel/live-controls-diff-panel.d.ts

@@ -0,0 +1,13 @@
+type PanelStatus = 'loading' | 'available' | 'empty';
+export type LiveControlsDiffPanelProps = {
+    resetKey?: string;
+    baseChannel?: string;
+    compareChannel?: string;
+    commonLabel?: string;
+    baseLabel?: string;
+    compareLabel?: string;
+    showEmptyState?: boolean;
+    onStatusChange?: (status: PanelStatus) => void;
+};
+export declare function LiveControlsDiffPanel({ resetKey, baseChannel, compareChannel, commonLabel, baseLabel, compareLabel, showEmptyState, onStatusChange, }: LiveControlsDiffPanelProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/ui/compositions-panel/live-controls-diff-panel.js

@@ -0,0 +1,220 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LiveControlsDiffPanel = LiveControlsDiffPanel;
+function _react() {
+  const data = _interopRequireWildcard(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _compositionsUi() {
+  const data = require("@teambit/compositions.ui.composition-live-controls");
+  _compositionsUi = function () {
+    return data;
+  };
+  return data;
+}
+function _baseUiLoaders() {
+  const data = require("@teambit/base-ui.loaders.skeleton");
+  _baseUiLoaders = function () {
+    return data;
+  };
+  return data;
+}
+function _evangelistElements() {
+  const data = require("@teambit/evangelist.elements.icon");
+  _evangelistElements = function () {
+    return data;
+  };
+  return data;
+}
+function _classnames() {
+  const data = _interopRequireDefault(require("classnames"));
+  _classnames = function () {
+    return data;
+  };
+  return data;
+}
+function _liveControlInput() {
+  const data = require("./live-control-input");
+  _liveControlInput = function () {
+    return data;
+  };
+  return data;
+}
+function _liveControlsDiffPanelModule() {
+  const data = _interopRequireDefault(require("./live-controls-diff-panel.module.scss"));
+  _liveControlsDiffPanelModule = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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); }
+const WAIT_FOR_CONTROLS_MS = 1200;
+function LiveControlsDiffPanel({
+  resetKey,
+  baseChannel,
+  compareChannel,
+  commonLabel = 'Common',
+  baseLabel = 'Base',
+  compareLabel = 'Compare',
+  showEmptyState = true,
+  onStatusChange
+}) {
+  const lastResetKeyRef = (0, _react().useRef)(null);
+  const [isWaitingForFreshData, setIsWaitingForFreshData] = (0, _react().useState)(true);
+  const waitTimeoutRef = (0, _react().useRef)(null);
+  const currentKey = `${baseChannel || ''}-${compareChannel || ''}-${resetKey || ''}`;
+  const model = (0, _react().useMemo)(() => new (_compositionsUi().DiffControlsModel)(baseChannel, compareChannel), [baseChannel, compareChannel]);
+  const allChannels = (0, _react().useMemo)(() => {
+    const channels = [model.baseChannel, model.compareChannel];
+    if (!channels.includes('default')) channels.push('default');
+    return [...new Set(channels)];
+  }, [model.baseChannel, model.compareChannel]);
+  const combined = (0, _compositionsUi().useLiveControls)(allChannels);
+  const {
+    ready: combinedReady,
+    setTimestamp
+  } = combined;
+  (0, _react().useEffect)(() => {
+    if (lastResetKeyRef.current !== currentKey) {
+      lastResetKeyRef.current = currentKey;
+      setIsWaitingForFreshData(true);
+      setTimestamp(0);
+    }
+  }, [currentKey, setTimestamp]);
+  const channelsReady = Boolean(baseChannel && compareChannel);
+  const registryReady = combinedReady || model.isReady;
+  const controls = model.controls;
+  const hasControls = controls.length > 0;
+  const hasSubscribers = model.hasSubscribers;
+  const prevRegistryReady = (0, _react().useRef)(registryReady);
+  (0, _react().useEffect)(() => {
+    if (registryReady && !prevRegistryReady.current && isWaitingForFreshData) {
+      setIsWaitingForFreshData(false);
+    }
+    prevRegistryReady.current = registryReady;
+  }, [registryReady, isWaitingForFreshData]);
+  (0, _react().useEffect)(() => {
+    if (!channelsReady || registryReady || !isWaitingForFreshData) {
+      if (waitTimeoutRef.current !== null) {
+        window.clearTimeout(waitTimeoutRef.current);
+        waitTimeoutRef.current = null;
+      }
+      return;
+    }
+    waitTimeoutRef.current = window.setTimeout(() => {
+      setIsWaitingForFreshData(false);
+      waitTimeoutRef.current = null;
+    }, WAIT_FOR_CONTROLS_MS);
+    return () => {
+      if (waitTimeoutRef.current !== null) {
+        window.clearTimeout(waitTimeoutRef.current);
+        waitTimeoutRef.current = null;
+      }
+    };
+  }, [channelsReady, registryReady, isWaitingForFreshData, currentKey]);
+  const status = (0, _react().useMemo)(() => {
+    if (!channelsReady) return 'empty';
+    if (isWaitingForFreshData) return 'loading';
+    if (!registryReady && !hasSubscribers) return 'empty';
+    return hasControls ? 'available' : 'empty';
+  }, [channelsReady, isWaitingForFreshData, registryReady, hasSubscribers, hasControls]);
+  (0, _react().useEffect)(() => {
+    onStatusChange?.(status);
+  }, [status, onStatusChange]);
+  const handleChange = (0, _react().useCallback)((control, value) => {
+    model.updateControl(control.id, value, control.source);
+  }, [model]);
+  if (status === 'loading') {
+    return /*#__PURE__*/_react().default.createElement("div", {
+      className: _liveControlsDiffPanelModule().default.loader
+    }, /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
+      width: "68px"
+    }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
+      width: "52px"
+    }), /*#__PURE__*/_react().default.createElement(_baseUiLoaders().LineSkeleton, {
+      width: "72px"
+    }));
+  }
+  if (status === 'empty') {
+    if (!showEmptyState) return null;
+    return /*#__PURE__*/_react().default.createElement("div", {
+      className: _liveControlsDiffPanelModule().default.emptyState
+    }, /*#__PURE__*/_react().default.createElement("div", {
+      className: _liveControlsDiffPanelModule().default.emptyStateIconWrap
+    }, /*#__PURE__*/_react().default.createElement(_evangelistElements().Icon, {
+      of: "scan-component",
+      className: _liveControlsDiffPanelModule().default.emptyStateIcon,
+      "aria-hidden": true
+    })), /*#__PURE__*/_react().default.createElement("div", {
+      className: _liveControlsDiffPanelModule().default.emptyStateText
+    }, /*#__PURE__*/_react().default.createElement("div", {
+      className: _liveControlsDiffPanelModule().default.emptyStateTitle
+    }, "No live controls"), /*#__PURE__*/_react().default.createElement("div", {
+      className: _liveControlsDiffPanelModule().default.emptyStateSubtitle
+    }, "This composition does not expose live controls.")));
+  }
+  const commonControls = controls.filter(c => c.source === 'common');
+  const baseControls = controls.filter(c => c.source === 'base');
+  const compareControls = controls.filter(c => c.source === 'compare');
+  const hasBaseOrCompare = baseControls.length > 0 || compareControls.length > 0;
+  const hasBaseAndCompare = baseControls.length > 0 && compareControls.length > 0;
+  const getControlValue = control => {
+    return model.getValueForControl(control.id, control.source);
+  };
+  const renderControlList = list => /*#__PURE__*/_react().default.createElement("ul", {
+    className: _liveControlsDiffPanelModule().default.controlsList
+  }, list.map(control => {
+    const inputType = control.input || 'text';
+    const isWideControl = inputType === 'longtext' || inputType === 'multiselect' || inputType === 'json';
+    const InputComponent = (0, _liveControlInput().getInputComponent)(inputType);
+    const key = `${control.id}-${control.source}`;
+    const value = getControlValue(control);
+    return /*#__PURE__*/_react().default.createElement("li", {
+      key: key,
+      className: (0, _classnames().default)(_liveControlsDiffPanelModule().default.controlRow, isWideControl && _liveControlsDiffPanelModule().default.controlRowWide)
+    }, /*#__PURE__*/_react().default.createElement("div", {
+      className: _liveControlsDiffPanelModule().default.controlMain
+    }, /*#__PURE__*/_react().default.createElement("div", {
+      className: _liveControlsDiffPanelModule().default.controlLabel
+    }, /*#__PURE__*/_react().default.createElement("label", {
+      htmlFor: `control-${key}`
+    }, control.label || control.id)), /*#__PURE__*/_react().default.createElement("div", {
+      className: _liveControlsDiffPanelModule().default.controlInput
+    }, /*#__PURE__*/_react().default.createElement(InputComponent, {
+      id: `control-${key}`,
+      value: value,
+      onChange: val => handleChange(control, val),
+      meta: control
+    }))));
+  }));
+  return /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlsDiffPanelModule().default.container
+  }, /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlsDiffPanelModule().default.columnsLayout
+  }, commonControls.length > 0 && /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlsDiffPanelModule().default.column
+  }, /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlsDiffPanelModule().default.columnHeader
+  }, commonLabel), renderControlList(commonControls)), commonControls.length > 0 && hasBaseOrCompare && /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlsDiffPanelModule().default.columnDivider
+  }), baseControls.length > 0 && /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlsDiffPanelModule().default.column
+  }, /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlsDiffPanelModule().default.columnHeader
+  }, baseLabel), renderControlList(baseControls)), hasBaseAndCompare && /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlsDiffPanelModule().default.columnDivider
+  }), compareControls.length > 0 && /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlsDiffPanelModule().default.column
+  }, /*#__PURE__*/_react().default.createElement("div", {
+    className: _liveControlsDiffPanelModule().default.columnHeader
+  }, compareLabel), renderControlList(compareControls))));
+}
+
+//# sourceMappingURL=live-controls-diff-panel.js.map

package/dist/ui/compositions-panel/live-controls-diff-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","data","_interopRequireWildcard","require","_compositionsUi","_baseUiLoaders","_evangelistElements","_classnames","_interopRequireDefault","_liveControlInput","_liveControlsDiffPanelModule","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","WAIT_FOR_CONTROLS_MS","LiveControlsDiffPanel","resetKey","baseChannel","compareChannel","commonLabel","baseLabel","compareLabel","showEmptyState","onStatusChange","lastResetKeyRef","useRef","isWaitingForFreshData","setIsWaitingForFreshData","useState","waitTimeoutRef","currentKey","model","useMemo","DiffControlsModel","allChannels","channels","includes","push","Set","combined","useLiveControls","ready","combinedReady","setTimestamp","useEffect","current","channelsReady","Boolean","registryReady","isReady","controls","hasControls","length","hasSubscribers","prevRegistryReady","window","clearTimeout","setTimeout","status","handleChange","useCallback","control","value","updateControl","id","source","createElement","className","styles","loader","LineSkeleton","width","emptyState","emptyStateIconWrap","Icon","of","emptyStateIcon","emptyStateText","emptyStateTitle","emptyStateSubtitle","commonControls","filter","c","baseControls","compareControls","hasBaseOrCompare","hasBaseAndCompare","getControlValue","getValueForControl","renderControlList","list","controlsList","map","inputType","input","isWideControl","InputComponent","getInputComponent","key","classNames","controlRow","controlRowWide","controlMain","controlLabel","htmlFor","label","controlInput","onChange","val","meta","container","columnsLayout","column","columnHeader","columnDivider"],"sources":["live-controls-diff-panel.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport {\n  DiffControlsModel,\n  useLiveControls,\n  type ControlWithSource,\n} from '@teambit/compositions.ui.composition-live-controls';\nimport { LineSkeleton } from '@teambit/base-ui.loaders.skeleton';\nimport { Icon } from '@teambit/evangelist.elements.icon';\nimport classNames from 'classnames';\nimport { getInputComponent } from './live-control-input';\n\nimport styles from './live-controls-diff-panel.module.scss';\n\ntype PanelStatus = 'loading' | 'available' | 'empty';\nconst WAIT_FOR_CONTROLS_MS = 1200;\n\nexport type LiveControlsDiffPanelProps = {\n  resetKey?: string;\n  baseChannel?: string;\n  compareChannel?: string;\n  commonLabel?: string;\n  baseLabel?: string;\n  compareLabel?: string;\n  showEmptyState?: boolean;\n  onStatusChange?: (status: PanelStatus) => void;\n};\n\nexport function LiveControlsDiffPanel({\n  resetKey,\n  baseChannel,\n  compareChannel,\n  commonLabel = 'Common',\n  baseLabel = 'Base',\n  compareLabel = 'Compare',\n  showEmptyState = true,\n  onStatusChange,\n}: LiveControlsDiffPanelProps) {\n  const lastResetKeyRef = useRef<string | null>(null);\n  const [isWaitingForFreshData, setIsWaitingForFreshData] = useState(true);\n  const waitTimeoutRef = useRef<number | null>(null);\n  const currentKey = `${baseChannel || ''}-${compareChannel || ''}-${resetKey || ''}`;\n\n  const model = useMemo(() => new DiffControlsModel(baseChannel, compareChannel), [baseChannel, compareChannel]);\n\n  const allChannels = useMemo(() => {\n    const channels = [model.baseChannel, model.compareChannel];\n    if (!channels.includes('default')) channels.push('default');\n    return [...new Set(channels)];\n  }, [model.baseChannel, model.compareChannel]);\n\n  const combined = useLiveControls(allChannels);\n  const { ready: combinedReady, setTimestamp } = combined;\n\n  useEffect(() => {\n    if (lastResetKeyRef.current !== currentKey) {\n      lastResetKeyRef.current = currentKey;\n      setIsWaitingForFreshData(true);\n      setTimestamp(0);\n    }\n  }, [currentKey, setTimestamp]);\n\n  const channelsReady = Boolean(baseChannel && compareChannel);\n  const registryReady = combinedReady || model.isReady;\n  const controls = model.controls;\n  const hasControls = controls.length > 0;\n  const hasSubscribers = model.hasSubscribers;\n\n  const prevRegistryReady = useRef(registryReady);\n  useEffect(() => {\n    if (registryReady && !prevRegistryReady.current && isWaitingForFreshData) {\n      setIsWaitingForFreshData(false);\n    }\n    prevRegistryReady.current = registryReady;\n  }, [registryReady, isWaitingForFreshData]);\n\n  useEffect(() => {\n    if (!channelsReady || registryReady || !isWaitingForFreshData) {\n      if (waitTimeoutRef.current !== null) {\n        window.clearTimeout(waitTimeoutRef.current);\n        waitTimeoutRef.current = null;\n      }\n      return;\n    }\n\n    waitTimeoutRef.current = window.setTimeout(() => {\n      setIsWaitingForFreshData(false);\n      waitTimeoutRef.current = null;\n    }, WAIT_FOR_CONTROLS_MS);\n\n    return () => {\n      if (waitTimeoutRef.current !== null) {\n        window.clearTimeout(waitTimeoutRef.current);\n        waitTimeoutRef.current = null;\n      }\n    };\n  }, [channelsReady, registryReady, isWaitingForFreshData, currentKey]);\n\n  const status: PanelStatus = useMemo(() => {\n    if (!channelsReady) return 'empty';\n    if (isWaitingForFreshData) return 'loading';\n    if (!registryReady && !hasSubscribers) return 'empty';\n    return hasControls ? 'available' : 'empty';\n  }, [channelsReady, isWaitingForFreshData, registryReady, hasSubscribers, hasControls]);\n\n  useEffect(() => {\n    onStatusChange?.(status);\n  }, [status, onStatusChange]);\n\n  const handleChange = useCallback(\n    (control: ControlWithSource, value: any) => {\n      model.updateControl(control.id, value, control.source);\n    },\n    [model]\n  );\n\n  if (status === 'loading') {\n    return (\n      <div className={styles.loader}>\n        <LineSkeleton width=\"68px\" />\n        <LineSkeleton width=\"52px\" />\n        <LineSkeleton width=\"72px\" />\n      </div>\n    );\n  }\n\n  if (status === 'empty') {\n    if (!showEmptyState) return null;\n    return (\n      <div className={styles.emptyState}>\n        <div className={styles.emptyStateIconWrap}>\n          <Icon of=\"scan-component\" className={styles.emptyStateIcon} aria-hidden />\n        </div>\n        <div className={styles.emptyStateText}>\n          <div className={styles.emptyStateTitle}>No live controls</div>\n          <div className={styles.emptyStateSubtitle}>This composition does not expose live controls.</div>\n        </div>\n      </div>\n    );\n  }\n\n  const commonControls = controls.filter((c) => c.source === 'common');\n  const baseControls = controls.filter((c) => c.source === 'base');\n  const compareControls = controls.filter((c) => c.source === 'compare');\n  const hasBaseOrCompare = baseControls.length > 0 || compareControls.length > 0;\n  const hasBaseAndCompare = baseControls.length > 0 && compareControls.length > 0;\n\n  const getControlValue = (control: ControlWithSource) => {\n    return model.getValueForControl(control.id, control.source);\n  };\n\n  const renderControlList = (list: ControlWithSource[]) => (\n    <ul className={styles.controlsList}>\n      {list.map((control) => {\n        const inputType = control.input || 'text';\n        const isWideControl = inputType === 'longtext' || inputType === 'multiselect' || inputType === 'json';\n        const InputComponent = getInputComponent(inputType);\n        const key = `${control.id}-${control.source}`;\n        const value = getControlValue(control);\n        return (\n          <li key={key} className={classNames(styles.controlRow, isWideControl && styles.controlRowWide)}>\n            <div className={styles.controlMain}>\n              <div className={styles.controlLabel}>\n                <label htmlFor={`control-${key}`}>{control.label || control.id}</label>\n              </div>\n              <div className={styles.controlInput}>\n                <InputComponent\n                  id={`control-${key}`}\n                  value={value}\n                  onChange={(val: any) => handleChange(control, val)}\n                  meta={control}\n                />\n              </div>\n            </div>\n          </li>\n        );\n      })}\n    </ul>\n  );\n\n  return (\n    <div className={styles.container}>\n      <div className={styles.columnsLayout}>\n        {commonControls.length > 0 && (\n          <div className={styles.column}>\n            <div className={styles.columnHeader}>{commonLabel}</div>\n            {renderControlList(commonControls)}\n          </div>\n        )}\n        {commonControls.length > 0 && hasBaseOrCompare && <div className={styles.columnDivider} />}\n        {baseControls.length > 0 && (\n          <div className={styles.column}>\n            <div className={styles.columnHeader}>{baseLabel}</div>\n            {renderControlList(baseControls)}\n          </div>\n        )}\n        {hasBaseAndCompare && <div className={styles.columnDivider} />}\n        {compareControls.length > 0 && (\n          <div className={styles.column}>\n            <div className={styles.columnHeader}>{compareLabel}</div>\n            {renderControlList(compareControls)}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui/compositions-panel/live-controls-diff-panel.module.scss

@@ -0,0 +1,185 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.columnsLayout {
+  display: flex;
+  gap: 0;
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  align-items: stretch;
+}
+
+.column {
+  flex: 1 1 0;
+  min-width: 320px;
+  padding: 0 16px;
+  overflow: visible;
+
+  &:first-child {
+    padding-left: 0;
+  }
+
+  &:last-child {
+    padding-right: 0;
+  }
+}
+
+.columnHeader {
+  font-size: var(--bit-p-xxs, 12px);
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  line-height: 1.3;
+  color: var(--on-background-color, #222222);
+  opacity: 0.5;
+  margin-bottom: 12px;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
+}
+
+.columnDivider {
+  width: 1px;
+  background: var(--border-medium-color, rgba(0, 0, 0, 0.14));
+  flex-shrink: 0;
+  margin: 0 8px;
+}
+
+.controlsList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 14px 12px;
+  align-items: start;
+}
+
+.controlRow {
+  display: block;
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+}
+
+.controlRowWide {
+  grid-column: 1 / -1;
+}
+
+.controlMain {
+  display: grid;
+  grid-template-rows: auto minmax(36px, auto);
+  align-content: start;
+  row-gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.controlInput {
+  min-width: 0;
+}
+
+.controlLabel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 0;
+  min-height: 20px;
+
+  label {
+    font-size: var(--bit-p-xs, 13px);
+    font-weight: 500;
+    color: var(--on-background-color, #222222);
+  }
+}
+
+.sourceTag {
+  font-size: 10px;
+  line-height: 14px;
+  padding: 0 5px;
+  border-radius: 999px;
+  text-transform: capitalize;
+  font-weight: 500;
+}
+
+.tagCommon {
+  background: rgba(106, 87, 253, 0.12);
+  color: var(--primary-color, #6a57fd);
+}
+
+.tagBase {
+  background: rgba(255, 152, 0, 0.12);
+  color: #e65100;
+}
+
+.tagCompare {
+  background: rgba(33, 150, 243, 0.12);
+  color: #1565c0;
+}
+
+.loader {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 0;
+  color: var(--skeleton-color, #e0e0e0);
+}
+
+@media (max-width: 1200px) {
+  .column {
+    min-width: 280px;
+  }
+
+  .controlsList {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+}
+
+.emptyState {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  border: 1px dashed var(--border-medium-color, rgba(0, 0, 0, 0.12));
+  border-radius: 8px;
+  background: var(--background-color, #ffffff);
+}
+
+.emptyStateIconWrap {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: rgba(0, 0, 0, 0.04);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.emptyStateIcon {
+  width: 18px;
+  height: 18px;
+  opacity: 0.7;
+}
+
+.emptyStateText {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.emptyStateTitle {
+  font-size: var(--bit-p-xs, 13px);
+  font-weight: 600;
+  color: var(--on-background-color, #222222);
+}
+
+.emptyStateSubtitle {
+  font-size: var(--bit-p-xxs, 12px);
+  color: var(--on-background-color, #222222);
+  opacity: 0.7;
+}

package/dist/ui/compositions-panel/live-controls-renderer.d.ts

@@ -0,0 +1 @@
+export declare function LiveControlsRenderer(): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/compositions-panel/live-controls-renderer.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LiveControlsRenderer = LiveControlsRenderer;
+function _react() {
+  const data = _interopRequireDefault(require("react"));
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _liveControlPanel() {
+  const data = require("./live-control-panel");
+  _liveControlPanel = function () {
+    return data;
+  };
+  return data;
+}
+function _compositionsUi() {
+  const data = require("@teambit/compositions.ui.composition-live-controls");
+  _compositionsUi = function () {
+    return data;
+  };
+  return data;
+}
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function LiveControlsRenderer() {
+  const {
+    hasLiveControls,
+    ready,
+    defs,
+    values,
+    onChange
+  } = (0, _compositionsUi().useLiveControls)();
+  if (!hasLiveControls) return null;
+  if (!ready) {
+    return /*#__PURE__*/_react().default.createElement("div", {
+      style: {
+        padding: 12,
+        opacity: 0.7
+      }
+    }, "No live controls available.");
+  }
+  return /*#__PURE__*/_react().default.createElement(_liveControlPanel().LiveControls, {
+    defs: defs,
+    values: values,
+    onChange: onChange
+  });
+}
+
+//# sourceMappingURL=live-controls-renderer.js.map

package/dist/ui/compositions-panel/live-controls-renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","data","_interopRequireDefault","require","_liveControlPanel","_compositionsUi","e","__esModule","default","LiveControlsRenderer","hasLiveControls","ready","defs","values","onChange","useLiveControls","createElement","style","padding","opacity","LiveControls"],"sources":["live-controls-renderer.tsx"],"sourcesContent":["import React from 'react';\nimport { LiveControls } from './live-control-panel';\nimport { useLiveControls } from '@teambit/compositions.ui.composition-live-controls';\n\nexport function LiveControlsRenderer() {\n  const { hasLiveControls, ready, defs, values, onChange } = useLiveControls();\n\n  if (!hasLiveControls) return null;\n\n  if (!ready) {\n    return <div style={{ padding: 12, opacity: 0.7 }}>No live controls available.</div>;\n  }\n\n  return <LiveControls defs={defs} values={values} onChange={onChange} />;\n}\n"],"mappings":";;;;;;AAAA,SAAAA,OAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAC,OAAA;EAAAH,MAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,kBAAA;EAAA,MAAAH,IAAA,GAAAE,OAAA;EAAAC,iBAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,gBAAA;EAAA,MAAAJ,IAAA,GAAAE,OAAA;EAAAE,eAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAqF,SAAAC,uBAAAI,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAE9E,SAASG,oBAAoBA,CAAA,EAAG;EACrC,MAAM;IAAEC,eAAe;IAAEC,KAAK;IAAEC,IAAI;IAAEC,MAAM;IAAEC;EAAS,CAAC,GAAG,IAAAC,iCAAe,EAAC,CAAC;EAE5E,IAAI,CAACL,eAAe,EAAE,OAAO,IAAI;EAEjC,IAAI,CAACC,KAAK,EAAE;IACV,oBAAOX,MAAA,GAAAQ,OAAA,CAAAQ,aAAA;MAAKC,KAAK,EAAE;QAAEC,OAAO,EAAE,EAAE;QAAEC,OAAO,EAAE;MAAI;IAAE,GAAC,6BAAgC,CAAC;EACrF;EAEA,oBAAOnB,MAAA,GAAAQ,OAAA,CAAAQ,aAAA,CAACZ,iBAAA,GAAAgB,YAAY;IAACR,IAAI,EAAEA,IAAK;IAACC,MAAM,EAAEA,MAAO;IAACC,QAAQ,EAAEA;EAAS,CAAE,CAAC;AACzE","ignoreList":[]}

package/dist/ui/index.d.ts

@@ -1 +1,5 @@
 export { ComponentComposition } from './composition-preview';
+export { LiveControls } from './compositions-panel/live-control-panel';
+export { LiveControlsDiffPanel } from './compositions-panel/live-controls-diff-panel';
+export type { LiveControlsDiffPanelProps } from './compositions-panel/live-controls-diff-panel';
+export { LiveControlsRenderer } from './compositions-panel/live-controls-renderer';

package/dist/ui/index.js

@@ -9,6 +9,24 @@ Object.defineProperty(exports, "ComponentComposition", {
     return _compositionPreview().ComponentComposition;
   }
 });
+Object.defineProperty(exports, "LiveControls", {
+  enumerable: true,
+  get: function () {
+    return _liveControlPanel().LiveControls;
+  }
+});
+Object.defineProperty(exports, "LiveControlsDiffPanel", {
+  enumerable: true,
+  get: function () {
+    return _liveControlsDiffPanel().LiveControlsDiffPanel;
+  }
+});
+Object.defineProperty(exports, "LiveControlsRenderer", {
+  enumerable: true,
+  get: function () {
+    return _liveControlsRenderer().LiveControlsRenderer;
+  }
+});
 function _compositionPreview() {
   const data = require("./composition-preview");
   _compositionPreview = function () {
@@ -16,5 +34,26 @@ function _compositionPreview() {
   };
   return data;
 }
+function _liveControlPanel() {
+  const data = require("./compositions-panel/live-control-panel");
+  _liveControlPanel = function () {
+    return data;
+  };
+  return data;
+}
+function _liveControlsDiffPanel() {
+  const data = require("./compositions-panel/live-controls-diff-panel");
+  _liveControlsDiffPanel = function () {
+    return data;
+  };
+  return data;
+}
+function _liveControlsRenderer() {
+  const data = require("./compositions-panel/live-controls-renderer");
+  _liveControlsRenderer = function () {
+    return data;
+  };
+  return data;
+}
 
 //# sourceMappingURL=index.js.map

package/dist/ui/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_compositionPreview","data","require"],"sources":["index.ts"],"sourcesContent":["export { ComponentComposition } from './composition-preview';\n"],"mappings":";;;;;;;;;;;AAAA,SAAAA,oBAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,mBAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA","ignoreList":[]}
+{"version":3,"names":["_compositionPreview","data","require","_liveControlPanel","_liveControlsDiffPanel","_liveControlsRenderer"],"sources":["index.ts"],"sourcesContent":["export { ComponentComposition } from './composition-preview';\nexport { LiveControls } from './compositions-panel/live-control-panel';\nexport { LiveControlsDiffPanel } from './compositions-panel/live-controls-diff-panel';\nexport type { LiveControlsDiffPanelProps } from './compositions-panel/live-controls-diff-panel';\nexport { LiveControlsRenderer } from './compositions-panel/live-controls-renderer';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,SAAAA,oBAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,mBAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAE,kBAAA;EAAA,MAAAF,IAAA,GAAAC,OAAA;EAAAC,iBAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAG,uBAAA;EAAA,MAAAH,IAAA,GAAAC,OAAA;EAAAE,sBAAA,YAAAA,CAAA;IAAA,OAAAH,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAI,sBAAA;EAAA,MAAAJ,IAAA,GAAAC,OAAA;EAAAG,qBAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA","ignoreList":[]}

package/dist/use-default-controls-schema-responder.d.ts

@@ -0,0 +1 @@
+export declare function useDefaultControlsSchemaResponder(componentId: string | undefined, enabled?: boolean): void;