@dxos/plugin-help 0.7.4 → 0.7.5-labs.5f04cf6

package/dist/lib/browser/index.mjs

@@ -1,380 +1,36 @@
 import {
-  HELP_PLUGIN,
+  HelpContextProvider,
+  Key,
+  SHORTCUTS_DIALOG,
+  ShortcutsDialogContent,
+  ShortcutsHints,
+  ShortcutsList,
+  ShortcutsSection,
+  Tooltip,
+  floaterProps
+} from "./chunk-VNAN5GRY.mjs";
+import {
+  HELP_ACTION,
   HelpAction,
-  meta_default
-} from "./chunk-2EMBCGD5.mjs";
-
-// packages/plugins/plugin-help/src/HelpPlugin.tsx
-import React8 from "react";
-import { resolvePlugin as resolvePlugin2, parseIntentPlugin, LayoutAction } from "@dxos/app-framework";
-import { createExtension } from "@dxos/app-graph";
-import { create } from "@dxos/live-object";
-import { LocalStorageStore } from "@dxos/local-storage";
-
-// packages/plugins/plugin-help/src/components/HelpContextProvider/HelpContextProvider.tsx
-import React2, { useState, useEffect } from "react";
-import Joyride, { ACTIONS, EVENTS } from "react-joyride";
-import { usePlugins, resolvePlugin, parseLayoutPlugin } from "@dxos/app-framework";
-
-// packages/plugins/plugin-help/src/types.ts
-import { createContext } from "react";
-var HelpContext = createContext({
-  running: false,
-  steps: [],
-  setSteps: () => {
-  },
-  setIndex: () => {
-  },
-  start: () => {
-  },
-  stop: () => {
-  }
-});
-
-// packages/plugins/plugin-help/src/components/Tooltip/Tooltip.tsx
-import { useArrowNavigationGroup, useFocusableGroup } from "@fluentui/react-tabster";
-import { CaretLeft, CaretRight, Circle, X } from "@phosphor-icons/react";
-import React, { forwardRef } from "react";
-import { Button } from "@dxos/react-ui";
-import { getSize, mx } from "@dxos/react-ui-theme";
-var floaterProps = {
-  styles: {
-    // Arrow color is set by joyride.
-    arrow: {
-      length: 8,
-      spread: 16
-    },
-    floater: {
-      // TODO(burdon): Get tokens from theme.
-      filter: "drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.2))"
-    }
-  }
-};
-var Tooltip = /* @__PURE__ */ forwardRef(({ step: { title, content }, index, size, isLastStep, backProps, closeProps, primaryProps }, forwardedRef) => {
-  const arrowGroup = useArrowNavigationGroup({
-    axis: "horizontal"
-  });
-  const trapFocus = useFocusableGroup({
-    tabBehavior: "limited-trap-focus"
-  });
-  return /* @__PURE__ */ React.createElement("div", {
-    className: "flex flex-col is-[15rem] min-bs-[10rem] overflow-hidden rounded-md shadow-xl bg-accentSurface text-inverse",
-    role: "tooltip",
-    "data-testid": "helpPlugin.tooltip",
-    "data-step": index + 1,
-    ...trapFocus,
-    ref: forwardedRef
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "flex p-2"
-  }, /* @__PURE__ */ React.createElement("h2", {
-    className: "grow pli-2 plb-1 text-lg font-medium text-inverse"
-  }, title), /* @__PURE__ */ React.createElement(Button, {
-    density: "fine",
-    variant: "primary",
-    onClick: closeProps.onClick,
-    title: closeProps["aria-label"],
-    "data-testid": "helpPlugin.tooltip.close"
-  }, /* @__PURE__ */ React.createElement(X, {
-    weight: "bold",
-    className: getSize(4)
-  }))), /* @__PURE__ */ React.createElement("div", {
-    className: "flex grow pli-4 mlb-2"
-  }, content), /* @__PURE__ */ React.createElement("div", {
-    className: "flex p-2 items-center justify-between",
-    ...arrowGroup
-  }, /* @__PURE__ */ React.createElement(Button, {
-    variant: "primary",
-    onClick: backProps.onClick,
-    title: backProps["aria-label"],
-    classNames: [
-      !(index > 0 && backProps) && "invisible"
-    ],
-    "data-testid": "helpPlugin.tooltip.back"
-  }, /* @__PURE__ */ React.createElement(CaretLeft, {
-    className: getSize(5)
-  })), /* @__PURE__ */ React.createElement("div", {
-    className: "flex grow gap-2 justify-center"
-  }, /* @__PURE__ */ React.createElement("div", {
-    className: "flex"
-  }, Array.from({
-    length: size
-  }).map((_, i) => /* @__PURE__ */ React.createElement(Circle, {
-    key: i,
-    weight: index === i ? "fill" : "regular",
-    className: mx(getSize(2), "mli-1 cursor-pointer")
-  })))), isLastStep ? /* @__PURE__ */ React.createElement(Button, {
-    variant: "primary",
-    onClick: closeProps.onClick,
-    title: closeProps["aria-label"],
-    autoFocus: true,
-    "data-testid": "helpPlugin.tooltip.finish"
-  }, "Done") : /* @__PURE__ */ React.createElement(Button, {
-    variant: "primary",
-    onClick: primaryProps.onClick,
-    title: primaryProps["aria-label"],
-    autoFocus: true,
-    "data-testid": "helpPlugin.tooltip.next"
-  }, /* @__PURE__ */ React.createElement(CaretRight, {
-    className: getSize(6)
-  }))));
-});
-
-// packages/plugins/plugin-help/src/components/HelpContextProvider/HelpContextProvider.tsx
-var addStepClass = (target) => {
-  const element = typeof target === "string" ? document.querySelector(target) : target;
-  if (element) {
-    element.classList.add("joyride-target");
-  }
-};
-var removeTargetClass = (target) => {
-  const element = typeof target === "string" ? document.querySelector(target) : target;
-  if (element) {
-    element.classList.remove("joyride-target");
-  }
-};
-var getTarget = (step) => {
-  return typeof step.target === "string" ? document.querySelector(step.target) : step.target;
-};
-var waitForTarget = async (step) => {
-  if (typeof step.target === "string") {
-    const target = step.target;
-    const element = document.querySelector(target);
-    if (element) {
-      return;
-    }
-    await new Promise((resolve) => {
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.addedNodes.length > 0) {
-            const element2 = document.querySelector(target);
-            if (element2) {
-              observer.disconnect();
-              resolve();
-            }
-          }
-        });
-      });
-      observer.observe(document.body, {
-        childList: true,
-        subtree: true
-      });
-    });
-  }
-};
-var HelpContextProvider = ({ children, steps: initialSteps, running: runningProp, onRunningChanged }) => {
-  const { plugins } = usePlugins();
-  const layoutPlugin = resolvePlugin(plugins, parseLayoutPlugin);
-  const [running, setRunning] = useState(!!runningProp && !!getTarget(initialSteps[0]));
-  const [stepIndex, _setStepIndex] = useState(0);
-  const [steps, setSteps] = useState(initialSteps);
-  const paused = layoutPlugin?.provides.layout.dialogOpen;
-  const setStepIndex = (index) => {
-    if (runningProp) {
-      const step = steps[index];
-      step?.before?.({
-        plugins,
-        step
-      });
-    }
-    _setStepIndex(index);
-  };
-  const setRunningChanged = (state) => {
-    if (typeof runningProp !== "undefined") {
-      onRunningChanged?.(state);
-    } else {
-      if (state) {
-        setStepIndex(0);
-        setRunning(true);
-      } else {
-        setRunning(false);
-      }
-    }
-  };
-  useEffect(() => {
-    const timeout = setTimeout(async () => {
-      if (runningProp) {
-        await waitForTarget(steps[stepIndex]);
-        setStepIndex(0);
-        setRunning(true);
-      } else if (typeof runningProp !== "undefined") {
-        setRunning(false);
-      }
-    });
-    return () => clearTimeout(timeout);
-  }, [
-    runningProp
-  ]);
-  const callback = async (options) => {
-    const { type, action, index, size } = options;
-    switch (type) {
-      case EVENTS.STEP_BEFORE:
-        addStepClass(options.step.target);
-        break;
-      case EVENTS.TOUR_END:
-        break;
-      case EVENTS.STEP_AFTER:
-        removeTargetClass(options.step.target);
-        switch (action) {
-          case ACTIONS.NEXT:
-            if (index < size - 1) {
-              setStepIndex(index + 1);
-            }
-            break;
-          case ACTIONS.PREV:
-            if (index > 0) {
-              setStepIndex(index - 1);
-            }
-            break;
-          case ACTIONS.CLOSE:
-            setRunningChanged(false);
-            setStepIndex(0);
-            break;
-        }
-        break;
-    }
-  };
-  return /* @__PURE__ */ React2.createElement(HelpContext.Provider, {
-    value: {
-      running: running && !paused,
-      steps,
-      setSteps,
-      setIndex: setStepIndex,
-      start: () => setRunningChanged(true),
-      stop: () => setRunningChanged(false)
-    }
-  }, /* @__PURE__ */ React2.createElement("style", null, `.joyride-target {
-          --controls-opacity: 1;
-        }`), /* @__PURE__ */ React2.createElement(Joyride, {
-    continuous: true,
-    steps,
-    stepIndex,
-    run: running && !paused,
-    callback,
-    floaterProps,
-    tooltipComponent: Tooltip
-  }), children);
-};
-
-// packages/plugins/plugin-help/src/components/Shortcuts/ShortcutsDialog.tsx
-import React5 from "react";
-import { Button as Button2, Dialog, Icon, useTranslation as useTranslation2 } from "@dxos/react-ui";
-
-// packages/plugins/plugin-help/src/components/Shortcuts/ShortcutsList.tsx
-import React4, { Fragment } from "react";
-import { Keyboard } from "@dxos/keyboard";
-import { toLocalizedString, useTranslation } from "@dxos/react-ui";
-import { mx as mx3 } from "@dxos/react-ui-theme";
-
-// packages/plugins/plugin-help/src/components/Shortcuts/Key.tsx
-import React3 from "react";
-import { keySymbols } from "@dxos/keyboard";
-
-// packages/plugins/plugin-help/src/components/Shortcuts/styles.ts
-import { mx as mx2 } from "@dxos/react-ui-theme";
-var shortcutKey = mx2("inline-flex min-is-[24px] bs-[24px] pli-0.5 justify-center items-center text-xs", "rounded bg-neutral-100 dark:bg-neutral-900");
-
-// packages/plugins/plugin-help/src/components/Shortcuts/Key.tsx
-var Key = ({ binding }) => {
-  return /* @__PURE__ */ React3.createElement("span", {
-    role: "term",
-    className: "inline-flex gap-1",
-    "aria-label": binding,
-    id: binding
-  }, keySymbols(binding).map((c, i) => /* @__PURE__ */ React3.createElement("span", {
-    key: i,
-    className: shortcutKey
-  }, c)));
-};
-
-// packages/plugins/plugin-help/src/components/Shortcuts/ShortcutsList.tsx
-var ShortcutsList = () => {
-  const { t } = useTranslation(HELP_PLUGIN);
-  const bindings = Keyboard.singleton.getBindings();
-  bindings.sort((a, b) => {
-    return toLocalizedString(a.data, t)?.toLowerCase().localeCompare(toLocalizedString(b.data, t)?.toLowerCase());
-  });
-  return /* @__PURE__ */ React4.createElement("dl", {
-    className: mx3("is-fit grid grid-cols-[min-content_minmax(12rem,1fr)] gap-2 mlb-4 text-subdued")
-  }, bindings.map((binding, i) => /* @__PURE__ */ React4.createElement(Fragment, {
-    key: i
-  }, /* @__PURE__ */ React4.createElement(Key, {
-    binding: binding.shortcut
-  }), /* @__PURE__ */ React4.createElement("span", {
-    role: "definition",
-    className: "mis-4",
-    "aria-labelledby": binding.shortcut
-  }, toLocalizedString(binding.data, t)))));
-};
-
-// packages/plugins/plugin-help/src/components/Shortcuts/ShortcutsDialog.tsx
-var ShortcutsDialogContent = () => {
-  const { t } = useTranslation2(HELP_PLUGIN);
-  return /* @__PURE__ */ React5.createElement(Dialog.Content, {
-    classNames: "p-0 bs-content max-bs-full md:max-is-[25rem] overflow-hidden"
-  }, /* @__PURE__ */ React5.createElement("div", {
-    role: "none",
-    className: "flex justify-between mbe-1 pbs-3 pis-2 pie-3 @md:pbs-4 @md:pis-4 @md:pie-5"
-  }, /* @__PURE__ */ React5.createElement(Dialog.Title, null, t("shortcuts dialog title")), /* @__PURE__ */ React5.createElement(Dialog.Close, {
-    asChild: true
-  }, /* @__PURE__ */ React5.createElement(Button2, {
-    density: "fine",
-    variant: "ghost",
-    autoFocus: true
-  }, /* @__PURE__ */ React5.createElement(Icon, {
-    icon: "ph--x--regular",
-    size: 3
-  })))), /* @__PURE__ */ React5.createElement("div", {
-    className: "flex items-center justify-center"
-  }, /* @__PURE__ */ React5.createElement(ShortcutsList, null)));
-};
+  HelpContext
+} from "./chunk-24E4WRKH.mjs";
+import {
+  HelpCapabilities
+} from "./chunk-GJTAQWB6.mjs";
+import {
+  HELP_PLUGIN,
+  meta
+} from "./chunk-76XWX6N3.mjs";
 
