@teambit/workspace 1.0.820 → 1.0.821

package/dist/{preview-1764098769809.js → preview-1764106480383.js}

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

package/dist/ui/workspace/theme-from-url.d.ts

@@ -0,0 +1 @@
+export declare function ThemeFromUrlSync(): null;

package/dist/ui/workspace/theme-from-url.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ThemeFromUrlSync = ThemeFromUrlSync;
+function _react() {
+  const data = require("react");
+  _react = function () {
+    return data;
+  };
+  return data;
+}
+function _reactRouterDom() {
+  const data = require("react-router-dom");
+  _reactRouterDom = function () {
+    return data;
+  };
+  return data;
+}
+function _baseReactThemes() {
+  const data = require("@teambit/base-react.themes.theme-switcher");
+  _baseReactThemes = function () {
+    return data;
+  };
+  return data;
+}
+const STORAGE_KEY = 'workspace-theme';
+const CLEAR_VALUES = new Set(['default', 'none', '']);
+let lastUrlWrite = null;
+let lastSeenUrlTheme = undefined;
+let lastAppliedFromUrl = null;
+function ThemeFromUrlSync() {
+  const location = (0, _reactRouterDom().useLocation)();
+  const [, setSearchParams] = (0, _reactRouterDom().useSearchParams)();
+  const theme = (0, _baseReactThemes().useThemePicker)();
+  const urlTheme = (0, _react().useMemo)(() => {
+    const params = new URLSearchParams(location.search);
+    return params.get('theme') ?? undefined;
+  }, [location.search]);
+  const currentName = theme?.current?.themeName;
+  (0, _react().useEffect)(() => {
+    if (!theme) return;
+    const params = new URLSearchParams(location.search);
+    const hasThemeParam = params.has('theme');
+    const storedTheme = sessionStorage.getItem(STORAGE_KEY) || undefined;
+    if (lastUrlWrite && lastUrlWrite === urlTheme) {
+      lastUrlWrite = null;
+      lastSeenUrlTheme = urlTheme;
+      return;
+    }
+    const externalUrlChange = lastSeenUrlTheme !== urlTheme;
+    lastSeenUrlTheme = urlTheme;
+    if (externalUrlChange && hasThemeParam && urlTheme && CLEAR_VALUES.has(urlTheme)) {
+      sessionStorage.removeItem(STORAGE_KEY);
+      params.delete('theme');
+      lastUrlWrite = null;
+      lastAppliedFromUrl = null;
+      setSearchParams(params, {
+        replace: true
+      });
+      return;
+    }
+    if (externalUrlChange && urlTheme) {
+      sessionStorage.setItem(STORAGE_KEY, urlTheme);
+      if (currentName !== urlTheme) {
+        const target = theme.options.find(opt => opt.themeName === urlTheme);
+        if (target) {
+          lastAppliedFromUrl = urlTheme;
+          theme.setTheme(target);
+        }
+      }
+      return;
+    }
+    if (externalUrlChange && !hasThemeParam && storedTheme) {
+      params.set('theme', storedTheme);
+      lastUrlWrite = storedTheme;
+      setSearchParams(params, {
+        replace: true
+      });
+      return;
+    }
+    if (currentName && urlTheme !== currentName) {
+      if (lastAppliedFromUrl === currentName) {
+        lastAppliedFromUrl = null;
+        return;
+      }
+      sessionStorage.setItem(STORAGE_KEY, currentName);
+      params.set('theme', currentName);
+      lastUrlWrite = currentName;
+      setSearchParams(params, {
+        replace: true
+      });
+    }
+  }, [urlTheme, currentName, location.search, setSearchParams, theme]);
+  return null;
+}
+
+//# sourceMappingURL=theme-from-url.js.map

package/dist/ui/workspace/theme-from-url.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","data","require","_reactRouterDom","_baseReactThemes","STORAGE_KEY","CLEAR_VALUES","Set","lastUrlWrite","lastSeenUrlTheme","undefined","lastAppliedFromUrl","ThemeFromUrlSync","location","useLocation","setSearchParams","useSearchParams","theme","useThemePicker","urlTheme","useMemo","params","URLSearchParams","search","get","currentName","current","themeName","useEffect","hasThemeParam","has","storedTheme","sessionStorage","getItem","externalUrlChange","removeItem","delete","replace","setItem","target","options","find","opt","setTheme","set"],"sources":["theme-from-url.tsx"],"sourcesContent":["import { useEffect, useMemo } from 'react';\nimport { useLocation, useSearchParams } from 'react-router-dom';\nimport { useThemePicker } from '@teambit/base-react.themes.theme-switcher';\n\nconst STORAGE_KEY = 'workspace-theme';\nconst CLEAR_VALUES = new Set(['default', 'none', '']);\n\nlet lastUrlWrite: string | null = null;\nlet lastSeenUrlTheme: string | undefined = undefined;\nlet lastAppliedFromUrl: string | null = null;\n\nexport function ThemeFromUrlSync() {\n  const location = useLocation();\n  const [, setSearchParams] = useSearchParams();\n  const theme = useThemePicker();\n\n  const urlTheme = useMemo(() => {\n    const params = new URLSearchParams(location.search);\n    return params.get('theme') ?? undefined;\n  }, [location.search]);\n\n  const currentName = theme?.current?.themeName;\n\n  useEffect(() => {\n    if (!theme) return;\n\n    const params = new URLSearchParams(location.search);\n    const hasThemeParam = params.has('theme');\n    const storedTheme = sessionStorage.getItem(STORAGE_KEY) || undefined;\n\n    if (lastUrlWrite && lastUrlWrite === urlTheme) {\n      lastUrlWrite = null;\n      lastSeenUrlTheme = urlTheme;\n      return;\n    }\n\n    const externalUrlChange = lastSeenUrlTheme !== urlTheme;\n    lastSeenUrlTheme = urlTheme;\n\n    if (externalUrlChange && hasThemeParam && urlTheme && CLEAR_VALUES.has(urlTheme)) {\n      sessionStorage.removeItem(STORAGE_KEY);\n      params.delete('theme');\n      lastUrlWrite = null;\n      lastAppliedFromUrl = null;\n      setSearchParams(params, { replace: true });\n      return;\n    }\n\n    if (externalUrlChange && urlTheme) {\n      sessionStorage.setItem(STORAGE_KEY, urlTheme);\n\n      if (currentName !== urlTheme) {\n        const target = theme.options.find((opt) => opt.themeName === urlTheme);\n        if (target) {\n          lastAppliedFromUrl = urlTheme;\n          theme.setTheme(target);\n        }\n      }\n      return;\n    }\n\n    if (externalUrlChange && !hasThemeParam && storedTheme) {\n      params.set('theme', storedTheme);\n      lastUrlWrite = storedTheme;\n      setSearchParams(params, { replace: true });\n      return;\n    }\n\n    if (currentName && urlTheme !== currentName) {\n      if (lastAppliedFromUrl === currentName) {\n        lastAppliedFromUrl = null;\n        return;\n      }\n\n      sessionStorage.setItem(STORAGE_KEY, currentName);\n      params.set('theme', currentName);\n      lastUrlWrite = currentName;\n      setSearchParams(params, { replace: true });\n    }\n  }, [urlTheme, currentName, location.search, setSearchParams, theme]);\n\n  return null;\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui/workspace/workspace.js

@@ -146,6 +146,13 @@ function _workspaceModule() {
   };
   return data;
 }
