@dxos/plugin-help 0.8.4-main.f5c0578 → 0.8.4-main.fcc0d83b33

package/dist/lib/browser/chunk-53QC3FTJ.mjs

@@ -0,0 +1,34 @@
+// src/types/capabilities.ts
+import * as Schema from "effect/Schema";
+import { Capability } from "@dxos/app-framework";
+import { meta } from "#meta";
+(function(HelpCapabilities2) {
+  HelpCapabilities2.StateSchema = Schema.mutable(Schema.Struct({
+    running: Schema.Boolean,
+    showHints: Schema.Boolean,
+    showWelcome: Schema.Boolean
+  }));
+  HelpCapabilities2.State = Capability.make(`${meta.id}.capability.state`);
+})(HelpCapabilities || (HelpCapabilities = {}));
+var HelpCapabilities;
+
+// src/types/schema.ts
+import { createContext } from "react";
+var HelpContext = createContext({
+  running: false,
+  steps: [],
+  setSteps: () => {
+  },
+  setIndex: () => {
+  },
+  start: () => {
+  },
+  stop: () => {
+  }
+});
+
+export {
+  HelpCapabilities,
+  HelpContext
+};
+//# sourceMappingURL=chunk-53QC3FTJ.mjs.map

package/dist/lib/browser/chunk-53QC3FTJ.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/types/capabilities.ts", "../../../src/types/schema.ts"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport { type Atom } from '@effect-atom/atom-react';\nimport * as Schema from 'effect/Schema';\n\nimport { Capability } from '@dxos/app-framework';\n\nimport { meta } from '#meta';\n\nexport namespace HelpCapabilities {\n  export const StateSchema = Schema.mutable(\n    Schema.Struct({\n      running: Schema.Boolean,\n      showHints: Schema.Boolean,\n      showWelcome: Schema.Boolean,\n    }),\n  );\n\n  export type State = Schema.Schema.Type<typeof StateSchema>;\n\n  export const State = Capability.make<Atom.Writable<State>>(`${meta.id}.capability.state`);\n}\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Context, createContext } from 'react';\nimport { type Step as BaseStep } from 'react-joyride';\n\nimport { type CapabilityManager } from '@dxos/app-framework';\n\nexport type Step = BaseStep & {\n  before?: (capabilities: CapabilityManager.CapabilityManager) => void;\n};\n\nexport type HelpContextType = {\n  running: boolean;\n  steps: Step[];\n  setSteps: (steps: Step[]) => void;\n  setIndex: (index: number) => void;\n  start: () => void;\n  stop: () => void;\n};\n\nexport const HelpContext: Context<HelpContextType> = createContext<HelpContextType>({\n  running: false,\n  steps: [],\n  setSteps: () => {},\n  setIndex: () => {},\n  start: () => {},\n  stop: () => {},\n});\n"],
+  "mappings": ";AAKA,YAAYA,YAAY;AAExB,SAASC,kBAAkB;AAE3B,SAASC,YAAY;UAEJC,mBAAAA;oBACFC,cAAqBC,eACzBC,cAAO;IACZC,SAAgBC;IAChBC,WAAkBD;IAClBE,aAAoBF;EACtB,CAAA,CAAA;oBAKWG,QAAQV,WAAWW,KAA2B,GAAGV,KAAKW,EAAE,mBAAmB;AAC1F,GAZiBV,qBAAAA,mBAAAA,CAAAA,EAAAA;;;;ACPjB,SAAuBW,qBAAqB;AAkBrC,IAAMC,cAAwCD,cAA+B;EAClFE,SAAS;EACTC,OAAO,CAAA;EACPC,UAAU,MAAA;EAAO;EACjBC,UAAU,MAAA;EAAO;EACjBC,OAAO,MAAA;EAAO;EACdC,MAAM,MAAA;EAAO;AACf,CAAA;",
+  "names": ["Schema", "Capability", "meta", "HelpCapabilities", "StateSchema", "mutable", "Struct", "running", "Boolean", "showHints", "showWelcome", "State", "make", "id", "createContext", "HelpContext", "running", "steps", "setSteps", "setIndex", "start", "stop"]
+}

package/dist/lib/browser/chunk-J5LGTIGS.mjs

@@ -0,0 +1,10 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+export {
+  __export
+};
+//# sourceMappingURL=chunk-J5LGTIGS.mjs.map