-// packages/plugins/plugin-help/src/components/Shortcuts/ShortcutsHints.tsx
-import React6 from "react";
-import { Keyboard as Keyboard2 } from "@dxos/keyboard";
-import { Button as Button3, Icon as Icon2, toLocalizedString as toLocalizedString2, useTranslation as useTranslation3 } from "@dxos/react-ui";
-var Shortcut = ({ binding }) => {
-  const { t } = useTranslation3("os");
-  return /* @__PURE__ */ React6.createElement("div", {
-    role: "none",
-    className: "flex items-center gap-2 whitespace-nowrap"
-  }, /* @__PURE__ */ React6.createElement(Key, {
-    binding: binding.shortcut
-  }), /* @__PURE__ */ React6.createElement("span", {
-    className: "text-sm"
-  }, toLocalizedString2(binding.data, t)));
-};
-var ShortcutsHints = ({ onClose }) => {
-  const defaults = [
-    "meta+k",
-    "meta+/",
-    "meta+,"
-  ];
-  const bindings = Keyboard2.singleton.getBindings();
-  const hints = bindings.filter((binding) => defaults.includes(binding.shortcut));
-  return /* @__PURE__ */ React6.createElement("div", {
-    role: "none",
-    className: "flex overflow-hidden px-2 gap-4"
-  }, hints.map((binding) => /* @__PURE__ */ React6.createElement(Shortcut, {
-    key: binding.shortcut,
-    binding
-  })), onClose && /* @__PURE__ */ React6.createElement(Button3, {
-    variant: "ghost",
-    classNames: "p-0 cursor-pointer",
-    onClick: onClose
-  }, /* @__PURE__ */ React6.createElement(Icon2, {
-    icon: "ph--x--regular",
-    size: 4
-  })));
-};
+// packages/plugins/plugin-help/src/capabilities/index.ts
+import { lazy } from "@dxos/app-framework";
+var AppGraphBuilder = lazy(() => import("./app-graph-builder-G3FCDRBG.mjs"));
+var ReactContext = lazy(() => import("./react-context-SIW6XKOC.mjs"));
+var ReactSurface = lazy(() => import("./react-surface-TZZUXIVX.mjs"));
+var HelpState = lazy(() => import("./state-SLKOTRHH.mjs"));
 
