@riboseinc/paneron-registry-kit 2.2.58 → 2.2.60

package/dependencies-local/extension-kit/widgets/TabbedWorkspace/context.js

@@ -0,0 +1,205 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeContextProvider = makeContextProvider;
+exports.TabbedWorkspaceContext = exports.SPECIAL_TAB_IDX = void 0;
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _context = require("../../context");
+
+/** @jsx jsx */
+const SPECIAL_TAB_IDX = {
+  new: -2
+};
+exports.SPECIAL_TAB_IDX = SPECIAL_TAB_IDX;
+const TabbedWorkspaceContext = (0, _react.createContext)({
+  spawnTab: () => void 0,
+  closeTabWithURI: () => void 0,
+  protocolConfiguration: {},
+  state: {
+    detailTabURIs: [],
+    focusedTabIdx: SPECIAL_TAB_IDX.new,
+    selectedSidebarID: ''
+  },
+  dispatch: () => void 0
+});
+exports.TabbedWorkspaceContext = TabbedWorkspaceContext;
+
+function makeContextProvider(initialSidebarID, sidebarIDs, protocolConfiguration) {
+  const initialState = {
+    detailTabURIs: [],
+    focusedTabIdx: SPECIAL_TAB_IDX.new,
+    selectedSidebarID: initialSidebarID
+  };
+
+  function reducer(prevState, action) {
+    var _a;
+
+    switch (action.type) {
+      case 'focus-sidebar':
+        return { ...prevState,
+          selectedSidebarID: action.payload.id
+        };
+
+      case 'spawn-tab':
+        {
+          const detailTabURIs = [...prevState.detailTabURIs];
+          const existingTabIdx = detailTabURIs.indexOf(action.payload.uri);
+
+          if (existingTabIdx >= 0) {
+            return { ...prevState,
+              focusedTabIdx: existingTabIdx
+            };
+          } else {
+            const idxToInsertAt = (_a = action.payload.atIdx) !== null && _a !== void 0 ? _a : prevState.focusedTabIdx >= 0 ? prevState.focusedTabIdx + 1 : 0;
+            detailTabURIs.splice(idxToInsertAt, 0, action.payload.uri);
+            return { ...prevState,
+              detailTabURIs,
+              focusedTabIdx: idxToInsertAt
+            };
+          }
+        }
+
+      case 'focus-tab':
+        return { ...prevState,
+          focusedTabIdx: action.payload.idx
+        };
+      // Not a common case, usually different URLs open in different tabs.
+
+      case 'navigate-focused-tab':
+        const existingTabIdx = prevState.detailTabURIs.indexOf(action.payload.uri);
+
+        if (existingTabIdx >= 0) {
+          // TODO: Is switching to preexisting tab with given URI the right behavior here?
+          return { ...prevState,
+            focusedTabIdx: existingTabIdx
+          };
+        } else if (prevState.detailTabURIs[prevState.focusedTabIdx]) {
+          const detailTabURIs = [...prevState.detailTabURIs];
+          detailTabURIs[prevState.focusedTabIdx] = action.payload.uri;
+          return { ...prevState,
+            detailTabURIs
+          };
+        } else {
+          return prevState;
+        }
+
+      case 'close-tab':
+        {
+          const detailTabURIs = [...prevState.detailTabURIs];
+          const closedFocused = action.payload.idx === prevState.focusedTabIdx;
+          detailTabURIs.splice(action.payload.idx, 1);
+          const focusedTabIdx = closedFocused ? detailTabURIs.length > 0 // If a focused tab is closed and there are any tabs left, switch to previous tab
+          ? action.payload.idx > 0 ? action.payload.idx - 1 : 0 : SPECIAL_TAB_IDX.new : prevState.focusedTabIdx > action.payload.idx // If a tab before focused tab is closed, adjust focused index to maintain tab selection
+          ? prevState.focusedTabIdx - 1 : prevState.focusedTabIdx;
+          return { ...prevState,
+            detailTabURIs,
+            focusedTabIdx
+          };
+        }
+
+      case 'close-tab-with-uri':
+        {
+          const detailTabURIs = [...prevState.detailTabURIs]; // FIXME: Handle cases when there’re multiple tabs with the same URI
+
+          const idx = detailTabURIs.indexOf(action.payload.uri);
+          const closedFocused = idx === prevState.focusedTabIdx;
+          detailTabURIs.splice(idx, 1);
+          const focusedTabIdx = closedFocused ? detailTabURIs.length > 0 // If a focused tab is closed and there are any tabs left, switch to previous tab
+          ? idx > 0 ? idx - 1 : 0 : SPECIAL_TAB_IDX.new : prevState.focusedTabIdx > idx // If a tab before focused tab is closed, adjust focused index to maintain tab selection
+          ? prevState.focusedTabIdx - 1 : prevState.focusedTabIdx;
+          return { ...prevState,
+            detailTabURIs,
+            focusedTabIdx
+          };
+        }
+      // TODO: Reducer knows how to move tabs, but we want to hook up a nice drag-and-drop mechanism.
+
+      case 'move-tab':
+        {
+          const detailTabURIs = [...prevState.detailTabURIs];
+          const tab = detailTabURIs.splice(action.payload.sourceIdx, 1)[0];
+
+          if (tab) {
+            detailTabURIs.splice(action.payload.destinationIdx, 0, tab);
+          }
+
+          return { ...prevState,
+            detailTabURIs
+          };
+        }
+
+      default:
+        throw new Error("Invalid action");
+    }
+  }
+
+  function validateState(state) {
+    var _a;
+
+    return ((_a = state.detailTabURIs) === null || _a === void 0 ? void 0 : _a.map) !== undefined && (typeof state.selectedSidebarID === 'string' || state.selectedSidebarID === undefined) && (!state.selectedSidebarID || sidebarIDs.indexOf(state.selectedSidebarID) >= 0);
+  }
+
+  const TabbedWorkspaceContextProvider = function ({
+    stateKey,
+    onFocusedTabChange,
+    children
+  }) {
+    const {
+      usePersistentDatasetStateReducer
+    } = (0, _react.useContext)(_context.DatasetContext);
+    const [state, dispatch] = usePersistentDatasetStateReducer(stateKey, undefined, validateState, reducer, initialState, null);
+    const tabsCacheKey = state.detailTabURIs.toString();
+    const focusedTabURI = (0, _react.useMemo)(() => state.focusedTabIdx >= 0 ? state.detailTabURIs[state.focusedTabIdx] : undefined, [state.focusedTabIdx, tabsCacheKey]);
+    (0, _react.useEffect)(() => {
+      if (onFocusedTabChange) {
+        onFocusedTabChange(focusedTabURI);
+      }
+    }, [onFocusedTabChange, focusedTabURI]);
+    const spawnTab = (0, _react.useCallback)((uri, opts) => dispatch({
+      type: 'spawn-tab',
+      payload: {
+        uri,
+        atIdx: opts === null || opts === void 0 ? void 0 : opts.atIdx
+      }
+    }), [dispatch]);
+    const closeTabWithURI = (0, _react.useCallback)(uri => {
+      const idx = state.detailTabURIs.indexOf(uri);
+
+      if (idx >= 0) {
+        dispatch({
+          type: 'close-tab',
+          payload: {
+            idx
+          }
+        });
+      }
+    }, [dispatch, tabsCacheKey]);
+    const navigateFocusedTab = (0, _react.useCallback)(uri => dispatch({
+      type: 'navigate-focused-tab',
+      payload: {
+        uri
+      }
+    }), [dispatch]);
+    const protoConfig = (0, _react.useMemo)(() => protocolConfiguration, []);
+    const ctx = (0, _react.useMemo)(() => ({
+      spawnTab,
+      closeTabWithURI,
+      navigateFocusedTab,
+      protocolConfiguration: protoConfig,
+      focusedTabURI,
+      dispatch,
+      state
+    }), [focusedTabURI, spawnTab, closeTabWithURI, navigateFocusedTab, state, protoConfig, dispatch]);
+    return (0, _react2.jsx)(TabbedWorkspaceContext.Provider, {
+      value: ctx
+    }, children);
+  };
+
+  return TabbedWorkspaceContextProvider;
+}