package/dist/lib/browser/chunk-J5LGTIGS.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/lib/browser/chunk-RWK34XL5.mjs

@@ -0,0 +1,31 @@
+import {
+  __export
+} from "./chunk-J5LGTIGS.mjs";
+
+// src/operations/definitions.ts
+var definitions_exports = {};
+__export(definitions_exports, {
+  Start: () => Start
+});
+import * as Schema from "effect/Schema";
+import { Capability } from "@dxos/app-framework";
+import { Operation } from "@dxos/compute";
+import { meta } from "#meta";
+var HELP_OPERATION = `${meta.id}.operation`;
+var Start = Operation.make({
+  meta: {
+    key: `${HELP_OPERATION}.start`,
+    name: "Start Help"
+  },
+  services: [
+    Capability.Service
+  ],
+  input: Schema.Void,
+  output: Schema.Void
+});
+
+export {
+  Start,
+  definitions_exports
+};
+//# sourceMappingURL=chunk-RWK34XL5.mjs.map

package/dist/lib/browser/chunk-RWK34XL5.mjs.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/operations/definitions.ts"],
+  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Schema from 'effect/Schema';\n\nimport { Capability } from '@dxos/app-framework';\nimport { Operation } from '@dxos/compute';\n\nimport { meta } from '#meta';\n\nconst HELP_OPERATION = `${meta.id}.operation`;\n\nexport const Start = Operation.make({\n  meta: { key: `${HELP_OPERATION}.start`, name: 'Start Help' },\n  services: [Capability.Service],\n  input: Schema.Void,\n  output: Schema.Void,\n});\n"],
+  "mappings": ";;;;;AAAA;;;;AAIA,YAAYA,YAAY;AAExB,SAASC,kBAAkB;AAC3B,SAASC,iBAAiB;AAE1B,SAASC,YAAY;AAErB,IAAMC,iBAAiB,GAAGD,KAAKE,EAAE;AAE1B,IAAMC,QAAQJ,UAAUK,KAAK;EAClCJ,MAAM;IAAEK,KAAK,GAAGJ,cAAAA;IAAwBK,MAAM;EAAa;EAC3DC,UAAU;IAACT,WAAWU;;EACtBC,OAAcC;EACdC,QAAeD;AACjB,CAAA;",
+  "names": ["Schema", "Capability", "Operation", "meta", "HELP_OPERATION", "id", "Start", "make", "key", "name", "services", "Service", "input", "Void", "output"]
+}

package/dist/lib/browser/index.mjs

@@ -1,112 +1,376 @@
-import {
-  Key,
-  SHORTCUTS_DIALOG,
-  ShortcutsDialogContent,
-  ShortcutsHints,
-  ShortcutsList,
-  ShortcutsSection,
-  Tooltip,
-  WelcomeTour,
-  floaterProps
-} from "./chunk-GIDPSFGY.mjs";
-import {
-  HelpAction,
-  HelpContext
-} from "./chunk-J2SJSGSX.mjs";
 import {
   HelpCapabilities
-} from "./chunk-LDRUZNSN.mjs";
-import {
-  HELP_PLUGIN,
-  meta
-} from "./chunk-3Y4CMOZP.mjs";
+} from "./chunk-53QC3FTJ.mjs";
+import "./chunk-J5LGTIGS.mjs";
 
-// src/capabilities/index.ts
-import { lazy } from "@dxos/app-framework";
-var AppGraphBuilder = lazy(() => import("./app-graph-builder-TUTK2ONB.mjs"));
-var ReactRoot = lazy(() => import("./react-root-5GSVXKQD.mjs"));
-var ReactSurface = lazy(() => import("./react-surface-V7U4IDJV.mjs"));
-var HelpState = lazy(() => import("./state-IXBTB3WH.mjs"));
+// src/components/Shortcuts/ShortcutsHints.tsx
+import React2 from "react";
+import { Keyboard } from "@dxos/keyboard";
+import { IconButton, toLocalizedString, useTranslation } from "@dxos/react-ui";
+import { osTranslations } from "@dxos/ui-theme";
 
-// src/HelpPlugin.tsx
-import { Capabilities, Events, contributes, createResolver, defineModule, definePlugin } from "@dxos/app-framework";
+// src/components/Shortcuts/Key.tsx
+import React from "react";
+import { keySymbols } from "@dxos/keyboard";
 