-// packages/plugins/plugin-help/src/components/Shortcuts/ShortcutsSection.tsx
-import React7 from "react";
-import { descriptionText } from "@dxos/react-ui-theme";
-var ShortcutsSection = () => {
-  return /* @__PURE__ */ React7.createElement("section", {
-    className: descriptionText
-  }, /* @__PURE__ */ React7.createElement(ShortcutsList, null));
-};
+// packages/plugins/plugin-help/src/HelpPlugin.tsx
+import { createResolver, defineModule, definePlugin, Events, contributes, Capabilities } from "@dxos/app-framework";
 
 // packages/plugins/plugin-help/src/translations.ts
 var translations_default = [
@@ -391,132 +47,41 @@ var translations_default = [
 ];
 
 // packages/plugins/plugin-help/src/HelpPlugin.tsx
-var HelpPlugin = ({ steps = [] }) => {
-  const settings = new LocalStorageStore(HELP_PLUGIN, {
-    showHints: true,
-    showWelcome: true
-  });
-  const state = create({
-    running: false
-  });
-  return {
-    meta: meta_default,
-    ready: async () => {
-      settings.prop({
-        key: "showHints",
-        type: LocalStorageStore.bool({
-          allowUndefined: true
-        })
-      }).prop({
-        key: "showWelcome",
-        type: LocalStorageStore.bool({
-          allowUndefined: true
-        })
-      });
-    },
-    provides: {
-      context: ({ children }) => {
-        return /* @__PURE__ */ React8.createElement(HelpContextProvider, {
-          steps,
-          running: state.running,
-          onRunningChanged: (newState) => {
-            state.running = newState;
-            if (!newState) {
-              settings.values.showHints = false;
-            }
-          }
-        }, children);
-      },
-      translations: translations_default,
-      graph: {
-        builder: (plugins) => {
-          const intentPlugin = resolvePlugin2(plugins, parseIntentPlugin);
-          return createExtension({
-            id: HELP_PLUGIN,
-            filter: (node) => node.id === "root",
-            actions: () => [
-              {
-                id: HelpAction.START,
-                data: async () => {
-                  settings.values.showHints = true;
-                  await intentPlugin?.provides.intent.dispatch({
-                    plugin: HELP_PLUGIN,
-                    action: HelpAction.START
-                  });
-                },
-                properties: {
-                  label: [
-                    "open help tour",
-                    {
-                      ns: HELP_PLUGIN
-                    }
-                  ],
-                  icon: "ph--info--regular",
-                  keyBinding: {
-                    macos: "shift+meta+/",
-                    // TODO(wittjosiah): Test on windows to see if it behaves the same as linux.
-                    windows: "shift+ctrl+/",
-                    linux: "shift+ctrl+?"
-                  },
-                  testId: "helpPlugin.openHelp"
-                }
-              },
-              {
-                id: "dxos.org/plugin/help/open-shortcuts",
-                data: async () => {
-                  settings.values.showHints = true;
-                  await intentPlugin?.provides.intent.dispatch({
-                    action: LayoutAction.SET_LAYOUT,
-                    data: {
-                      element: "dialog",
-                      component: `${HELP_PLUGIN}/Shortcuts`
-                    }
-                  });
-                },
-                properties: {
-                  label: [
-                    "open shortcuts label",
-                    {
-                      ns: HELP_PLUGIN
-                    }
-                  ],
-                  icon: "ph--keyboard--regular",
-                  keyBinding: {
-                    macos: "meta+ctrl+/"
-                  }
-                }
-              }
-            ]
-          });
-        }
-      },
-      surface: {
-        component: ({ data, role }) => {
-          switch (role) {
-            case "hints":
-              return /* @__PURE__ */ React8.createElement(ShortcutsHints, null);
-            case "keyshortcuts":
-              return /* @__PURE__ */ React8.createElement(ShortcutsList, null);
-          }
-          switch (data.component) {
-            case `${HELP_PLUGIN}/Shortcuts`:
-              return /* @__PURE__ */ React8.createElement(ShortcutsDialogContent, null);
-          }
-          return null;
-        }
-      },
-      intent: {
-        resolver: async (intent) => {
-          switch (intent.action) {
-            case HelpAction.START:
-              state.running = true;
-              break;
-          }
-        }
-      }
-    }
-  };
-};
+var HelpPlugin = ({ steps = [] }) => definePlugin(meta, [
+  defineModule({
+    id: `${meta.id}/module/state`,
+    activatesOn: Events.Startup,
+    activate: HelpState
+  }),
+  defineModule({
+    id: `${meta.id}/module/translations`,
+    activatesOn: Events.SetupTranslations,
+    activate: () => contributes(Capabilities.Translations, translations_default)
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-context`,
+    activatesOn: Events.Startup,
+    activate: () => ReactContext(steps)
+  }),
+  defineModule({
+    id: `${meta.id}/module/react-surface`,
+    activatesOn: Events.Startup,
+    activate: ReactSurface
+  }),
+  defineModule({
+    id: `${meta.id}/module/intent-resolver`,
+    activatesOn: Events.SetupIntents,
+    activate: (context) => contributes(Capabilities.IntentResolver, createResolver(HelpAction.Start, () => {
+      const state = context.requestCapability(HelpCapabilities.MutableState);
+      state.running = true;
+    }))
+  }),
+  defineModule({
+    id: `${meta.id}/module/app-graph-builder`,
+    activatesOn: Events.SetupAppGraph,
+    activate: AppGraphBuilder
+  })
+]);
 
 // packages/plugins/plugin-help/src/hooks/useHelp.tsx
 import { useContext } from "react";
@@ -524,20 +89,23 @@ import { raise } from "@dxos/debug";
 var useHelp = () => {
   return useContext(HelpContext) ?? raise(new Error("Missing HelpContext"));
 };
-
-// packages/plugins/plugin-help/src/index.ts
-var src_default = HelpPlugin;
 export {
+  HELP_ACTION,
+  HELP_PLUGIN,
+  HelpAction,
+  HelpCapabilities,
+  HelpContext,
   HelpContextProvider,
   HelpPlugin,
   Key,
+  SHORTCUTS_DIALOG,
   ShortcutsDialogContent,
   ShortcutsHints,
   ShortcutsList,
   ShortcutsSection,
   Tooltip,
-  src_default as default,
   floaterProps,
+  meta,
   useHelp
 };
 //# sourceMappingURL=index.mjs.map