@teambit/compositions 1.0.957 → 1.0.958

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

@@ -1 +1 @@
-{"version":3,"names":["_evangelistElements","data","require","_classnames","_interopRequireDefault","_reactRouterDom","_react","_interopRequireWildcard","_uiFoundationUiTree","_uiFoundationUi","_designUi","_baseReactNavigation","_compositionsUi","_compositionsPanelModule","_liveControlPanel","_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","openDrawerList","onToggleDrawer","useState","hasLiveControls","ready","defs","values","onChange","setTimestamp","useLiveControls","handleDrawerToggle","id","isDrawerOpen","includes","list","filter","drawer","concat","shouldAddNameParam","location","useLocation","searchParams","useSearchParams","versionFromQueryParams","navigate","useNavigate","handleSelect","useCallback","selected","onCompositionCodeClicked","composition","preventDefault","queryParams","URLSearchParams","basePath","pathname","split","filepath","toString","identifier","createElement","classNames","styles","container","DrawerUI","isOpen","onToggle","name","tab","map","href","key","linkWrapper","panelLink","onClick","displayName","right","MenuWidgetIcon","codeLink","icon","tooltipContent","Tooltip","content","placement","iconLink","target","rel","Icon","of","LiveControls","noLiveControls"],"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, useState } from 'react';\nimport { DrawerUI } from '@teambit/ui-foundation.ui.tree.drawer';\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';\nimport { LiveControls } from './live-control-panel';\n\nexport type CompositionsPanelProps = {\n  /**\n   * list of compositions\n   */\n  compositions: Composition[];\n  /**\n   * select composition to display\n   */\n  onSelectComposition: (composition: Composition) => void;\n  /**\n   * the currently active composition\n   */\n  active?: Composition;\n  /**\n   * the url to the base composition. doesntc contain the current composition params\n   */\n  url: string;\n  /**\n   * checks if a component is using the new preview api. if false, doesnt scale to support new preview\n   */\n  isScaling?: boolean;\n\n  includesEnvTemplate?: boolean;\n\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 [openDrawerList, onToggleDrawer] = useState(['COMPOSITIONS', 'LIVE_CONTROLS']);\n  const { hasLiveControls, ready, defs, values, onChange, setTimestamp } = useLiveControls();\n  const handleDrawerToggle = (id: string) => {\n    const isDrawerOpen = openDrawerList.includes(id);\n    if (isDrawerOpen) {\n      onToggleDrawer((list) => list.filter((drawer) => drawer !== id));\n      return;\n    }\n    onToggleDrawer((list) => list.concat(id));\n  };\n\n  // setup from props\n  const shouldAddNameParam = useNameParam || (isScaling && includesEnvTemplate === false);\n\n  // current composition state\n  const location = useLocation();\n  const [searchParams] = useSearchParams();\n  const versionFromQueryParams = searchParams.get('version');\n  const navigate = useNavigate();\n\n  // composition navigation action\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  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={classNames(styles.container)}>\n      <DrawerUI\n        isOpen={openDrawerList.includes('COMPOSITIONS')}\n        onToggle={() => handleDrawerToggle('COMPOSITIONS')}\n        name=\"COMPOSITIONS\"\n        className={classNames(styles.tab)}\n      >\n        <ul {...rest} className={classNames(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.linkWrapper, 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.right}>\n                  <MenuWidgetIcon\n                    className={styles.codeLink}\n                    icon=\"Code\"\n                    tooltipContent=\"Code\"\n                    onClick={onCompositionCodeClicked(composition)}\n                  />\n                  <Tooltip content=\"Open in new tab\" placement=\"bottom\">\n                    <a className={styles.iconLink} target=\"_blank\" rel=\"noopener noreferrer\" href={href}>\n                      <Icon className={styles.icon} of=\"open-tab\" />\n                    </a>\n                  </Tooltip>\n                </div>\n              </li>\n            );\n          })}\n        </ul>\n      </DrawerUI>\n      {hasLiveControls ? (\n        <DrawerUI\n          name=\"LIVE CONTROLS\"\n          className={classNames(styles.tab, className)}\n          isOpen={openDrawerList.includes('LIVE_CONTROLS')}\n          onToggle={() => handleDrawerToggle('LIVE_CONTROLS')}\n        >\n          {ready ? (\n            <LiveControls defs={defs} values={values} onChange={onChange} />\n          ) : (\n            <div className={styles.noLiveControls}>No live controls available for this composition</div>\n          )}\n        </DrawerUI>\n      ) : null}\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","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","compositionDot","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.compositionDot} />\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":";;;;;;AAAA,SAAAA,oBAAA;EAAA,MAAAC,IAAA,GAAAC,OAAA;EAAAF,mBAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAE,YAAA;EAAA,MAAAF,IAAA,GAAAG,sBAAA,CAAAF,OAAA;EAAAC,WAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,gBAAA;EAAA,MAAAJ,IAAA,GAAAC,OAAA;EAAAG,eAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAK,OAAA;EAAA,MAAAL,IAAA,GAAAM,uBAAA,CAAAL,OAAA;EAAAI,MAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAO,gBAAA;EAAA,MAAAP,IAAA,GAAAC,OAAA;EAAAM,eAAA,YAAAA,CAAA;IAAA,OAAAP,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAQ,UAAA;EAAA,MAAAR,IAAA,GAAAC,OAAA;EAAAO,SAAA,YAAAA,CAAA;IAAA,OAAAR,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAS,qBAAA;EAAA,MAAAT,IAAA,GAAAC,OAAA;EAAAQ,oBAAA,YAAAA,CAAA;IAAA,OAAAT,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAU,gBAAA;EAAA,MAAAV,IAAA,GAAAC,OAAA;EAAAS,eAAA,YAAAA,CAAA;IAAA,OAAAV,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAW,yBAAA;EAAA,MAAAX,IAAA,GAAAG,sBAAA,CAAAF,OAAA;EAAAU,wBAAA,YAAAA,CAAA;IAAA,OAAAX,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAAsD,MAAAY,SAAA;AAAA,SAAAN,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAAA,SAAAX,uBAAAU,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAK,UAAA,GAAAL,CAAA,KAAAU,OAAA,EAAAV,CAAA;AAAA,SAAAmB,SAAA,WAAAA,QAAA,GAAAH,MAAA,CAAAI,MAAA,GAAAJ,MAAA,CAAAI,MAAA,CAAAC,IAAA,eAAAjB,CAAA,aAAAJ,CAAA,MAAAA,CAAA,GAAAsB,SAAA,CAAAC,MAAA,EAAAvB,CAAA,UAAAC,CAAA,GAAAqB,SAAA,CAAAtB,CAAA,YAAAG,CAAA,IAAAF,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAd,CAAA,EAAAE,CAAA,MAAAC,CAAA,CAAAD,CAAA,IAAAF,CAAA,CAAAE,CAAA,aAAAC,CAAA,KAAAe,QAAA,CAAAK,KAAA,OAAAF,SAAA;AAAA,SAAAG,yBAAAzB,CAAA,EAAAC,CAAA,gBAAAD,CAAA,iBAAAM,CAAA,EAAAH,CAAA,EAAAI,CAAA,GAAAmB,6BAAA,CAAA1B,CAAA,EAAAC,CAAA,OAAAe,MAAA,CAAAW,qBAAA,QAAAvB,CAAA,GAAAY,MAAA,CAAAW,qBAAA,CAAA3B,CAAA,QAAAG,CAAA,MAAAA,CAAA,GAAAC,CAAA,CAAAmB,MAAA,EAAApB,CAAA,IAAAG,CAAA,GAAAF,CAAA,CAAAD,CAAA,UAAAF,CAAA,CAAA2B,OAAA,CAAAtB,CAAA,QAAAuB,oBAAA,CAAAd,IAAA,CAAAf,CAAA,EAAAM,CAAA,MAAAC,CAAA,CAAAD,CAAA,IAAAN,CAAA,CAAAM,CAAA,aAAAC,CAAA;AAAA,SAAAmB,8BAAAvB,CAAA,EAAAH,CAAA,gBAAAG,CAAA,iBAAAF,CAAA,gBAAAG,CAAA,IAAAD,CAAA,SAAAW,cAAA,CAAAC,IAAA,CAAAZ,CAAA,EAAAC,CAAA,gBAAAJ,CAAA,CAAA4B,OAAA,CAAAxB,CAAA,aAAAH,CAAA,CAAAG,CAAA,IAAAD,CAAA,CAAAC,CAAA,YAAAH,CAAA;AAa/C,SAAS6B,iBAAiBA,CAAAC,IAAA,EAUN;EAAA,IAVO;MAChCC,GAAG;MACHC,YAAY;MACZC,SAAS;MACTC,mBAAmB,EAAEC,QAAQ;MAC7BC,MAAM;MACNC,mBAAmB;MACnBC,YAAY;MACZC;IAEsB,CAAC,GAAAT,IAAA;IADpBU,IAAI,GAAAhB,wBAAA,CAAAM,IAAA,EAAAhC,SAAA;EAEP,MAAM;IAAE2C;EAAa,CAAC,GAAG,IAAAC,iCAAe,EAAC,CAAC;EAC1C,MAAMC,kBAAkB,GAAGL,YAAY,IAAKL,SAAS,IAAII,mBAAmB,KAAK,KAAM;EAEvF,MAAMO,QAAQ,GAAG,IAAAC,kCAAW,EAAC,CAAC;EAC9B,MAAM,CAACC,YAAY,CAAC,GAAG,IAAAC,iCAAe,EAAC,CAAC;EACxC,MAAMC,sBAAsB,GAAGF,YAAY,CAACnC,GAAG,CAAC,SAAS,CAAC;EAC1D,MAAMsC,QAAQ,GAAG,IAAAC,kCAAW,EAAC,CAAC;EAE9B,MAAMC,YAAY,GAAG,IAAAC,oBAAW,EAC7BC,QAAqB,IAAK;IACzBlB,QAAQ,IAAIA,QAAQ,CAACkB,QAAQ,CAAC;IAC9B,IAAIA,QAAQ,KAAKjB,MAAM,EAAE;IACzBK,YAAY,CAAC,CAAC,CAAC;EACjB,CAAC,EACD,CAACN,QAAQ,EAAEC,MAAM,EAAEK,YAAY,CACjC,CAAC;EAED,MAAMa,wBAAwB,GAAG,IAAAF,oBAAW,EACzCG,WAAwB,IAAMxD,CAAmC,IAAK;IACrEA,CAAC,CAACyD,cAAc,CAAC,CAAC;IAClBf,YAAY,CAAC,CAAC,CAAC;IACf,MAAMgB,WAAW,GAAG,IAAIC,eAAe,CAAC,CAAC;IACzC,IAAIV,sBAAsB,EAAE;MAC1BS,WAAW,CAAC7C,GAAG,CAAC,SAAS,EAAEoC,sBAAsB,CAAC;IACpD;IACA,MAAMW,QAAQ,GAAGf,QAAQ,EAAEgB,QAAQ,CAACC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC;IAC9DZ,QAAQ,CAAC,GAAGU,QAAQ,UAAUJ,WAAW,CAACO,QAAQ,IAAIL,WAAW,CAACM,QAAQ,CAAC,CAAC,WAAWR,WAAW,CAACS,UAAU,EAAE,CAAC;EAClH,CAAC,EACD,CAACpB,QAAQ,EAAEgB,QAAQ,EAAEX,QAAQ,EAAER,YAAY,EAAEO,sBAAsB,CACrE,CAAC;EAED,oBACEzD,MAAA,GAAAkB,OAAA,CAAAwD,aAAA;IAAK1B,SAAS,EAAE2B,kCAAM,CAACC;EAAU,gBAC/B5E,MAAA,GAAAkB,OAAA,CAAAwD,aAAA,OAAA/C,QAAA,KAAQsB,IAAI;IAAED,SAAS,EAAE,IAAA6B,qBAAU,EAACF,kCAAM,CAACG,gBAAgB,EAAE9B,SAAS;EAAE,IACrEP,YAAY,CAACsC,GAAG,CAAEf,WAAW,IAAK;IACjC,MAAMgB,IAAI,GAAG5B,kBAAkB,GAC3B,GAAGZ,GAAG,SAASwB,WAAW,CAACS,UAAU,EAAE,GACvC,GAAGjC,GAAG,IAAIwB,WAAW,CAACS,UAAU,EAAE;IACtC,oBACEzE,MAAA,GAAAkB,OAAA,CAAAwD,aAAA;MACEO,GAAG,EAAEjB,WAAW,CAACS,UAAW;MAC5BzB,SAAS,EAAE,IAAA6B,qBAAU,EAACF,kCAAM,CAACO,eAAe,EAAElB,WAAW,KAAKnB,MAAM,IAAI8B,kCAAM,CAAC9B,MAAM;IAAE,gBAEvF7C,MAAA,GAAAkB,OAAA,CAAAwD,aAAA;MAAG1B,SAAS,EAAE2B,kCAAM,CAACQ,SAAU;MAACC,OAAO,EAAEA,CAAA,KAAMxB,YAAY,CAACI,WAAW;IAAE,gBACvEhE,MAAA,GAAAkB,OAAA,CAAAwD,aAAA;MAAM1B,SAAS,EAAE2B,kCAAM,CAACU;IAAe,CAAE,CAAC,eAC1CrF,MAAA,GAAAkB,OAAA,CAAAwD,aAAA;MAAM1B,SAAS,EAAE2B,kCAAM,CAACW;IAAK,GAAEtB,WAAW,CAACuB,WAAkB,CAC5D,CAAC,eACJvF,MAAA,GAAAkB,OAAA,CAAAwD,aAAA;MAAK1B,SAAS,EAAE2B,kCAAM,CAACa;IAAY,gBACjCxF,MAAA,GAAAkB,OAAA,CAAAwD,aAAA,CAACxE,eAAA,GAAAuF,cAAc;MACbzC,SAAS,EAAE2B,kCAAM,CAACe,UAAW;MAC7BC,IAAI,EAAC,MAAM;MACXC,cAAc,EAAC,aAAa;MAC5BR,OAAO,EAAErB,wBAAwB,CAACC,WAAW;IAAE,CAChD,CAAC,eACFhE,MAAA,GAAAkB,OAAA,CAAAwD,aAAA,CAACvE,SAAA,GAAA0F,OAAO;MAACC,OAAO,EAAC,iBAAiB;MAACC,SAAS,EAAC;IAAQ,gBACnD/F,MAAA,GAAAkB,OAAA,CAAAwD,aAAA;MACE1B,SAAS,EAAE,IAAA6B,qBAAU,EAACF,kCAAM,CAACe,UAAU,EAAEf,kCAAM,CAACqB,QAAQ,CAAE;MAC1DC,MAAM,EAAC,QAAQ;MACfC,GAAG,EAAC,qBAAqB;MACzBlB,IAAI,EAAEA;IAAK,gBAEXhF,MAAA,GAAAkB,OAAA,CAAAwD,aAAA,CAAChF,mBAAA,GAAAyG,IAAI;MAACC,EAAE,EAAC;IAAU,CAAE,CACpB,CACI,CACN,CACH,CAAC;EAET,CAAC,CACC,CACD,CAAC;AAEV","ignoreList":[]}

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