-// src/translations.ts
-var translations = [
-  {
-    "en-US": {
-      [meta.id]: {
-        "plugin name": "Help",
-        "open help tour": "Show welcome tour",
-        "open shortcuts label": "Show shortcuts",
-        "shortcuts dialog title": "Shortcuts"
-      }
+// src/components/Shortcuts/styles.ts
+import { mx } from "@dxos/ui-theme";
+var shortcutKey = mx("inline-flex min-w-[24px] h-[24px] px-0.5 justify-center items-center text-xs", "rounded-sm bg-neutral-100 dark:bg-neutral-900");
+
+// src/components/Shortcuts/Key.tsx
+var Key = ({ binding }) => {
+  return /* @__PURE__ */ React.createElement("span", {
+    role: "term",
+    className: "inline-flex gap-1",
+    "aria-label": binding,
+    id: binding
+  }, keySymbols(binding).map((c, i) => /* @__PURE__ */ React.createElement("span", {
+    key: i,
+    className: shortcutKey
+  }, c)));
+};
+
+// src/components/Shortcuts/ShortcutsHints.tsx
+var Shortcut = ({ binding }) => {
+  const { t } = useTranslation(osTranslations);
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "flex items-center gap-2 whitespace-nowrap"
+  }, /* @__PURE__ */ React2.createElement(Key, {
+    binding: binding.shortcut
+  }), /* @__PURE__ */ React2.createElement("span", {
+    className: "text-sm"
+  }, toLocalizedString(binding.data, t)));
+};
+var ShortcutsHints = ({ onClose }) => {
+  const defaults = [
+    "meta+k",
+    "meta+/",
+    "meta+,"
+  ];
+  const bindings = Keyboard.singleton.getBindings();
+  const hints = bindings.filter((binding) => defaults.includes(binding.shortcut));
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "none",
+    className: "flex overflow-hidden px-2 gap-4"
+  }, hints.map((binding) => /* @__PURE__ */ React2.createElement(Shortcut, {
+    key: binding.shortcut,
+    binding
+  })), onClose && /* @__PURE__ */ React2.createElement(IconButton, {
+    icon: "ph--x--regular",
+    size: 4,
+    label: "Close",
+    iconOnly: true,
+    noTooltip: true,
+    variant: "ghost",
+    classNames: "p-0 cursor-pointer",
+    onClick: onClose
+  }));
+};
+
+// src/components/Shortcuts/ShortcutsList.tsx
+import React3, { Fragment } from "react";
+import { Keyboard as Keyboard2 } from "@dxos/keyboard";
+import { toLocalizedString as toLocalizedString2, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { mx as mx2 } from "@dxos/ui-theme";
+import { meta } from "#meta";
+var ShortcutsList = () => {
+  const { t } = useTranslation2(meta.id);
+  const bindings = Keyboard2.singleton.getBindings();
+  bindings.sort((a, b) => {
+    return toLocalizedString2(a.data, t)?.toLowerCase().localeCompare(toLocalizedString2(b.data, t)?.toLowerCase());
+  });
+  return /* @__PURE__ */ React3.createElement("dl", {
+    className: mx2("w-fit grid grid-cols-[min-content_minmax(12rem,1fr)] gap-2 my-4 text-subdued select-none")
+  }, bindings.map((binding, i) => /* @__PURE__ */ React3.createElement(Fragment, {
+    key: i
+  }, /* @__PURE__ */ React3.createElement(Key, {
+    binding: binding.shortcut
+  }), /* @__PURE__ */ React3.createElement("span", {
+    role: "definition",
+    className: "ms-4",
+    "aria-labelledby": binding.shortcut
+  }, toLocalizedString2(binding.data, t)))));
+};
+
+// src/components/Shortcuts/ShortcutsSection.tsx
+import React4 from "react";
+var ShortcutsSection = () => {
+  return /* @__PURE__ */ React4.createElement("section", {
+    className: "text-description"
+  }, /* @__PURE__ */ React4.createElement(ShortcutsList, null));
+};
+
+// src/components/Tooltip/Tooltip.tsx
+import { useArrowNavigationGroup, useFocusableGroup } from "@fluentui/react-tabster";
+import React5, { forwardRef } from "react";
+import { Button, Icon, IconButton as IconButton2 } from "@dxos/react-ui";
+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 arrowNavigationAttrs = useArrowNavigationGroup({
+    axis: "horizontal"
+  });
+  const focusableGroupAttrs = useFocusableGroup({
+    tabBehavior: "limited-trap-focus"
+  });
+  return /* @__PURE__ */ React5.createElement("div", {
+    className: "flex flex-col w-[15rem] min-h-[10rem] overflow-hidden rounded-md shadow-xl bg-accent-surface text-accent-surface-text",
+    role: "tooltip",
+    "data-testid": "helpPlugin.tooltip",
+    "data-step": index + 1,
+    ...focusableGroupAttrs,
+    ref: forwardedRef
+  }, /* @__PURE__ */ React5.createElement("div", {
+    className: "flex p-2"
+  }, /* @__PURE__ */ React5.createElement("h2", {
+    className: "grow px-2 py-1 text-lg font-medium text-accent-surface-text"
+  }, title), /* @__PURE__ */ React5.createElement(IconButton2, {
+    density: "fine",
+    icon: "ph--x--bold",
+    iconOnly: true,
+    label: closeProps["aria-label"],
+    onClick: closeProps.onClick,
+    size: 4,
+    variant: "primary",
+    "data-testid": "helpPlugin.tooltip.close"
+  })), /* @__PURE__ */ React5.createElement("div", {
+    className: "flex grow px-4 my-2"
+  }, content), /* @__PURE__ */ React5.createElement("div", {
+    className: "flex p-2 items-center justify-between",
+    ...arrowNavigationAttrs
+  }, /* @__PURE__ */ React5.createElement(IconButton2, {
+    classNames: [
+      !(index > 0 && backProps) && "invisible"
+    ],
+    icon: "ph--caret-left--regular",
+    iconOnly: true,
+    label: backProps["aria-label"],
+    onClick: backProps.onClick,
+    variant: "primary",
+    "data-testid": "helpPlugin.tooltip.back"
+  }), /* @__PURE__ */ React5.createElement("div", {
+    className: "flex grow gap-2 justify-center"
+  }, /* @__PURE__ */ React5.createElement("div", {
+    className: "flex"
+  }, Array.from({
+    length: size
+  }).map((_, i) => /* @__PURE__ */ React5.createElement(Icon, {
+    key: i,
+    icon: index === i ? "ph--circle--fill" : "ph--circle--regular",
+    size: 2,
+    classNames: "mx-1 cursor-pointer"
+  })))), isLastStep ? /* @__PURE__ */ React5.createElement(Button, {
+    variant: "primary",
+    onClick: closeProps.onClick,
+    title: closeProps["aria-label"],
+    autoFocus: true,
+    "data-testid": "helpPlugin.tooltip.finish"
+  }, "Done") : /* @__PURE__ */ React5.createElement(IconButton2, {
+    autoFocus: true,
+    icon: "ph--caret-right--regular",
+    iconOnly: true,
+    label: primaryProps["aria-label"],
+    onClick: primaryProps.onClick,
+    size: 6,
+    variant: "primary",
+    "data-testid": "helpPlugin.tooltip.next"
+  })));
+});
 