+function _themeFromUrl() {
+  const data = require("./theme-from-url");
+  _themeFromUrl = function () {
+    return data;
+  };
+  return data;
+}
 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 }; }
 /**
@@ -201,7 +208,7 @@ function Workspace({
     workspace: workspace
   }, !isMinimal && /*#__PURE__*/_react().default.createElement(NotificationsBinder, {
     reactionsRef: reactionsRef
-  }), /*#__PURE__*/_react().default.createElement(_workspaceUi().PreserveWorkspaceMode, null, isMinimal && inIframe && /*#__PURE__*/_react().default.createElement(MinimalModeUrlBroadcasterAndListener, null), /*#__PURE__*/_react().default.createElement("div", {
+  }), /*#__PURE__*/_react().default.createElement(_workspaceUi().PreserveWorkspaceMode, null, /*#__PURE__*/_react().default.createElement(_themeFromUrl().ThemeFromUrlSync, null), isMinimal && inIframe && /*#__PURE__*/_react().default.createElement(MinimalModeUrlBroadcasterAndListener, null), /*#__PURE__*/_react().default.createElement("div", {
     className: _workspaceModule().default.workspaceWrapper
   }, /*#__PURE__*/_react().default.createElement(_uiFoundationUi2().TopBar, {
     className: (0, _classnames().default)(_workspaceModule().default.topbar, _workspaceModule().default[themeName], isMinimal && _workspaceModule().default.minimal),

package/dist/ui/workspace/workspace.js.map

@@ -1 +1 @@
-{"version":3,"names":["require","_pluralize","data","_interopRequireDefault","_react","_interopRequireWildcard","_reactRouterDom","_uiFoundationUiNotifications","_uiFoundationUiReactRouter","_uiFoundationUi","_uiFoundationUiButtons","_baseUiSurfacesSplitPane","_baseReactThemes","_baseUiSurfacesSplitPane2","_uiFoundationUi2","_workspaceUi","_classnames","_workspaceUi2","_workspaceHooks","_workspaceHooks2","_useWorkspace","_workspaceOverview","_workspaceProvider","_workspaceModule","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Workspace","routeSlot","menuSlot","sidebar","workspaceUI","onSidebarTogglerChange","isMinimal","useWorkspaceMode","reactionsRef","useRef","onComponentAdded","onComponentRemoved","reactions","useMemo","comps","current","ids","workspace","useWorkspace","theme","useThemePicker","currentTheme","isSidebarOpen","setSidebarOpen","useState","handleSidebarToggle","useCallback","prev","sidebarOpenness","Layout","row","right","themeName","useEffect","window","innerWidth","useLayoutEffect","createElement","className","styles","emptyContainer","setComponents","components","inIframe","parent","WorkspaceProvider","NotificationsBinder","PreserveWorkspaceMode","MinimalModeUrlBroadcasterAndListener","workspaceWrapper","TopBar","classNames","topbar","minimal","Corner","minimalCorner","corner","name","icon","menu","SplitPane","main","size","layout","Pane","closed","HoverSplitter","splitter","Collapser","isOpen","Boolean","onMouseDown","stopPropagation","onClick","tooltipContent","SlotRouter","slot","Route","index","element","WorkspaceOverview","notifications","useNotifications","notificationsMapped","notificationId","log","pluralize","length","map","comp","id","toString","join","setTimeout","dismiss","useUrlChangeBroadcaster","useNavigationMessageListener"],"sources":["workspace.tsx"],"sourcesContent":["import 'reset-css';\nimport pluralize from 'pluralize';\nimport React, { useState, useMemo, useEffect, useCallback, useLayoutEffect, useRef } from 'react';\nimport { Route } from 'react-router-dom';\nimport type { ComponentModel } from '@teambit/component';\nimport type { ComponentID } from '@teambit/component-id';\nimport { useNotifications } from '@teambit/ui-foundation.ui.notifications.notification-context';\nimport { SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport type { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Corner } from '@teambit/ui-foundation.ui.corner';\nimport { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';\nimport { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';\nimport { useThemePicker } from '@teambit/base-react.themes.theme-switcher';\nimport { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';\nimport { TopBar } from '@teambit/ui-foundation.ui.top-bar';\nimport { PreserveWorkspaceMode } from '@teambit/workspace.ui.preserve-workspace-mode';\nimport classNames from 'classnames';\nimport { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';\nimport { useUrlChangeBroadcaster } from '@teambit/workspace.hooks.use-url-change-broadcaster';\nimport { useNavigationMessageListener } from '@teambit/workspace.hooks.use-navigation-message-listener';\n\nimport { useWorkspace } from './use-workspace';\nimport { WorkspaceOverview } from './workspace-overview';\nimport { WorkspaceProvider } from './workspace-provider';\nimport styles from './workspace.module.scss';\nimport type { WorkspaceUI } from '../../workspace.ui.runtime';\n\nexport type WorkspaceProps = {\n  routeSlot: RouteSlot;\n  menuSlot: RouteSlot;\n  sidebar: JSX.Element;\n  workspaceUI: WorkspaceUI;\n  onSidebarTogglerChange: (callback: () => void) => void;\n};\n\n/**\n * main workspace component.\n */\nexport function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebarTogglerChange }: WorkspaceProps) {\n  const { isMinimal } = useWorkspaceMode();\n\n  const reactionsRef = useRef<{\n    onComponentAdded: (comps: ComponentModel[]) => void;\n    onComponentRemoved: (ids: ComponentID[]) => void;\n  }>({\n    onComponentAdded: () => {},\n    onComponentRemoved: () => {},\n  });\n\n  const reactions = useMemo(\n    () => ({\n      onComponentAdded: (comps: ComponentModel[]) => reactionsRef.current.onComponentAdded(comps),\n      onComponentRemoved: (ids: ComponentID[]) => reactionsRef.current.onComponentRemoved(ids),\n    }),\n    []\n  );\n\n  const { workspace } = useWorkspace(reactions);\n  const theme = useThemePicker();\n  const currentTheme = theme?.current;\n  const [isSidebarOpen, setSidebarOpen] = useState<boolean | null>(null);\n  const handleSidebarToggle = useCallback(() => {\n    setSidebarOpen((prev) => !prev);\n  }, []);\n  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.right;\n  const themeName = currentTheme?.themeName || 'light';\n  onSidebarTogglerChange(handleSidebarToggle);\n\n  useEffect(() => {\n    if (!window) return;\n    if (window.innerWidth <= 1024) {\n      setSidebarOpen(false);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    setSidebarOpen(!isMinimal);\n  }, [isMinimal]);\n\n  if (!workspace) {\n    return <div className={styles.emptyContainer}></div>;\n  }\n\n  workspaceUI.setComponents(workspace.components);\n  const inIframe = typeof window !== 'undefined' && window.parent && window.parent !== window;\n\n  return (\n    <WorkspaceProvider workspace={workspace}>\n      {!isMinimal && <NotificationsBinder reactionsRef={reactionsRef} />}\n      <PreserveWorkspaceMode>\n        {isMinimal && inIframe && <MinimalModeUrlBroadcasterAndListener />}\n        <div className={styles.workspaceWrapper}>\n          {\n            <TopBar\n              className={classNames(styles.topbar, styles[themeName], isMinimal && styles.minimal)}\n              Corner={() => (\n                <Corner\n                  className={classNames((isMinimal && styles.minimalCorner) || styles.corner, styles[themeName])}\n                  name={isMinimal ? '' : workspace.name}\n                  icon={isMinimal ? 'https://static.bit.dev/bit-icons/house.svg' : workspace.icon}\n                />\n              )}\n              // @ts-ignore - getting an error of \"Types have separate declarations of a private property 'registerFn'.\" for some reason after upgrading teambit.harmony/harmony from 0.4.6 to 0.4.7\n              menu={menuSlot}\n            />\n          }\n          <SplitPane className={styles.main} size={246} layout={sidebarOpenness}>\n            <Pane className={classNames(styles.sidebar, styles[themeName], !isSidebarOpen && styles.closed)}>\n              {sidebar}\n            </Pane>\n            <HoverSplitter className={styles.splitter}>\n              <Collapser\n                isOpen={Boolean(isSidebarOpen)}\n                onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag\n                onClick={handleSidebarToggle}\n                tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side panel`}\n              />\n            </HoverSplitter>\n            <Pane>\n              <SlotRouter slot={routeSlot}>\n                <Route index element={<WorkspaceOverview />} />\n              </SlotRouter>\n            </Pane>\n          </SplitPane>\n        </div>\n      </PreserveWorkspaceMode>\n    </WorkspaceProvider>\n  );\n}\n\nfunction NotificationsBinder({\n  reactionsRef,\n}: {\n  reactionsRef: React.MutableRefObject<{\n    onComponentAdded: (comps: ComponentModel[]) => void;\n    onComponentRemoved: (ids: ComponentID[]) => void;\n  }>;\n}) {\n  const notifications = useNotifications();\n\n  const notificationsMapped = useMemo(() => {\n    return {\n      onComponentAdded: (comps: ComponentModel[]) => {\n        const notificationId = notifications.log(\n          `added ${pluralize('component', comps.length)}: ${comps.map((comp) => comp.id.toString()).join(', ')}`\n        );\n        setTimeout(() => notifications.dismiss(notificationId), 12 * 1000);\n      },\n      onComponentRemoved: (ids: ComponentID[]) => {\n        const notificationId = notifications.log(\n          `removed ${pluralize('component', ids.length)} ${ids.map((id) => id.toString()).join(', ')}`\n        );\n        setTimeout(() => notifications.dismiss(notificationId), 12 * 1000);\n      },\n    };\n  }, [notifications]);\n\n  useEffect(() => {\n    reactionsRef.current = notificationsMapped;\n    return () => {\n      reactionsRef.current = { onComponentAdded: () => {}, onComponentRemoved: () => {} };\n    };\n  }, [notificationsMapped, reactionsRef]);\n\n  return null;\n}\n\nexport function MinimalModeUrlBroadcasterAndListener() {\n  useUrlChangeBroadcaster();\n  useNavigationMessageListener();\n  return null;\n}\n"],"mappings":";;;;;;;AAAAA,OAAA;AACA,SAAAC,WAAA;EAAA,MAAAC,IAAA,GAAAC,sBAAA,CAAAH,OAAA;EAAAC,UAAA,YAAAA,CAAA;IAAA,OAAAC,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAE,OAAA;EAAA,MAAAF,IAAA,GAAAG,uBAAA,CAAAL,OAAA;EAAAI,MAAA,YAAAA,CAAA;IAAA,OAAAF,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAI,gBAAA;EAAA,MAAAJ,IAAA,GAAAF,OAAA;EAAAM,eAAA,YAAAA,CAAA;IAAA,OAAAJ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAGA,SAAAK,6BAAA;EAAA,MAAAL,IAAA,GAAAF,OAAA;EAAAO,4BAAA,YAAAA,CAAA;IAAA,OAAAL,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAM,2BAAA;EAAA,MAAAN,IAAA,GAAAF,OAAA;EAAAQ,0BAAA,YAAAA,CAAA;IAAA,OAAAN,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAO,gBAAA;EAAA,MAAAP,IAAA,GAAAF,OAAA;EAAAS,eAAA,YAAAA,CAAA;IAAA,OAAAP,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAQ,uBAAA;EAAA,MAAAR,IAAA,GAAAF,OAAA;EAAAU,sBAAA,YAAAA,CAAA;IAAA,OAAAR,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAS,yBAAA;EAAA,MAAAT,IAAA,GAAAF,OAAA;EAAAW,wBAAA,YAAAA,CAAA;IAAA,OAAAT,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAU,iBAAA;EAAA,MAAAV,IAAA,GAAAF,OAAA;EAAAY,gBAAA,YAAAA,CAAA;IAAA,OAAAV,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAW,0BAAA;EAAA,MAAAX,IAAA,GAAAF,OAAA;EAAAa,yBAAA,YAAAA,CAAA;IAAA,OAAAX,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAY,iBAAA;EAAA,MAAAZ,IAAA,GAAAF,OAAA;EAAAc,gBAAA,YAAAA,CAAA;IAAA,OAAAZ,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAa,aAAA;EAAA,MAAAb,IAAA,GAAAF,OAAA;EAAAe,YAAA,YAAAA,CAAA;IAAA,OAAAb,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAc,YAAA;EAAA,MAAAd,IAAA,GAAAC,sBAAA,CAAAH,OAAA;EAAAgB,WAAA,YAAAA,CAAA;IAAA,OAAAd,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAe,cAAA;EAAA,MAAAf,IAAA,GAAAF,OAAA;EAAAiB,aAAA,YAAAA,CAAA;IAAA,OAAAf,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAgB,gBAAA;EAAA,MAAAhB,IAAA,GAAAF,OAAA;EAAAkB,eAAA,YAAAA,CAAA;IAAA,OAAAhB,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAiB,iBAAA;EAAA,MAAAjB,IAAA,GAAAF,OAAA;EAAAmB,gBAAA,YAAAA,CAAA;IAAA,OAAAjB,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAEA,SAAAkB,cAAA;EAAA,MAAAlB,IAAA,GAAAF,OAAA;EAAAoB,aAAA,YAAAA,CAAA;IAAA,OAAAlB,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAmB,mBAAA;EAAA,MAAAnB,IAAA,GAAAF,OAAA;EAAAqB,kBAAA,YAAAA,CAAA;IAAA,OAAAnB,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAoB,mBAAA;EAAA,MAAApB,IAAA,GAAAF,OAAA;EAAAsB,kBAAA,YAAAA,CAAA;IAAA,OAAApB,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AACA,SAAAqB,iBAAA;EAAA,MAAArB,IAAA,GAAAC,sBAAA,CAAAH,OAAA;EAAAuB,gBAAA,YAAAA,CAAA;IAAA,OAAArB,IAAA;EAAA;EAAA,OAAAA,IAAA;AAAA;AAA6C,SAAAG,wBAAAmB,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAArB,uBAAA,YAAAA,CAAAmB,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,SAAAtB,uBAAAqB,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAK,UAAA,GAAAL,CAAA,KAAAU,OAAA,EAAAV,CAAA;AAW7C;AACA;AACA;AACO,SAASmB,SAASA,CAAC;EAAEC,SAAS;EAAEC,QAAQ;EAAEC,OAAO;EAAEC,WAAW;EAAEC;AAAuC,CAAC,EAAE;EAC/G,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,gCAAgB,EAAC,CAAC;EAExC,MAAMC,YAAY,GAAG,IAAAC,eAAM,EAGxB;IACDC,gBAAgB,EAAEA,CAAA,KAAM,CAAC,CAAC;IAC1BC,kBAAkB,EAAEA,CAAA,KAAM,CAAC;EAC7B,CAAC,CAAC;EAEF,MAAMC,SAAS,GAAG,IAAAC,gBAAO,EACvB,OAAO;IACLH,gBAAgB,EAAGI,KAAuB,IAAKN,YAAY,CAACO,OAAO,CAACL,gBAAgB,CAACI,KAAK,CAAC;IAC3FH,kBAAkB,EAAGK,GAAkB,IAAKR,YAAY,CAACO,OAAO,CAACJ,kBAAkB,CAACK,GAAG;EACzF,CAAC,CAAC,EACF,EACF,CAAC;EAED,MAAM;IAAEC;EAAU,CAAC,GAAG,IAAAC,4BAAY,EAACN,SAAS,CAAC;EAC7C,MAAMO,KAAK,GAAG,IAAAC,iCAAc,EAAC,CAAC;EAC9B,MAAMC,YAAY,GAAGF,KAAK,EAAEJ,OAAO;EACnC,MAAM,CAACO,aAAa,EAAEC,cAAc,CAAC,GAAG,IAAAC,iBAAQ,EAAiB,IAAI,CAAC;EACtE,MAAMC,mBAAmB,GAAG,IAAAC,oBAAW,EAAC,MAAM;IAC5CH,cAAc,CAAEI,IAAI,IAAK,CAACA,IAAI,CAAC;EACjC,CAAC,EAAE,EAAE,CAAC;EACN,MAAMC,eAAe,GAAGN,aAAa,GAAGO,iCAAM,CAACC,GAAG,GAAGD,iCAAM,CAACE,KAAK;EACjE,MAAMC,SAAS,GAAGX,YAAY,EAAEW,SAAS,IAAI,OAAO;EACpD3B,sBAAsB,CAACoB,mBAAmB,CAAC;EAE3C,IAAAQ,kBAAS,EAAC,MAAM;IACd,IAAI,CAACC,MAAM,EAAE;IACb,IAAIA,MAAM,CAACC,UAAU,IAAI,IAAI,EAAE;MAC7BZ,cAAc,CAAC,KAAK,CAAC;IACvB;EACF,CAAC,EAAE,EAAE,CAAC;EAEN,IAAAa,wBAAe,EAAC,MAAM;IACpBb,cAAc,CAAC,CAACjB,SAAS,CAAC;EAC5B,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEf,IAAI,CAACW,SAAS,EAAE;IACd,oBAAOxD,MAAA,GAAA8B,OAAA,CAAA8C,aAAA;MAAKC,SAAS,EAAEC,0BAAM,CAACC;IAAe,CAAM,CAAC;EACtD;EAEApC,WAAW,CAACqC,aAAa,CAACxB,SAAS,CAACyB,UAAU,CAAC;EAC/C,MAAMC,QAAQ,GAAG,OAAOT,MAAM,KAAK,WAAW,IAAIA,MAAM,CAACU,MAAM,IAAIV,MAAM,CAACU,MAAM,KAAKV,MAAM;EAE3F,oBACEzE,MAAA,GAAA8B,OAAA,CAAA8C,aAAA,CAAC1D,kBAAA,GAAAkE,iBAAiB;IAAC5B,SAAS,EAAEA;EAAU,GACrC,CAACX,SAAS,iBAAI7C,MAAA,GAAA8B,OAAA,CAAA8C,aAAA,CAACS,mBAAmB;IAACtC,YAAY,EAAEA;EAAa,CAAE,CAAC,eAClE/C,MAAA,GAAA8B,OAAA,CAAA8C,aAAA,CAACjE,YAAA,GAAA2E,qBAAqB,QACnBzC,SAAS,IAAIqC,QAAQ,iBAAIlF,MAAA,GAAA8B,OAAA,CAAA8C,aAAA,CAACW,oCAAoC,MAAE,CAAC,eAClEvF,MAAA,GAAA8B,OAAA,CAAA8C,aAAA;IAAKC,SAAS,EAAEC,0BAAM,CAACU;EAAiB,gBAEpCxF,MAAA,GAAA8B,OAAA,CAAA8C,aAAA,CAAClE,gBAAA,GAAA+E,MAAM;IACLZ,SAAS,EAAE,IAAAa,qBAAU,EAACZ,0BAAM,CAACa,MAAM,EAAEb,0BAAM,CAACP,SAAS,CAAC,EAAE1B,SAAS,IAAIiC,0BAAM,CAACc,OAAO,CAAE;IACrFC,MAAM,EAAEA,CAAA,kBACN7F,MAAA,GAAA8B,OAAA,CAAA8C,aAAA,CAACvE,eAAA,GAAAwF,MAAM;MACLhB,SAAS,EAAE,IAAAa,qBAAU,EAAE7C,SAAS,IAAIiC,0BAAM,CAACgB,aAAa,IAAKhB,0BAAM,CAACiB,MAAM,EAAEjB,0BAAM,CAACP,SAAS,CAAC,CAAE;MAC/FyB,IAAI,EAAEnD,SAAS,GAAG,EAAE,GAAGW,SAAS,CAACwC,IAAK;MACtCC,IAAI,EAAEpD,SAAS,GAAG,4CAA4C,GAAGW,SAAS,CAACyC;IAAK,CACjF;IAEH;IAAA;IACAC,IAAI,EAAEzD;EAAS,CAChB,CAAC,eAEJzC,MAAA,GAAA8B,OAAA,CAAA8C,aAAA,CAACrE,wBAAA,GAAA4F,SAAS;IAACtB,SAAS,EAAEC,0BAAM,CAACsB,IAAK;IAACC,IAAI,EAAE,GAAI;IAACC,MAAM,EAAEnC;EAAgB,gBACpEnE,MAAA,GAAA8B,OAAA,CAAA8C,aAAA,CAACrE,wBAAA,GAAAgG,IAAI;IAAC1B,SAAS,EAAE,IAAAa,qBAAU,EAACZ,0BAAM,CAACpC,OAAO,EAAEoC,0BAAM,CAACP,SAAS,CAAC,EAAE,CAACV,aAAa,IAAIiB,0BAAM,CAAC0B,MAAM;EAAE,GAC7F9D,OACG,CAAC,eACP1C,MAAA,GAAA8B,OAAA,CAAA8C,aAAA,CAACnE,yBAAA,GAAAgG,aAAa;IAAC5B,SAAS,EAAEC,0BAAM,CAAC4B;EAAS,gBACxC1G,MAAA,GAAA8B,OAAA,CAAA8C,aAAA,CAACtE,sBAAA,GAAAqG,SAAS;IACRC,MAAM,EAAEC,OAAO,CAAChD,aAAa,CAAE;IAC/BiD,WAAW,EAAG1F,CAAC,IAAKA,CAAC,CAAC2F,eAAe,CAAC,CAAE,CAAC;IAAA;IACzCC,OAAO,EAAEhD,mBAAoB;IAC7BiD,cAAc,EAAE,GAAGpD,aAAa,GAAG,MAAM,GAAG,MAAM;EAAc,CACjE,CACY,CAAC,eAChB7D,MAAA,GAAA8B,OAAA,CAAA8C,aAAA,CAACrE,wBAAA,GAAAgG,IAAI,qBACHvG,MAAA,GAAA8B,OAAA,CAAA8C,aAAA,CAACxE,0BAAA,GAAA8G,UAAU;IAACC,IAAI,EAAE3E;EAAU,gBAC1BxC,MAAA,GAAA8B,OAAA,CAAA8C,aAAA,CAAC1E,eAAA,GAAAkH,KAAK;IAACC,KAAK;IAACC,OAAO,eAAEtH,MAAA,GAAA8B,OAAA,CAAA8C,aAAA,CAAC3D,kBAAA,GAAAsG,iBAAiB,MAAE;EAAE,CAAE,CACpC,CACR,CACG,CACR,CACgB,CACN,CAAC;AAExB;AAEA,SAASlC,mBAAmBA,CAAC;EAC3BtC;AAMF,CAAC,EAAE;EACD,MAAMyE,aAAa,GAAG,IAAAC,+CAAgB,EAAC,CAAC;EAExC,MAAMC,mBAAmB,GAAG,IAAAtE,gBAAO,EAAC,MAAM;IACxC,OAAO;MACLH,gBAAgB,EAAGI,KAAuB,IAAK;QAC7C,MAAMsE,cAAc,GAAGH,aAAa,CAACI,GAAG,CACtC,SAAS,IAAAC,oBAAS,EAAC,WAAW,EAAExE,KAAK,CAACyE,MAAM,CAAC,KAAKzE,KAAK,CAAC0E,GAAG,CAAEC,IAAI,IAAKA,IAAI,CAACC,EAAE,CAACC,QAAQ,CAAC,CAAC,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC,EACtG,CAAC;QACDC,UAAU,CAAC,MAAMZ,aAAa,CAACa,OAAO,CAACV,cAAc,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC;MACpE,CAAC;MACDzE,kBAAkB,EAAGK,GAAkB,IAAK;QAC1C,MAAMoE,cAAc,GAAGH,aAAa,CAACI,GAAG,CACtC,WAAW,IAAAC,oBAAS,EAAC,WAAW,EAAEtE,GAAG,CAACuE,MAAM,CAAC,IAAIvE,GAAG,CAACwE,GAAG,CAAEE,EAAE,IAAKA,EAAE,CAACC,QAAQ,CAAC,CAAC,CAAC,CAACC,IAAI,CAAC,IAAI,CAAC,EAC5F,CAAC;QACDC,UAAU,CAAC,MAAMZ,aAAa,CAACa,OAAO,CAACV,cAAc,CAAC,EAAE,EAAE,GAAG,IAAI,CAAC;MACpE;IACF,CAAC;EACH,CAAC,EAAE,CAACH,aAAa,CAAC,CAAC;EAEnB,IAAAhD,kBAAS,EAAC,MAAM;IACdzB,YAAY,CAACO,OAAO,GAAGoE,mBAAmB;IAC1C,OAAO,MAAM;MACX3E,YAAY,CAACO,OAAO,GAAG;QAAEL,gBAAgB,EAAEA,CAAA,KAAM,CAAC,CAAC;QAAEC,kBAAkB,EAAEA,CAAA,KAAM,CAAC;MAAE,CAAC;IACrF,CAAC;EACH,CAAC,EAAE,CAACwE,mBAAmB,EAAE3E,YAAY,CAAC,CAAC;EAEvC,OAAO,IAAI;AACb;AAEO,SAASwC,oCAAoCA,CAAA,EAAG;EACrD,IAAA+C,yCAAuB,EAAC,CAAC;EACzB,IAAAC,+CAA4B,EAAC,CAAC;EAC9B,OAAO,IAAI;AACb","ignoreList":[]}
+{"version":3,"names":["require","_pluralize","data","_interopRequireDefault","_react","_interopRequireWildcard","_reactRouterDom","_uiFoundationUiNotifications","_uiFoundationUiReactRouter","_uiFoundationUi","_uiFoundationUiButtons","_baseUiSurfacesSplitPane","_baseReactThemes","_baseUiSurfacesSplitPane2","_uiFoundationUi2","_workspaceUi","_classnames","_workspaceUi2","_workspaceHooks","_workspaceHooks2","_useWorkspace","_workspaceOverview","_workspaceProvider","_workspaceModule","_themeFromUrl","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","Workspace","routeSlot","menuSlot","sidebar","workspaceUI","onSidebarTogglerChange","isMinimal","useWorkspaceMode","reactionsRef","useRef","onComponentAdded","onComponentRemoved","reactions","useMemo","comps","current","ids","workspace","useWorkspace","theme","useThemePicker","currentTheme","isSidebarOpen","setSidebarOpen","useState","handleSidebarToggle","useCallback","prev","sidebarOpenness","Layout","row","right","themeName","useEffect","window","innerWidth","useLayoutEffect","createElement","className","styles","emptyContainer","setComponents","components","inIframe","parent","WorkspaceProvider","NotificationsBinder","PreserveWorkspaceMode","ThemeFromUrlSync","MinimalModeUrlBroadcasterAndListener","workspaceWrapper","TopBar","classNames","topbar","minimal","Corner","minimalCorner","corner","name","icon","menu","SplitPane","main","size","layout","Pane","closed","HoverSplitter","splitter","Collapser","isOpen","Boolean","onMouseDown","stopPropagation","onClick","tooltipContent","SlotRouter","slot","Route","index","element","WorkspaceOverview","notifications","useNotifications","notificationsMapped","notificationId","log","pluralize","length","map","comp","id","toString","join","setTimeout","dismiss","useUrlChangeBroadcaster","useNavigationMessageListener"],"sources":["workspace.tsx"],"sourcesContent":["import 'reset-css';\nimport pluralize from 'pluralize';\nimport React, { useState, useMemo, useEffect, useCallback, useLayoutEffect, useRef } from 'react';\nimport { Route } from 'react-router-dom';\nimport type { ComponentModel } from '@teambit/component';\nimport type { ComponentID } from '@teambit/component-id';\nimport { useNotifications } from '@teambit/ui-foundation.ui.notifications.notification-context';\nimport { SlotRouter } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport type { RouteSlot } from '@teambit/ui-foundation.ui.react-router.slot-router';\nimport { Corner } from '@teambit/ui-foundation.ui.corner';\nimport { Collapser } from '@teambit/ui-foundation.ui.buttons.collapser';\nimport { SplitPane, Pane, Layout } from '@teambit/base-ui.surfaces.split-pane.split-pane';\nimport { useThemePicker } from '@teambit/base-react.themes.theme-switcher';\nimport { HoverSplitter } from '@teambit/base-ui.surfaces.split-pane.hover-splitter';\nimport { TopBar } from '@teambit/ui-foundation.ui.top-bar';\nimport { PreserveWorkspaceMode } from '@teambit/workspace.ui.preserve-workspace-mode';\nimport classNames from 'classnames';\nimport { useWorkspaceMode } from '@teambit/workspace.ui.use-workspace-mode';\nimport { useUrlChangeBroadcaster } from '@teambit/workspace.hooks.use-url-change-broadcaster';\nimport { useNavigationMessageListener } from '@teambit/workspace.hooks.use-navigation-message-listener';\n\nimport { useWorkspace } from './use-workspace';\nimport { WorkspaceOverview } from './workspace-overview';\nimport { WorkspaceProvider } from './workspace-provider';\nimport styles from './workspace.module.scss';\nimport type { WorkspaceUI } from '../../workspace.ui.runtime';\nimport { ThemeFromUrlSync } from './theme-from-url';\n\nexport type WorkspaceProps = {\n  routeSlot: RouteSlot;\n  menuSlot: RouteSlot;\n  sidebar: JSX.Element;\n  workspaceUI: WorkspaceUI;\n  onSidebarTogglerChange: (callback: () => void) => void;\n};\n\n/**\n * main workspace component.\n */\nexport function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebarTogglerChange }: WorkspaceProps) {\n  const { isMinimal } = useWorkspaceMode();\n\n  const reactionsRef = useRef<{\n    onComponentAdded: (comps: ComponentModel[]) => void;\n    onComponentRemoved: (ids: ComponentID[]) => void;\n  }>({\n    onComponentAdded: () => {},\n    onComponentRemoved: () => {},\n  });\n\n  const reactions = useMemo(\n    () => ({\n      onComponentAdded: (comps: ComponentModel[]) => reactionsRef.current.onComponentAdded(comps),\n      onComponentRemoved: (ids: ComponentID[]) => reactionsRef.current.onComponentRemoved(ids),\n    }),\n    []\n  );\n\n  const { workspace } = useWorkspace(reactions);\n  const theme = useThemePicker();\n  const currentTheme = theme?.current;\n  const [isSidebarOpen, setSidebarOpen] = useState<boolean | null>(null);\n  const handleSidebarToggle = useCallback(() => {\n    setSidebarOpen((prev) => !prev);\n  }, []);\n  const sidebarOpenness = isSidebarOpen ? Layout.row : Layout.right;\n  const themeName = currentTheme?.themeName || 'light';\n  onSidebarTogglerChange(handleSidebarToggle);\n\n  useEffect(() => {\n    if (!window) return;\n    if (window.innerWidth <= 1024) {\n      setSidebarOpen(false);\n    }\n  }, []);\n\n  useLayoutEffect(() => {\n    setSidebarOpen(!isMinimal);\n  }, [isMinimal]);\n\n  if (!workspace) {\n    return <div className={styles.emptyContainer}></div>;\n  }\n\n  workspaceUI.setComponents(workspace.components);\n  const inIframe = typeof window !== 'undefined' && window.parent && window.parent !== window;\n\n  return (\n    <WorkspaceProvider workspace={workspace}>\n      {!isMinimal && <NotificationsBinder reactionsRef={reactionsRef} />}\n      <PreserveWorkspaceMode>\n        <ThemeFromUrlSync />\n        {isMinimal && inIframe && <MinimalModeUrlBroadcasterAndListener />}\n        <div className={styles.workspaceWrapper}>\n          {\n            <TopBar\n              className={classNames(styles.topbar, styles[themeName], isMinimal && styles.minimal)}\n              Corner={() => (\n                <Corner\n                  className={classNames((isMinimal && styles.minimalCorner) || styles.corner, styles[themeName])}\n                  name={isMinimal ? '' : workspace.name}\n                  icon={isMinimal ? 'https://static.bit.dev/bit-icons/house.svg' : workspace.icon}\n                />\n              )}\n              // @ts-ignore - getting an error of \"Types have separate declarations of a private property 'registerFn'.\" for some reason after upgrading teambit.harmony/harmony from 0.4.6 to 0.4.7\n              menu={menuSlot}\n            />\n          }\n          <SplitPane className={styles.main} size={246} layout={sidebarOpenness}>\n            <Pane className={classNames(styles.sidebar, styles[themeName], !isSidebarOpen && styles.closed)}>\n              {sidebar}\n            </Pane>\n            <HoverSplitter className={styles.splitter}>\n              <Collapser\n                isOpen={Boolean(isSidebarOpen)}\n                onMouseDown={(e) => e.stopPropagation()} // avoid split-pane drag\n                onClick={handleSidebarToggle}\n                tooltipContent={`${isSidebarOpen ? 'Hide' : 'Show'} side panel`}\n              />\n            </HoverSplitter>\n            <Pane>\n              <SlotRouter slot={routeSlot}>\n                <Route index element={<WorkspaceOverview />} />\n              </SlotRouter>\n            </Pane>\n          </SplitPane>\n        </div>\n      </PreserveWorkspaceMode>\n    </WorkspaceProvider>\n  );\n}\n\nfunction NotificationsBinder({\n  reactionsRef,\n}: {\n  reactionsRef: React.MutableRefObject<{\n    onComponentAdded: (comps: ComponentModel[]) => void;\n    onComponentRemoved: (ids: ComponentID[]) => void;\n  }>;\n}) {\n  const notifications = useNotifications();\n\n  const notificationsMapped = useMemo(() => {\n    return {\n      onComponentAdded: (comps: ComponentModel[]) => {\n        const notificationId = notifications.log(\n          `added ${pluralize('component', comps.length)}: ${comps.map((comp) => comp.id.toString()).join(', ')}`\n        );\n        setTimeout(() => notifications.dismiss(notificationId), 12 * 1000);\n      },\n      onComponentRemoved: (ids: ComponentID[]) => {\n        const notificationId = notifications.log(\n          `removed ${pluralize('component', ids.length)} ${ids.map((id) => id.toString()).join(', ')}`\n        );\n        setTimeout(() => notifications.dismiss(notificationId), 12 * 1000);\n      },\n    };\n  }, [notifications]);\n\n  useEffect(() => {\n    reactionsRef.current = notificationsMapped;\n    return () => {\n      reactionsRef.current = { onComponentAdded: () => {}, onComponentRemoved: () => {} };\n    };\n  }, [notificationsMapped, reactionsRef]);\n\n  return null;\n}\n\nexport function MinimalModeUrlBroadcasterAndListener() {\n  useUrlChangeBroadcaster();\n  useNavigationMessageListener();\n  return null;\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/ui/workspace/workspace.module.scss

@@ -6,24 +6,32 @@
 
 .corner {
   width: 300px;
-  background: var(--bit-bg-heaviest, #ededed) !important;
+  background: var(--background-color, #ededed) !important;
 
   &.dark {
     --bit-border-color-lightest: #333333;
     --bit-text-color-heavy: white;
   }
+
+  &.light {
+    --background-color: #ededed;
+  }
 }
 
 .minimalCorner {
   width: fit-content;
   height: 46px !important;
-  background: var(--bit-bg-heaviest, #ededed) !important;
+  background: var(--background-color, #ededed) !important;
 
   &.dark {
     --bit-border-color-lightest: #333333;
     --bit-text-color-heavy: white;
   }
 
+  &.light {
+    --background-color: #ededed;
+  }
+
   > a {
     &[aria-current='page'] > img {
       filter: invert(31%) sepia(75%) saturate(3183%) hue-rotate(235deg) brightness(99%) contrast(108%);
@@ -51,7 +59,7 @@
   flex: none;
 
   &.dark {
-    --bit-bg-heaviest: #333333;
+    --bit-bg-heaviest: #060414;
     --bit-accent-color: #6a57fd;
     --bit-bg-heavy: #2c2b36;
 
@@ -116,7 +124,7 @@
   }
 
   &.dark {
-    background-color: #333333;
+    background-color: #060414;
 
     a[class*='laneGalleryIcon'] {
       > img {

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/workspace",
-  "version": "1.0.820",
+  "version": "1.0.821",
   "homepage": "https://bit.cloud/teambit/workspace/workspace",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.workspace",
     "name": "workspace",
-    "version": "1.0.820"
+    "version": "1.0.821"
   },
   "dependencies": {
     "lodash": "4.17.21",
@@ -80,11 +80,11 @@
     "@teambit/ui-foundation.ui.tree.drawer": "1.0.0",
     "@teambit/harmony.modules.concurrency": "0.0.21",
     "@teambit/toolbox.promise.map-pool": "0.0.10",
+    "@teambit/base-react.themes.theme-switcher": "1.1.2",
     "@teambit/ui-foundation.ui.hooks.use-data-query": "0.0.506",
     "@teambit/workspace.ui.use-workspace-mode": "0.0.2",
     "@teambit/component-descriptor": "0.0.447",
     "@teambit/ui-foundation.ui.constants.z-indexes": "0.0.504",
-    "@teambit/base-react.themes.theme-switcher": "1.1.2",
     "@teambit/base-ui.surfaces.split-pane.hover-splitter": "1.0.0",
     "@teambit/base-ui.surfaces.split-pane.split-pane": "1.0.0",
     "@teambit/ui-foundation.ui.buttons.collapser": "0.0.233",
@@ -102,23 +102,23 @@
     "@teambit/scopes.scope-id": "0.0.9",
     "@teambit/workspace.ui.empty-workspace": "0.0.509",
     "@teambit/workspace.ui.workspace-component-card": "0.0.565",
-    "@teambit/component": "1.0.820",
-    "@teambit/dependency-resolver": "1.0.820",
-    "@teambit/envs": "1.0.820",
-    "@teambit/objects": "0.0.327",
-    "@teambit/scope": "1.0.820",
-    "@teambit/graph": "1.0.820",
-    "@teambit/isolator": "1.0.820",
-    "@teambit/component-tree": "1.0.820",
-    "@teambit/watcher": "1.0.820",
-    "@teambit/aspect-loader": "1.0.820",
-    "@teambit/graphql": "1.0.820",
-    "@teambit/bundler": "1.0.820",
-    "@teambit/ui": "1.0.820",
-    "@teambit/command-bar": "1.0.820",
-    "@teambit/sidebar": "1.0.820",
-    "@teambit/pubsub": "1.0.820",
-    "@teambit/deprecation": "1.0.820"
+    "@teambit/component": "1.0.821",
+    "@teambit/dependency-resolver": "1.0.821",
+    "@teambit/envs": "1.0.821",
+    "@teambit/objects": "0.0.328",
+    "@teambit/scope": "1.0.821",
+    "@teambit/graph": "1.0.821",
+    "@teambit/isolator": "1.0.821",
+    "@teambit/component-tree": "1.0.821",
+    "@teambit/watcher": "1.0.821",
+    "@teambit/aspect-loader": "1.0.821",
+    "@teambit/graphql": "1.0.821",
+    "@teambit/bundler": "1.0.821",
+    "@teambit/ui": "1.0.821",
+    "@teambit/command-bar": "1.0.821",
+    "@teambit/sidebar": "1.0.821",
+    "@teambit/pubsub": "1.0.821",
+    "@teambit/deprecation": "1.0.821"
   },
   "devDependencies": {
     "@types/lodash": "4.14.165",

package/ui/workspace/theme-from-url.tsx

@@ -0,0 +1,83 @@
+import { useEffect, useMemo } from 'react';
+import { useLocation, useSearchParams } from 'react-router-dom';
+import { useThemePicker } from '@teambit/base-react.themes.theme-switcher';
+
+const STORAGE_KEY = 'workspace-theme';
+const CLEAR_VALUES = new Set(['default', 'none', '']);
+
+let lastUrlWrite: string | null = null;
+let lastSeenUrlTheme: string | undefined = undefined;
+let lastAppliedFromUrl: string | null = null;
+
+export function ThemeFromUrlSync() {
+  const location = useLocation();
+  const [, setSearchParams] = useSearchParams();
+  const theme = useThemePicker();
+
+  const urlTheme = useMemo(() => {
+    const params = new URLSearchParams(location.search);
+    return params.get('theme') ?? undefined;
+  }, [location.search]);
+
+  const currentName = theme?.current?.themeName;
+
+  useEffect(() => {
+    if (!theme) return;
+
+    const params = new URLSearchParams(location.search);
+    const hasThemeParam = params.has('theme');
+    const storedTheme = sessionStorage.getItem(STORAGE_KEY) || undefined;
+
+    if (lastUrlWrite && lastUrlWrite === urlTheme) {
+      lastUrlWrite = null;
+      lastSeenUrlTheme = urlTheme;
+      return;
+    }
+
+    const externalUrlChange = lastSeenUrlTheme !== urlTheme;
+    lastSeenUrlTheme = urlTheme;
+
+    if (externalUrlChange && hasThemeParam && urlTheme && CLEAR_VALUES.has(urlTheme)) {
+      sessionStorage.removeItem(STORAGE_KEY);
+      params.delete('theme');
+      lastUrlWrite = null;
+      lastAppliedFromUrl = null;
+      setSearchParams(params, { replace: true });
+      return;
+    }
+
+    if (externalUrlChange && urlTheme) {
+      sessionStorage.setItem(STORAGE_KEY, urlTheme);
+
+      if (currentName !== urlTheme) {
+        const target = theme.options.find((opt) => opt.themeName === urlTheme);
+        if (target) {
+          lastAppliedFromUrl = urlTheme;
+          theme.setTheme(target);
+        }
+      }
+      return;
+    }
+
+    if (externalUrlChange && !hasThemeParam && storedTheme) {
+      params.set('theme', storedTheme);
+      lastUrlWrite = storedTheme;
+      setSearchParams(params, { replace: true });
+      return;
+    }
+
+    if (currentName && urlTheme !== currentName) {
+      if (lastAppliedFromUrl === currentName) {
+        lastAppliedFromUrl = null;
+        return;
+      }
+
+      sessionStorage.setItem(STORAGE_KEY, currentName);
+      params.set('theme', currentName);
+      lastUrlWrite = currentName;
+      setSearchParams(params, { replace: true });
+    }
+  }, [urlTheme, currentName, location.search, setSearchParams, theme]);
+
+  return null;
+}

package/ui/workspace/workspace.module.scss

@@ -6,24 +6,32 @@
 
 .corner {
   width: 300px;
-  background: var(--bit-bg-heaviest, #ededed) !important;
+  background: var(--background-color, #ededed) !important;
 
   &.dark {
     --bit-border-color-lightest: #333333;
     --bit-text-color-heavy: white;
   }
+
+  &.light {
+    --background-color: #ededed;
+  }
 }
 
 .minimalCorner {
   width: fit-content;
   height: 46px !important;
-  background: var(--bit-bg-heaviest, #ededed) !important;
+  background: var(--background-color, #ededed) !important;
 
   &.dark {
     --bit-border-color-lightest: #333333;
     --bit-text-color-heavy: white;
   }
 
+  &.light {
+    --background-color: #ededed;
+  }
+
   > a {
     &[aria-current='page'] > img {
       filter: invert(31%) sepia(75%) saturate(3183%) hue-rotate(235deg) brightness(99%) contrast(108%);
@@ -51,7 +59,7 @@
   flex: none;
 
   &.dark {
-    --bit-bg-heaviest: #333333;
+    --bit-bg-heaviest: #060414;
     --bit-accent-color: #6a57fd;
     --bit-bg-heavy: #2c2b36;
 
@@ -116,7 +124,7 @@
   }
 
   &.dark {
-    background-color: #333333;
+    background-color: #060414;
 
     a[class*='laneGalleryIcon'] {
       > img {

package/ui/workspace/workspace.tsx

@@ -24,6 +24,7 @@ import { WorkspaceOverview } from './workspace-overview';
 import { WorkspaceProvider } from './workspace-provider';
 import styles from './workspace.module.scss';
 import type { WorkspaceUI } from '../../workspace.ui.runtime';
+import { ThemeFromUrlSync } from './theme-from-url';
 
 export type WorkspaceProps = {
   routeSlot: RouteSlot;
@@ -88,6 +89,7 @@ export function Workspace({ routeSlot, menuSlot, sidebar, workspaceUI, onSidebar
     <WorkspaceProvider workspace={workspace}>
       {!isMinimal && <NotificationsBinder reactionsRef={reactionsRef} />}
       <PreserveWorkspaceMode>
+        <ThemeFromUrlSync />
         {isMinimal && inIframe && <MinimalModeUrlBroadcasterAndListener />}
         <div className={styles.workspaceWrapper}>
           {