package/dependencies-local/extension-kit/widgets/TabbedWorkspace/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sourceRoot":"","sources":["../../../src/widgets/TabbedWorkspace/context.tsx"],"names":[],"mappings":"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","sourcesContent":["/** @jsx jsx */\n\nimport React, { createContext, useCallback, useMemo, useContext, useEffect } from 'react';\nimport { jsx } from '@emotion/react';\nimport { DatasetContext } from '../../context';\nimport type { PersistentStateReducerHook } from '../../usePersistentStateReducer';\nimport type { TabbedWorkspaceContext as TabbedWorkspaceContextSpec, Action, ProtocolRegistry, State } from './types';\n\n\nexport const SPECIAL_TAB_IDX: Record<'new', number> = {\n  new: -2,\n} as const;\n\n\nexport const TabbedWorkspaceContext = createContext<TabbedWorkspaceContextSpec<any, any>>({\n  spawnTab: () => void 0,\n  closeTabWithURI: () => void 0,\n  protocolConfiguration: {},\n  state: {\n    detailTabURIs: [],\n    focusedTabIdx: SPECIAL_TAB_IDX.new,\n    selectedSidebarID: '',\n  },\n  dispatch: () => void 0,\n});\n\n\nexport function makeContextProvider\n<Proto extends string, SidebarIDs extends Readonly<string[]> = []>(\n  initialSidebarID: SidebarIDs['length'] extends 0 ? undefined : SidebarIDs[number],\n  sidebarIDs: SidebarIDs,\n  protocolConfiguration: ProtocolRegistry<Proto>,\n):\nReact.FC<TabbedWorkspaceContextProviderProps> {\n\n  type SidebarID = SidebarIDs[number];\n\n  const initialState: State<SidebarID> = {\n    detailTabURIs: [],\n    focusedTabIdx: SPECIAL_TAB_IDX.new,\n    selectedSidebarID: initialSidebarID,\n  } as const;\n\n  function reducer(prevState: State<SidebarID>, action: Action<SidebarID>): State<SidebarID> {\n    switch (action.type) {\n\n      case 'focus-sidebar':\n        return {\n          ...prevState,\n          selectedSidebarID: action.payload.id,\n        };\n\n      case 'spawn-tab': {\n        const detailTabURIs = [ ...prevState.detailTabURIs ];\n        const existingTabIdx = detailTabURIs.indexOf(action.payload.uri);\n        if (existingTabIdx >= 0) {\n          return {\n            ...prevState,\n            focusedTabIdx: existingTabIdx,\n          };\n        } else {\n          const idxToInsertAt = action.payload.atIdx ?? (\n            prevState.focusedTabIdx >= 0\n              ? prevState.focusedTabIdx + 1\n              : 0\n          );\n          detailTabURIs.splice(idxToInsertAt, 0, action.payload.uri);\n          return {\n            ...prevState,\n            detailTabURIs,\n            focusedTabIdx: idxToInsertAt,\n          };\n        }\n      }\n\n      case 'focus-tab':\n        return {\n          ...prevState,\n          focusedTabIdx: action.payload.idx,\n        };\n\n      // Not a common case, usually different URLs open in different tabs.\n      case 'navigate-focused-tab':\n        const existingTabIdx = prevState.detailTabURIs.indexOf(action.payload.uri);\n        if (existingTabIdx >= 0) {\n          // TODO: Is switching to preexisting tab with given URI the right behavior here?\n          return {\n            ...prevState,\n            focusedTabIdx: existingTabIdx,\n          };\n        } else if (prevState.detailTabURIs[prevState.focusedTabIdx]) {\n          const detailTabURIs = [ ...prevState.detailTabURIs ];\n          detailTabURIs[prevState.focusedTabIdx] = action.payload.uri;\n          return {\n            ...prevState,\n            detailTabURIs,\n          };\n        } else {\n          return prevState;\n        }\n\n      case 'close-tab': {\n        const detailTabURIs = [ ...prevState.detailTabURIs ];\n        const closedFocused = action.payload.idx === prevState.focusedTabIdx;\n\n        detailTabURIs.splice(action.payload.idx, 1);\n\n        const focusedTabIdx = closedFocused\n          ? detailTabURIs.length > 0\n            // If a focused tab is closed and there are any tabs left, switch to previous tab\n            ? action.payload.idx > 0\n              ? action.payload.idx - 1\n              : 0\n            : SPECIAL_TAB_IDX.new\n          : prevState.focusedTabIdx > action.payload.idx\n            // If a tab before focused tab is closed, adjust focused index to maintain tab selection\n            ? prevState.focusedTabIdx - 1\n            : prevState.focusedTabIdx;\n\n        return {\n          ...prevState,\n          detailTabURIs,\n          focusedTabIdx,\n        };\n      }\n\n      case 'close-tab-with-uri': {\n        const detailTabURIs = [ ...prevState.detailTabURIs ];\n\n        // FIXME: Handle cases when there’re multiple tabs with the same URI\n\n        const idx = detailTabURIs.indexOf(action.payload.uri);\n        const closedFocused = idx === prevState.focusedTabIdx;\n\n        detailTabURIs.splice(idx, 1);\n\n        const focusedTabIdx = closedFocused\n          ? detailTabURIs.length > 0\n            // If a focused tab is closed and there are any tabs left, switch to previous tab\n            ? idx > 0\n              ? idx - 1\n              : 0\n            : SPECIAL_TAB_IDX.new\n          : prevState.focusedTabIdx > idx\n            // If a tab before focused tab is closed, adjust focused index to maintain tab selection\n            ? prevState.focusedTabIdx - 1\n            : prevState.focusedTabIdx;\n\n        return {\n          ...prevState,\n          detailTabURIs,\n          focusedTabIdx,\n        };\n      }\n\n      // TODO: Reducer knows how to move tabs, but we want to hook up a nice drag-and-drop mechanism.\n      case 'move-tab': {\n        const detailTabURIs = [ ...prevState.detailTabURIs ];\n        const tab = detailTabURIs.splice(action.payload.sourceIdx, 1)[0];\n        if (tab) {\n          detailTabURIs.splice(action.payload.destinationIdx, 0, tab);\n        }\n        return {\n          ...prevState,\n          detailTabURIs,\n        };\n      }\n\n      default:\n        throw new Error(\"Invalid action\");\n    }\n  }\n\n  function validateState(state: Partial<State<SidebarID>>): state is State<SidebarID> {\n    return (\n      state.detailTabURIs?.map !== undefined &&\n      (typeof state.selectedSidebarID === 'string' || state.selectedSidebarID === undefined) &&\n      (!state.selectedSidebarID || sidebarIDs.indexOf(state.selectedSidebarID) >= 0)\n    );\n  }\n\n  const TabbedWorkspaceContextProvider:\n  React.FC<TabbedWorkspaceContextProviderProps> =\n  function ({ stateKey, onFocusedTabChange, children }) {\n\n    const { usePersistentDatasetStateReducer } = useContext(DatasetContext);\n\n    const [ state, dispatch ] =\n    (usePersistentDatasetStateReducer as PersistentStateReducerHook<State<SidebarID>, Action<SidebarID>>)(\n      stateKey,\n      undefined,\n      validateState,\n      reducer,\n      initialState,\n      null);\n\n    const tabsCacheKey = state.detailTabURIs.toString();\n\n    const focusedTabURI: string | undefined = useMemo((() =>\n      state.focusedTabIdx >= 0\n        ? state.detailTabURIs[state.focusedTabIdx]\n        : undefined\n    ), [state.focusedTabIdx, tabsCacheKey]);\n\n    useEffect(() => {\n      if (onFocusedTabChange) {\n        onFocusedTabChange(focusedTabURI);\n      }\n    }, [onFocusedTabChange, focusedTabURI]);\n\n    const spawnTab: TabbedWorkspaceContextSpec<any, any>[\"spawnTab\"] = useCallback(\n      ((uri: string, opts) => dispatch({ type: 'spawn-tab', payload: { uri, atIdx: opts?.atIdx } })),\n      [dispatch]);\n\n    const closeTabWithURI = useCallback(\n      (uri => {\n        const idx = state.detailTabURIs.indexOf(uri);\n        if (idx >= 0) {\n          dispatch({ type: 'close-tab', payload: { idx } });\n        }\n      }),\n      [dispatch, tabsCacheKey]);\n\n    const navigateFocusedTab = useCallback(\n      (uri => dispatch({ type: 'navigate-focused-tab', payload: { uri }})),\n      [dispatch]);\n\n    const protoConfig = useMemo(() => protocolConfiguration, []);\n\n    const ctx: TabbedWorkspaceContextSpec<Proto, SidebarID> = useMemo((() => ({\n      spawnTab,\n      closeTabWithURI,\n      navigateFocusedTab,\n      protocolConfiguration: protoConfig,\n      focusedTabURI,\n      dispatch,\n      state,\n    })), [focusedTabURI, spawnTab, closeTabWithURI, navigateFocusedTab, state, protoConfig, dispatch]);\n\n    return (\n      <TabbedWorkspaceContext.Provider value={ctx}>\n        {children}\n      </TabbedWorkspaceContext.Provider>\n    );\n\n  };\n\n  return TabbedWorkspaceContextProvider;\n}\n\n\nexport interface TabbedWorkspaceContextProviderProps {\n  stateKey: string\n  onFocusedTabChange?: (newFocusedTabURI: string | undefined) => void\n\n}\n"]}

package/dependencies-local/extension-kit/widgets/TabbedWorkspace/detail.d.ts

@@ -0,0 +1,9 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import React from 'react';
+export declare const DetailTab: React.FC<{
+    uri: string;
+}>;
+export declare const DetailTabTitle: React.FC<{
+    uri: string;
+}>;

package/dependencies-local/extension-kit/widgets/TabbedWorkspace/detail.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DetailTabTitle = exports.DetailTab = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _core = require("@blueprintjs/core");
+
+var _ErrorBoundary = _interopRequireDefault(require("../ErrorBoundary"));
+
+var _context = require("./context");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/** @jsx jsx */
+
+/** @jsxFrag React.Fragment */
+const DetailTab = (0, _react.memo)(function ({
+  uri
+}) {
+  const {
+    protocolConfiguration
+  } = (0, _react.useContext)(_context.TabbedWorkspaceContext);
+  const [proto, _path] = uri.split(':');
+  const protoConf = protocolConfiguration[proto];
+
+  if (protoConf) {
+    const View = protoConf.main;
+    return (0, _react2.jsx)(_ErrorBoundary.default, {
+      viewName: `${proto} view`
+    }, (0, _react2.jsx)(View, {
+      uri: _path
+    }));
+  } else {
+    return (0, _react2.jsx)(_core.NonIdealState, {
+      icon: "heart-broken",
+      description: `Unknown protocol ${proto}`
+    });
+  }
+});
+exports.DetailTab = DetailTab;
+const DetailTabTitle = (0, _react.memo)(function ({
+  uri
+}) {
+  const {
+    protocolConfiguration
+  } = (0, _react.useContext)(_context.TabbedWorkspaceContext);
+  const [proto, _path] = uri.split(':');
+  const protoConf = protocolConfiguration[proto];
+
+  if (protoConf) {
+    const View = protoConf.title;
+    return (0, _react2.jsx)(View, {
+      uri: _path
+    });
+  } else {
+    return (0, _react2.jsx)(_react.default.Fragment, null, uri);
+  }
+});
+exports.DetailTabTitle = DetailTabTitle;

package/dependencies-local/extension-kit/widgets/TabbedWorkspace/detail.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail.js","sourceRoot":"","sources":["../../../src/widgets/TabbedWorkspace/detail.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,8BAA8B;AAE9B,OAAO,KAAK,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,GAAG,EAAE,MAAM,gBAAgB,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EAAE,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAGnD,MAAM,CAAC,MAAM,SAAS,GAA8B,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE;IACxE,MAAM,EAAE,qBAAqB,EAAE,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACrE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,SAAS,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,SAAS,EAAE;QACb,MAAM,IAAI,GAAG,SAAS,CAAC,IAAI,CAAC;QAC5B,OAAO,IAAC,aAAa,IAAC,QAAQ,EAAE,GAAG,KAAK,OAAO;YAAE,IAAC,IAAI,IAAC,GAAG,EAAE,KAAK,GAAI,CAAgB,CAAC;KACvF;SAAM;QACL,OAAO,IAAC,aAAa,IAAC,IAAI,EAAC,cAAc,EAAC,WAAW,EAAE,oBAAoB,KAAK,EAAE,GAAI,CAAC;KACxF;AACH,CAAC,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,cAAc,GAA8B,IAAI,CAAC,UAAU,EAAE,GAAG,EAAE;IAC7E,MAAM,EAAE,qBAAqB,EAAE,GAAG,UAAU,CAAC,sBAAsB,CAAC,CAAC;IACrE,MAAM,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACtC,MAAM,SAAS,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAC/C,IAAI,SAAS,EAAE;QACb,MAAM,IAAI,GAAG,SAAS,CAAC,KAAK,CAAC;QAC7B,OAAO,IAAC,IAAI,IAAC,GAAG,EAAE,KAAK,GAAI,CAAC;KAC7B;SAAM;QACL,OAAO,0BAAG,GAAG,CAAI,CAAC;KACnB;AACH,CAAC,CAAC,CAAC","sourcesContent":["/** @jsx jsx */\n/** @jsxFrag React.Fragment */\n\nimport React, { memo, useContext } from 'react';\nimport { jsx } from '@emotion/react';\nimport { NonIdealState } from '@blueprintjs/core';\nimport ErrorBoundary from '../ErrorBoundary';\nimport { TabbedWorkspaceContext } from './context';\n\n\nexport const DetailTab: React.FC<{ uri: string }> = memo(function ({ uri }) {\n  const { protocolConfiguration } = useContext(TabbedWorkspaceContext);\n  const [proto, _path] = uri.split(':');\n  const protoConf = protocolConfiguration[proto];\n  if (protoConf) {\n    const View = protoConf.main;\n    return <ErrorBoundary viewName={`${proto} view`}><View uri={_path} /></ErrorBoundary>;\n  } else {\n    return <NonIdealState icon=\"heart-broken\" description={`Unknown protocol ${proto}`} />;\n  }\n});\n\n\nexport const DetailTabTitle: React.FC<{ uri: string }> = memo(function ({ uri }) {\n  const { protocolConfiguration } = useContext(TabbedWorkspaceContext);\n  const [proto, _path] = uri.split(':');\n  const protoConf = protocolConfiguration[proto];\n  if (protoConf) {\n    const View = protoConf.title;\n    return <View uri={_path} />;\n  } else {\n    return <>{uri}</>;\n  }\n});\n"]}

package/dependencies-local/extension-kit/widgets/TabbedWorkspace/index.d.ts

@@ -0,0 +1,54 @@
+/** @jsx jsx */
+/** @jsxFrag React.Fragment */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { type IconName } from '@blueprintjs/core';
+import { type WorkspaceProps } from '../Workspace';
+import type { SuperSidebarConfig } from './types';
+/**
+ * Wraps Workspace, adding tabbed GUI features.
+ * Use inside TabbedWorkspaceContextProvider.
+ */
+export interface TabbedWorkspaceProps<SidebarIDs extends Readonly<string[]> = []> {
+    /**
+     * Configuration for individual sidebars, keyed by internal sidebar ID.
+     * If there is more than one sidebar, sidebar selector is shown.
+     */
+    sidebarConfig: SidebarIDs['length'] extends 0 ? undefined : SuperSidebarConfig<SidebarIDs>;
+    /**
+     * Sidebar IDs as a list. This is used to order sidebars.
+     * TODO: Eliminate in favor of using weights or another way of ordering?
+     */
+    sidebarIDs: SidebarIDs;
+    /**
+     * @deprecated use `defaultTabPrompt`
+     *
+     * “Home” view shown by default when there are no tabs
+     * or when explicitly invoked by the user.
+     */
+    newTabPrompt?: JSX.Element;
+    /**
+     * View shown by default when there are no tabs
+     * or when explicitly navigated to by the user.
+     *
+     * If not provided, some tab must be spawned programmatically
+     * or user will see nothing.
+     */
+    defaultTab?: {
+        panel: JSX.Element;
+        title?: JSX.Element | string;
+        icon?: IconName;
+    };
+    /** Set global mode bar for the workspace. */
+    globalMode?: WorkspaceProps['globalMode'];
+    /** Set the status bar for the workspace. */
+    statusBar?: WorkspaceProps['statusBar'];
+    sidebarWidth?: number;
+    sidebarPosition?: WorkspaceProps['sidebarPosition'];
+    /** If not provided, sidebar cannot be resized. */
+    onSidebarResize?: (newWidth: number) => void;
+    className?: string;
+}
+declare const TabbedWorkspace: React.MemoExoticComponent<typeof TabbedWorkspace_>;
+declare function TabbedWorkspace_<SidebarIDs extends Readonly<string[]> = []>({ sidebarConfig, sidebarIDs, newTabPrompt: defaultTabLegacy, defaultTab, globalMode, statusBar, sidebarWidth, sidebarPosition, onSidebarResize, className, }: TabbedWorkspaceProps<SidebarIDs>): jsx.JSX.Element;
+export default TabbedWorkspace;

package/dependencies-local/extension-kit/widgets/TabbedWorkspace/index.js

@@ -0,0 +1,301 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _reactHelmet = require("react-helmet");
+
+var _react2 = require("@emotion/react");
+
+var _styled = _interopRequireDefault(require("@emotion/styled"));
+
+var _core = require("@blueprintjs/core");
+
+var _Workspace = _interopRequireDefault(require("../Workspace"));
+
+var _context = require("./context");
+
+var _detail = require("./detail");
+
+var _SuperSidebar = _interopRequireDefault(require("./SuperSidebar"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/** @jsx jsx */
+
+/** @jsxFrag React.Fragment */
+const DEFAULT_TAB_TITLE = '(unnamed tab)';
+const TabbedWorkspace = (0, _react.memo)(TabbedWorkspace_);
+
+function TabbedWorkspace_({
+  sidebarConfig,
+  sidebarIDs,
+  newTabPrompt: defaultTabLegacy,
+  defaultTab,
+  globalMode,
+  statusBar,
+  sidebarWidth,
+  sidebarPosition,
+  onSidebarResize,
+  className
+}) {
+  var _a, _b;
+
+  const {
+    state,
+    dispatch,
+    protocolConfiguration,
+    focusedTabURI
+  } = (0, _react.useContext)(_context.TabbedWorkspaceContext);
+  const focusedTabRef = (0, _react.useRef)(null);
+  const [title, setTitle] = (0, _react.useState)(DEFAULT_TAB_TITLE);
+  const paneHasTitle = title !== DEFAULT_TAB_TITLE;
+  (0, _react.useEffect)(() => {
+    let cancelled = false;
+
+    if (!focusedTabURI) {
+      setTitle(DEFAULT_TAB_TITLE);
+      return;
+    }
+
+    (async () => {
+      var _a, _b;
+
+      if (focusedTabURI) {
+        const [proto, path] = focusedTabURI.split(':');
+        const title = await ((_b = (_a = protocolConfiguration[proto]) === null || _a === void 0 ? void 0 : _a.plainTitle) === null || _b === void 0 ? void 0 : _b.call(_a, path));
+
+        if (cancelled) {
+          return;
+        }
+
+        if (title) {
+          setTitle(title);
+        } else {
+          setTitle(DEFAULT_TAB_TITLE);
+        }
+      }
+    })();
+
+    return function cleanUp() {
+      cancelled = true;
+    };
+  }, [focusedTabURI]);
+  (0, _react.useEffect)(() => {
+    var _a;
+
+    if (state.focusedTabIdx >= 0) {
+      (_a = focusedTabRef.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView();
+    }
+  }, [state.focusedTabIdx]);
+  const sidebar = (0, _react.useMemo)(() => {
+    var _a;
+
+    if (sidebarIDs.length > 0 && sidebarConfig !== undefined) {
+      return (0, _react2.jsx)(_SuperSidebar.default, {
+        config: sidebarConfig,
+        sidebarIDs: sidebarIDs,
+        width: sidebarWidth,
+        onResize: onSidebarResize,
+        resizeSensorPosition: //Resize sensor is on the side where main content is,
+        //i.e. opposite of where sidebar is relative to main content.
+        sidebarPosition === 'left' ? 'right' : 'left',
+        minWidth: 250,
+        maxWidth: 600,
+        selectedSidebarID: (_a = state.selectedSidebarID) !== null && _a !== void 0 ? _a : sidebarIDs[0],
+        onSelectSidebar: sidebarIDs.length > 1 ? id => dispatch({
+          type: 'focus-sidebar',
+          payload: {
+            id
+          }
+        }) : undefined
+      });
+    } else {
+      return undefined;
+    }
+  }, [sidebarIDs.length > 0, sidebarIDs.toString(), state.selectedSidebarID, dispatch, sidebarWidth, onSidebarResize, sidebarPosition, sidebarConfig]);
+  const tabPanes = (0, _react.useMemo)(() => {
+    var _a;
+
+    return ((_a = state.detailTabURIs) !== null && _a !== void 0 ? _a : []).map(uri => [uri, [(0, _react2.jsx)(_detail.DetailTab, {
+      uri: uri
+    }), (0, _react2.jsx)(_detail.DetailTabTitle, {
+      uri: uri
+    })]]).reduce((prev, curr) => prev.set(curr[0], curr[1]), new Map());
+  }, [((_a = state.detailTabURIs) !== null && _a !== void 0 ? _a : []).slice().sort().toString()]);
+  const tabTitles = (0, _react.useMemo)(() => {
+    var _a;
+
+    return ((_a = state.detailTabURIs) !== null && _a !== void 0 ? _a : []).map((uri, idx) => {
+      var _a, _b;
+
+      return [uri, (0, _react2.jsx)("div", {
+        css: (0, _react2.css)`height: 24px;`,
+        ref: idx === state.focusedTabIdx ? focusedTabRef : undefined
+      }, (0, _react2.jsx)(TabTitleButton, {
+        interactive: idx !== state.focusedTabIdx,
+        minimal: idx !== state.focusedTabIdx,
+        title: uri,
+        onRemove: evt => {
+          dispatch({
+            type: 'close-tab',
+            payload: {
+              idx
+            }
+          });
+          evt.stopPropagation();
+        }
+      }, (_b = (_a = tabPanes.get(uri)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : DEFAULT_TAB_TITLE))];
+    }).reduce((prev, curr) => prev.set(curr[0], curr[1]), new Map());
+  }, [state.focusedTabIdx, tabPanes, dispatch, focusedTabRef.current]);
+  const homeTab = (0, _react.useMemo)(() => {
+    var _a, _b, _c;
+
+    return defaultTab || defaultTabLegacy ? (0, _react2.jsx)(_core.Tab, {
+      id: _context.SPECIAL_TAB_IDX.new,
+      title: (0, _react2.jsx)(TabTitleButton, {
+        minimal: state.focusedTabIdx !== _context.SPECIAL_TAB_IDX.new,
+        icon: (_a = defaultTab === null || defaultTab === void 0 ? void 0 : defaultTab.icon) !== null && _a !== void 0 ? _a : 'home'
+      }, (_b = defaultTab === null || defaultTab === void 0 ? void 0 : defaultTab.title) !== null && _b !== void 0 ? _b : "Home"),
+      panel: (_c = defaultTab === null || defaultTab === void 0 ? void 0 : defaultTab.panel) !== null && _c !== void 0 ? _c : defaultTabLegacy
+    }) : null;
+  }, [state.focusedTabIdx === _context.SPECIAL_TAB_IDX.new, defaultTab, defaultTabLegacy]);
+  const handleSelectedTabChange = (0, _react.useCallback)((idx, oldIdx) => dispatch({
+    type: 'focus-tab',
+    payload: {
+      idx
+    }
+  }), [dispatch]);
+  return (0, _react2.jsx)(_Workspace.default, {
+    sidebar: sidebar,
+    sidebarPosition: sidebarPosition,
+    globalMode: globalMode,
+    statusBar: statusBar,
+    className: className
+  }, (0, _react2.jsx)(Tabs, {
+    id: "detailTabs",
+    renderActiveTabPanelOnly: true,
+    selectedTabId: state.focusedTabIdx,
+    onChange: handleSelectedTabChange
+  }, paneHasTitle ? (0, _react2.jsx)(_reactHelmet.Helmet, null, (0, _react2.jsx)("title", null, title)) : null, homeTab, ((_b = state.detailTabURIs) !== null && _b !== void 0 ? _b : []).map((uri, idx) => {
+    var _a;
+
+    return (0, _react2.jsx)(_core.Tab, {
+      id: idx,
+      key: uri,
+      panel: (_a = tabPanes.get(uri)) === null || _a === void 0 ? void 0 : _a[0],
+      title: tabTitles.get(uri)
+    });
+  })));
+}
+
+;
+const Tabs = (0, _styled.default)(_core.Tabs)`
+  background: ${_core.Colors.LIGHT_GRAY2};
+  .bp4-dark & { background: ${_core.Colors.GRAY1}; }
+  flex: 1;
+  display: flex;
+  flex-flow: column nowrap;
+
+  position: relative;
+
+  .bp4-tab-list {
+    overflow-x: auto;
+    height: 24px;
+    position: relative;
+
+    background: ${_core.Colors.GRAY1};
+    .bp4-dark & { background: ${_core.Colors.DARK_GRAY3}; }
+
+    /* Accommodate the new tab button, absolutely positioned */
+    white-space: nowrap;
+
+    /* Remove spacing between tabs */
+    > *:not(:last-child) {
+      margin-right: 2px;
+    }
+
+    /* Hide horizontal scrollbar (overlaps with tab titles on macOS) */
+    ::-webkit-scrollbar {
+      height: 0px;
+      background: transparent;
+    }
+  }
+
+  .bp4-tab-indicator { display: none; }
+
+  /* Tab header. */
+  .bp4-tab {
+    line-height: unset;
+    position: unset;
+    display: inline-block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 400px;
+
+    &.pinned-tab {
+      position: sticky;
+      left: 0;
+      z-index: 1;
+      box-shadow: 0 0 0 1px rgb(17 20 24 / 10%), 0 1px 1px rgb(17 20 24 / 20%), 0 2px 6px rgb(17 20 24 / 20%) !important;
+      background-color: ${_core.Colors.LIGHT_GRAY3} !important;
+      .bp4-dark & { background: ${_core.Colors.DARK_GRAY3} !important; }
+    }
+  }
+
+  /* Tab contents. */
+  .bp4-tab-panel {
+    flex: 1;
+    margin: 0;
+    padding: 5px;
+    position: relative;
+    background: ${_core.Colors.LIGHT_GRAY3};
+    .bp4-dark & { background: ${_core.Colors.DARK_GRAY3}; }
+  }
+`; // NOTE: Minimal is set when it’s *not* selected
+
+const TabTitleButton = (0, _styled.default)(_core.Tag)`
+  border-radius: 0;
+  height: 24px;
+  padding: 0 8px;
+  box-shadow: unset;
+
+  color: ${({
+  minimal
+}) => minimal ? _core.Colors.WHITE : _core.Colors.BLACK} !important;
+  ${({
+  minimal
+}) => minimal ? '' : `background: ${_core.Colors.LIGHT_GRAY3}`} !important;
+  /* NOTE: Selected item’s background must sync with tab-panel background. */
+
+  .bp4-tag-remove {
+    color: ${({
+  minimal
+}) => minimal ? _core.Colors.WHITE : _core.Colors.BLACK} !important;
+    opacity: .5;
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .bp4-dark & {
+    color: ${({
+  minimal
+}) => minimal ? _core.Colors.LIGHT_GRAY2 : _core.Colors.WHITE} !important;
+    ${({
+  minimal
+}) => minimal ? '' : `background: ${_core.Colors.DARK_GRAY3}`} !important;
+
+    .bp4-tag-remove {
+      color: ${({
+  minimal
+}) => minimal ? _core.Colors.LIGHT_GRAY2 : _core.Colors.WHITE} !important;
+    }
+  }
+`;
+var _default = TabbedWorkspace;
+exports.default = _default;