-// src/HelpPlugin.tsx
-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)
-  }),
-  defineModule({
-    id: `${meta.id}/module/react-root`,
-    activatesOn: Events.Startup,
-    activate: () => ReactRoot(steps)
-  }),
-  defineModule({
-    id: `${meta.id}/module/react-surface`,
-    activatesOn: Events.SetupReactSurface,
-    activate: ReactSurface
-  }),
-  defineModule({
-    id: `${meta.id}/module/intent-resolver`,
-    activatesOn: Events.SetupIntentResolver,
-    activate: (context) => contributes(Capabilities.IntentResolver, createResolver({
-      intent: HelpAction.Start,
-      resolve: () => {
-        const state = context.getCapability(HelpCapabilities.MutableState);
-        state.running = true;
+// src/components/WelcomeTour/WelcomeTour.tsx
+import React6, { useState } from "react";
+import Joyride, { ACTIONS, EVENTS } from "react-joyride";
+import { usePluginManager } from "@dxos/app-framework/ui";
+import { useLayout } from "@dxos/app-toolkit/ui";
+import { useAsyncEffect } from "@dxos/react-ui";
+import { HelpContext } from "#types";
+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 WelcomeTour = ({ steps: initialSteps, running: runningProp, onRunningChanged }) => {
+  const manager = usePluginManager();
+  const layout = useLayout();
+  const [running, setRunning] = useState(!!runningProp && !!getTarget(initialSteps[0]));
+  const [stepIndex, _setStepIndex] = useState(0);
+  const [steps, setSteps] = useState(initialSteps);
+  const paused = layout.dialogOpen;
+  const setStepIndex = (index) => {
+    if (runningProp) {
+      const step = steps[index];
+      step?.before?.(manager.capabilities);
+    }
+    _setStepIndex(index);
+  };
+  const setRunningChanged = (state) => {
+    if (typeof runningProp !== "undefined") {
+      onRunningChanged?.(state);
+    } else {
+      if (state) {
+        setStepIndex(0);
+        setRunning(true);
+      } else {
+        setRunning(false);
       }
-    }))
-  }),
-  defineModule({
-    id: `${meta.id}/module/app-graph-builder`,
-    activatesOn: Events.SetupAppGraph,
-    activate: AppGraphBuilder
-  })
-]);
+    }
+  };
+  useAsyncEffect(async () => {
+    if (runningProp) {
+      await waitForTarget(steps[stepIndex]);
+      setStepIndex(0);
+      setRunning(true);
+    } else if (typeof runningProp !== "undefined") {
+      setRunning(false);
+    }
+  }, [
+    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__ */ React6.createElement(HelpContext.Provider, {
+    value: {
+      running: running && !paused,
+      steps,
+      setSteps,
+      setIndex: setStepIndex,
+      start: () => setRunningChanged(true),
+      stop: () => setRunningChanged(false)
+    }
+  }, /* @__PURE__ */ React6.createElement("style", null, `.joyride-target {
+          --controls-opacity: 1;
+        }`), /* @__PURE__ */ React6.createElement(Joyride, {
+    continuous: true,
+    steps,
+    stepIndex,
+    run: running && !paused,
+    callback,
+    floaterProps,
+    tooltipComponent: Tooltip,
+    spotlightPadding: 0
+  }));
+};
+
+// src/constants.ts
+import { meta as meta2 } from "#meta";
+var SHORTCUTS_DIALOG = `${meta2.id}.ShortcutsDialog`;
+
+// src/HelpPlugin.tsx
+import { ActivationEvents, Plugin } from "@dxos/app-framework";
+import { AppPlugin } from "@dxos/app-toolkit";
+import { AppGraphBuilder, HelpState, OperationHandler, ReactRoot, ReactSurface } from "#capabilities";
+import { meta as meta3 } from "#meta";
+import { translations } from "#translations";
+var HelpPlugin = Plugin.define(meta3).pipe(AppPlugin.addAppGraphModule({
+  activate: AppGraphBuilder
+}), AppPlugin.addOperationHandlerModule({
+  activate: OperationHandler
+}), AppPlugin.addSurfaceModule({
+  activate: ReactSurface
+}), AppPlugin.addTranslationsModule({
+  translations
+}), Plugin.addModule({
+  activatesOn: ActivationEvents.Startup,
+  activate: HelpState
+}), Plugin.addModule(({ steps = [] }) => ({
+  id: "react-root",
+  activatesOn: ActivationEvents.Startup,
+  activate: () => ReactRoot(steps)
+})), Plugin.make);
 
 // src/hooks/useHelp.tsx
 import { useContext } from "react";
 import { raise } from "@dxos/debug";
+import { HelpContext as HelpContext2 } from "#types";
 var useHelp = () => {
-  return useContext(HelpContext) ?? raise(new Error("Missing HelpContext"));
+  return useContext(HelpContext2) ?? raise(new Error("Missing HelpContext"));
 };
 export {
-  HELP_PLUGIN,
-  HelpAction,
   HelpCapabilities,
-  HelpContext,
   HelpPlugin,
   Key,
   SHORTCUTS_DIALOG,
-  ShortcutsDialogContent,
   ShortcutsHints,
   ShortcutsList,
   ShortcutsSection,
   Tooltip,
   WelcomeTour,
   floaterProps,
-  meta,
   useHelp
 };
 //# sourceMappingURL=index.mjs.map