@@ -6,130 +6,74 @@
   height: 100%;
 }
 
-.tab {
-  color: var(--on-background-color);
-
-  > div:first-child {
-    border: none;
-    border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
-
-    &:hover {
-      background: var(--surface-hover-color, #f6f6f6);
-    }
-  }
-
-  > div:last-child {
-    border-bottom: 1px solid var(--bit-border-color-lightest, #ededed);
-  }
+// ─── Compositions list ──────────────────────────────────────────────────
+.compositionsList {
+  flex: 1 1 auto;
+  overflow-y: auto;
+  padding: 4px 0;
 }
 
-.linkWrapper {
-  padding: 0 12px;
+.compositionItem {
+  padding: 0 6px;
+  margin: 1px 6px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  height: 40px;
-  font-size: var(--bit-p-xs);
-  transition: all 300ms ease-in-out;
-  color: var(--on-background-color);
+  height: 34px;
+  border-radius: 6px;
+  font-size: 13px;
+  transition: all 140ms ease;
+  color: var(--on-background-color, #1c2024);
   position: relative;
 
   &:hover {
-    background-color: var(--border-medium-color, #ededed);
-    // border-radius: 8px;
-    transition: background-color 300ms ease-in-out;
+    background: var(--surface-hover-color, rgba(0, 0, 0, 0.04));
 
     .panelLink {
       padding-right: 40px;
     }
 
-    .right {
+    .itemActions {
       visibility: visible;
       opacity: 1;
-      color: var(--bit-text-color-light, #6c707c);
-      transition: opacity 100ms ease-in-out;
-
-      .icon {
-        &:hover {
-          color: var(--bit-text-color-heavy);
-        }
-      }
     }
   }
 
   &.active {
-    display: flex;
-    align-items: center;
-    background-color: var(--bit-accent-color, #6c5ce7);
-    color: var(--bit-bg-color, #ffffff);
+    background: var(--bit-accent-color, #6c5ce7);
+    color: #ffffff;
+    font-weight: 500;
 
-    // overrides
     &:hover {
-      background-color: #5d4aec;
-    }
-
-    .box {
-      background-color: var(--bit-bg-color, #ffffff);
+      background: color-mix(in srgb, var(--bit-accent-color, #6c5ce7) 88%, #000);
     }
 
-    .right {
-      // visibility: unset;
+    .itemActions {
       opacity: 1;
-      color: var(--bit-accent-bg, #eceaff);
+      visibility: visible;
+      color: rgba(255, 255, 255, 0.7);
 
-      .icon {
-        &:hover {
-          color: var(--bit-bg-color, #ffffff);
-        }
+      .actionIcon:hover {
+        color: #ffffff;
       }
     }
-  }
 
-  .right {
-    position: absolute;
-    right: 12px;
-    top: 50%;
-    transform: translateY(-50%);
-    display: flex;
-    gap: 12px;
-    align-items: center;
-    justify-content: center;
-    opacity: 0;
-    visibility: hidden;
-    font-size: 13px;
-    transition:
-      opacity 100ms ease-in-out,
-      visibility 0s linear 100ms;
-  }
-
-  .codeLink {
-    cursor: pointer;
+    .compositionDot {
+      background: rgba(255, 255, 255, 0.5);
+    }
   }
 }
 
-.box {
-  width: 10px;
-  height: 10px;
+.compositionDot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: var(--bit-accent-color, #6c5ce7);
+  opacity: 0.4;
   flex-shrink: 0;
-  background-color: var(--bit-text-color-heavy);
-  margin-right: 11px;
-  border-radius: 1px;
-}
-
-.name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   margin-right: 8px;
 }
 
-.iconLink {
-  display: flex;
-  align-items: center;
-  color: inherit;
-  text-decoration: none;
-}
-
 .panelLink {
   display: flex;
   align-items: center;
@@ -140,51 +84,59 @@
   text-decoration: none;
   color: inherit;
   min-width: 0;
-  transition: padding-right 200ms ease-in-out;
+  transition: padding-right 140ms ease;
 
   &:active {
     color: inherit;
   }
 }
 
-.noLiveControls {
-  padding: 12px;
+.name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.tabs {
+.itemActions {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
   display: flex;
+  gap: 6px;
   align-items: center;
-  margin-bottom: 17px;
-
-  > div {
-    position: relative;
-    padding: 8px;
-    text-transform: uppercase;
-    font-size: 12px;
-    font-weight: bold;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 100ms ease;
+}
 
-    &:not(:first-child) {
-      color: #878c9a;
-    }
+.actionIcon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  border-radius: 4px;
+  color: var(--bit-text-color-light, #8b8d98);
+  cursor: pointer;
+  transition: all 100ms ease;
+  text-decoration: none;
+  font-size: 12px;
 
-    &:first-child {
-      &:before {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        background-color: var(--bit-accent-color, #6c5ce7);
-        height: 3px;
-        border-radius: 10px;
-        transition:
-          background-color 300ms,
-          height 300ms;
-      }
-    }
+  &:hover {
+    color: var(--bit-text-color-heavy, #1c2024);
+    background: rgba(0, 0, 0, 0.06);
   }
 }
 
+.iconLink {
+  display: flex;
+  align-items: center;
+  color: inherit;
+  text-decoration: none;
+}
+
+// ─── Legacy compat ──────────────────────────────────────────────────────
 .liveControlsSkeleton {
   padding: 12px 16px;
   display: flex;

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

@@ -30,13 +30,26 @@
 .wrapper :global(textarea) {
   min-height: 78px;
   resize: vertical;
+  border-radius: 6px;
+  border: 1px solid var(--bit-border-color-lightest, #dcdde1);
+  font-size: 13px;
+  padding: 8px 10px;
+  transition:
+    border-color 140ms ease,
+    box-shadow 140ms ease;
+
+  &:focus {
+    outline: none;
+    border-color: var(--bit-accent-color, #6c5ce7);
+    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.12);
+  }
 }
 
 .toggleWrapper {
   display: flex;
   align-items: center;
   justify-content: flex-start;
-  min-height: 36px;
+  min-height: 34px;
 }
 
 .toggleControl {
@@ -51,53 +64,87 @@
 
 .rangeWrapper {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding-top: 4px;
+  align-items: center;
+  gap: 10px;
+  padding: 2px 0;
 }
 
 .rangeInput {
-  width: 100%;
+  flex: 1;
   margin: 0;
-  accent-color: var(--primary-color, #6a57fd);
+  height: 4px;
+  accent-color: var(--bit-accent-color, #6c5ce7);
+  cursor: pointer;
+
+  &::-webkit-slider-runnable-track {
+    height: 4px;
+    border-radius: 2px;
+    background: var(--bit-border-color-lightest, #dcdde1);
+  }
+
+  &::-webkit-slider-thumb {
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--bit-accent-color, #6c5ce7);
+    border: 2px solid white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+    margin-top: -5px;
+    -webkit-appearance: none;
+    cursor: pointer;
+    transition: transform 100ms ease;
+  }
+
+  &::-webkit-slider-thumb:hover {
+    transform: scale(1.15);
+  }
 }
 
 .rangeValue {
-  font-size: var(--bit-p-xs, 13px);
-  line-height: 1.2;
-  color: var(--on-background-color, #222222);
-  opacity: 0.85;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--on-background-color, #1c2024);
+  min-width: 32px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  background: var(--bit-border-color-lightest, rgba(0, 0, 0, 0.04));
+  padding: 2px 6px;
+  border-radius: 4px;
 }
 
 .multiSelect {
   width: 100%;
-  min-height: 112px;
+  min-height: 80px;
   padding: 6px 8px;
-  border: 1px solid var(--border-medium-color, rgba(0, 0, 0, 0.16));
-  border-radius: 8px;
+  border: 1px solid var(--bit-border-color-lightest, #dcdde1);
+  border-radius: 6px;
   background: var(--surface-neutral-color, #ffffff);
-  color: var(--on-background-color, #222222);
+  color: var(--on-background-color, #1c2024);
   font: inherit;
-  line-height: 1.35;
+  font-size: 13px;
+  line-height: 1.5;
   box-sizing: border-box;
-  scrollbar-gutter: stable;
+  transition:
+    border-color 140ms ease,
+    box-shadow 140ms ease;
 }
 
 .multiSelect:focus {
   outline: none;
-  border-color: var(--primary-color, #6a57fd);
-  box-shadow: 0 0 0 2px rgba(106, 87, 253, 0.18);
+  border-color: var(--bit-accent-color, #6c5ce7);
+  box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.12);
 }
 
 .multiSelect option {
   padding: 4px 6px;
-  color: var(--on-background-color, #222222);
+  border-radius: 4px;
+  color: var(--on-background-color, #1c2024);
 }
 
 .multiSelect option:checked,
 .multiSelect option:hover {
-  background: var(--surface-hover-color, #edebfc);
-  color: var(--on-surface-color, #2b2b2b);
+  background: rgba(108, 92, 231, 0.08);
+  color: var(--on-surface-color, #1c2024);
 }
 
 .portalMenu {
@@ -113,9 +160,19 @@
 
 .portalMenuItem {
   cursor: pointer;
-  font-family: 'CircularPro', 'Gill Sans', 'Gill Sans MT', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-size: 13px;
 }
 
 .inputText {
   padding-top: 0px !important;
+  border-radius: 6px !important;
+  font-size: 13px !important;
+  transition:
+    border-color 140ms ease,
+    box-shadow 140ms ease !important;
+
+  &:focus {
+    border-color: var(--bit-accent-color, #6c5ce7) !important;
+    box-shadow: 0 0 0 2px rgba(108, 92, 231, 0.12) !important;
+  }
 }

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

@@ -1,16 +1,38 @@
 .container {
-  display: flex;
-  flex-direction: column;
-  font-size: 12px;
-  padding: 8px 0;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 2px 0;
+  font-size: 13px;
+  padding: 0;
   width: 100%;
 }
 
 .item {
-  padding: 4px 8px;
+  padding: 8px 14px;
+  border-right: 1px solid var(--bit-border-color-lightest, rgba(0, 0, 0, 0.05));
+  border-bottom: 1px solid var(--bit-border-color-lightest, rgba(0, 0, 0, 0.05));
+  transition: background 120ms ease;
+  min-width: 0;
+
+  &:hover {
+    background: rgba(0, 0, 0, 0.015);
+  }
 }
 
 .label {
-  font-weight: bold;
-  color: var(--on-background-color);
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 6px;
+
+  label {
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
+    color: var(--bit-text-color-light, #8b8d98);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }

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

@@ -30,21 +30,20 @@
 }
 
 .columnHeader {
-  font-size: var(--bit-p-xxs, 12px);
+  font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   line-height: 1.3;
-  color: var(--on-background-color, #222222);
-  opacity: 0.5;
+  color: var(--bit-text-color-light, #8b8d98);
   margin-bottom: 12px;
   padding-bottom: 8px;
-  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
+  border-bottom: 1px solid var(--bit-border-color-lightest, rgba(0, 0, 0, 0.06));
 }
 
 .columnDivider {
   width: 1px;
-  background: var(--border-medium-color, rgba(0, 0, 0, 0.14));
+  background: var(--bit-border-color-lightest, rgba(0, 0, 0, 0.08));
   flex-shrink: 0;
   margin: 0 8px;
 }
@@ -54,7 +53,7 @@
   margin: 0;
   padding: 0;
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
+  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
   gap: 14px 12px;
   align-items: start;
 }
@@ -72,9 +71,9 @@
 
 .controlMain {
   display: grid;
-  grid-template-rows: auto minmax(36px, auto);
+  grid-template-rows: auto minmax(34px, auto);
   align-content: start;
-  row-gap: 8px;
+  row-gap: 6px;
   flex: 1;
   min-width: 0;
 }
@@ -91,33 +90,35 @@
   min-height: 20px;
 
   label {
-    font-size: var(--bit-p-xs, 13px);
-    font-weight: 500;
-    color: var(--on-background-color, #222222);
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
+    color: var(--bit-text-color-light, #8b8d98);
   }
 }
 
 .sourceTag {
   font-size: 10px;
   line-height: 14px;
-  padding: 0 5px;
-  border-radius: 999px;
+  padding: 1px 5px;
+  border-radius: 3px;
   text-transform: capitalize;
   font-weight: 500;
 }
 
 .tagCommon {
-  background: rgba(106, 87, 253, 0.12);
-  color: var(--primary-color, #6a57fd);
+  background: rgba(108, 92, 231, 0.08);
+  color: var(--bit-accent-color, #6c5ce7);
 }
 
 .tagBase {
-  background: rgba(255, 152, 0, 0.12);
+  background: rgba(255, 152, 0, 0.08);
   color: #e65100;
 }
 
 .tagCompare {
-  background: rgba(33, 150, 243, 0.12);
+  background: rgba(33, 150, 243, 0.08);
   color: #1565c0;
 }
 
@@ -129,9 +130,9 @@
   color: var(--skeleton-color, #e0e0e0);
 }
 
-@media (max-width: 1200px) {
+@media (max-width: 900px) {
   .column {
-    min-width: 280px;
+    min-width: 240px;
   }
 
   .controlsList {
@@ -142,19 +143,18 @@
 
 .emptyState {
   display: flex;
+  flex-direction: column;
   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);
+  gap: 8px;
+  padding: 32px 16px;
+  text-align: center;
 }
 
 .emptyStateIconWrap {
-  width: 32px;
-  height: 32px;
-  border-radius: 8px;
-  background: rgba(0, 0, 0, 0.04);
+  width: 36px;
+  height: 36px;
+  border-radius: 10px;
+  background: var(--bit-border-color-lightest, rgba(0, 0, 0, 0.04));
   display: flex;
   align-items: center;
   justify-content: center;
@@ -163,7 +163,7 @@
 .emptyStateIcon {
   width: 18px;
   height: 18px;
-  opacity: 0.7;
+  color: var(--bit-text-color-light, #8b8d98);
 }
 
 .emptyStateText {
@@ -173,13 +173,13 @@
 }
 
 .emptyStateTitle {
-  font-size: var(--bit-p-xs, 13px);
+  font-size: 12px;
   font-weight: 600;
-  color: var(--on-background-color, #222222);
+  color: var(--on-background-color, #1c2024);
 }
 
 .emptyStateSubtitle {
-  font-size: var(--bit-p-xxs, 12px);
-  color: var(--on-background-color, #222222);
-  opacity: 0.7;
+  font-size: 12px;
+  color: var(--bit-text-color-light, #8b8d98);
+  line-height: 1.5;
 }