@cardstack/boxel-cli 0.13.0-unstable.4 → 0.13.0-unstable.6

package/bundled-types/host-app/components/operator-mode/host-submode.gts

@@ -1,6 +1,7 @@
 import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
 import { service } from '@ember/service';
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
@@ -11,13 +12,21 @@ import onClickOutside from 'ember-click-outside/modifiers/on-click-outside';
 
 import { restartableTask } from 'ember-concurrency';
 import perform from 'ember-concurrency/helpers/perform';
+import focusTrap from 'ember-focus-trap/modifiers/focus-trap';
+import { modifier } from 'ember-modifier';
 
 import { BoxelButton, Tooltip } from '@cardstack/boxel-ui/components';
 import { PublishSiteIcon } from '@cardstack/boxel-ui/icons';
 
+import { ensureTrailingSlash } from '@cardstack/runtime-common';
+
 import OpenSitePopover from '@cardstack/host/components/operator-mode/host-submode/open-site-popover';
 import PublishingRealmPopover from '@cardstack/host/components/operator-mode/host-submode/publishing-realm-popover';
 import PublishRealmModal from '@cardstack/host/components/operator-mode/publish-realm-modal';
+import {
+  ifConnected,
+  modalFocusTrapOptions,
+} from '@cardstack/host/lib/modal-focus-trap';
 
 import type HostModeService from '@cardstack/host/services/host-mode-service';
 import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
@@ -48,18 +57,60 @@ export default class HostSubmode extends Component<HostSubmodeSignature> {
   @service declare private hostModeService: HostModeService;
   @service declare private toolService: ToolService;
 
-  @tracked isPublishRealmModalOpen = false;
   @tracked isPublishingRealmPopoverOpen = false;
   @tracked isOpenSitePopoverOpen = false;
 
   @action
   openPublishRealmModal() {
-    this.isPublishRealmModalOpen = true;
+    // A popover left open during a publish started elsewhere doesn't come
+    // back with this one.
+    this.isPublishingRealmPopoverOpen = false;
+    this.hostModeService.publishDialogRealm = ensureTrailingSlash(
+      this.realmURL,
+    );
   }
 
   @action
   closePublishRealmModal() {
-    this.isPublishRealmModalOpen = false;
+    this.hostModeService.publishDialogRealm = undefined;
+  }
+
+  get isPublishRealmModalOpen() {
+    return (
+      this.hostModeService.publishDialogRealm ===
+      ensureTrailingSlash(this.realmURL)
+    );
+  }
+
+  // Leaving host mode closes the dialog, so it doesn't come back open later.
+  willDestroy() {
+    super.willDestroy();
+    this.hostModeService.publishDialogRealm = undefined;
+  }
+
+  private publishDialogId = guidFor(this);
+
+  private get publishDialogRealms() {
+    return [this.realmURL];
+  }
+
+  // The visible title asks "Where to?"; the name says what is published.
+  private get publishDialogLabel() {
+    return `Publish ${this.realm.info(this.realmURL).name}`;
+  }
+
+  // The publish button, which becomes a "Publishing…" button while a publish
+  // runs, so focus goes back to whichever is on screen when the dialog closes.
+  private publishButton: HTMLElement | undefined;
+  private capturePublishButton = modifier((element: HTMLElement) => {
+    this.publishButton = element;
+  });
+
+  private get publishFocusTrapOptions() {
+    return modalFocusTrapOptions(this.publishDialogId, {
+      onClose: this.closePublishRealmModal,
+      returnFocusTarget: () => ifConnected(this.publishButton),
+    });
   }
 
   @action
@@ -80,6 +131,12 @@ export default class HostSubmode extends Component<HostSubmodeSignature> {
     return this.realm.isPublishing(this.realmURL);
   }
 
+  // Shown on request while a publish runs, and gone with the publish,
+  // whether it succeeds or fails.
+  get showsPublishingRealmPopover() {
+    return this.isPublishingRealmPopoverOpen && this.isPublishing;
+  }
+
   get hasPublishedSites() {
     return this.hostModeService.publishedRealmURLs.length > 0;
   }
@@ -97,35 +154,42 @@ export default class HostSubmode extends Component<HostSubmodeSignature> {
   }
 
   handlePublishTask = restartableTask(async (publishedRealmURLs: string[]) => {
-    // Publish through the same command exposed to boxel-cli so the UI and
-    // headless callers share one path. The modal already enforces the
-    // publishability gate, so force past the command's redundant re-check.
-    let command = new PublishRealmTool(this.toolService.toolContext);
-    let result = await command.execute({
-      realmURL: this.realmURL,
-      publishedRealmURLs,
-      force: true,
-    });
-
-    const errors = new Map<string, string>();
-    for (let target of result.results) {
-      if (target.status === 'error' || target.status === 'published-pending') {
-        errors.set(
-          target.publishedRealmURL,
-          target.error || 'Failed to publish to this domain',
-        );
+    try {
+      // Publish through the same command exposed to boxel-cli so the UI and
+      // headless callers share one path. The modal already enforces the
+      // publishability gate, so force past the command's redundant re-check.
+      let command = new PublishRealmTool(this.toolService.toolContext);
+      let result = await command.execute({
+        realmURL: this.realmURL,
+        publishedRealmURLs,
+        force: true,
+      });
+
+      const errors = new Map<string, string>();
+      for (let target of result.results) {
+        if (
+          target.status === 'error' ||
+          target.status === 'published-pending'
+        ) {
+          errors.set(
+            target.publishedRealmURL,
+            target.error || 'Failed to publish to this domain',
+          );
+        }
       }
-    }
 
-    if (errors.size > 0) {
-      const error = new Error(
-        'Failed to publish to some domains',
-      ) as PublishError;
-      error.urlErrors = errors;
-      throw error;
+      if (errors.size > 0) {
+        const error = new Error(
+          'Failed to publish to some domains',
+        ) as PublishError;
+        error.urlErrors = errors;
+        throw error;
+      }
+    } finally {
+      // The popover goes with the publish it was opened for, whether it
+      // succeeds or fails.
+      this.isPublishingRealmPopoverOpen = false;
     }
-
-    this.isPublishingRealmPopoverOpen = false;
   });
 
   @action
@@ -200,6 +264,7 @@ export default class HostSubmode extends Component<HostSubmodeSignature> {
               @size='tall'
               class='publish-realm-button publishing'
               {{on 'click' this.togglePublishingRealmPopover}}
+              {{this.capturePublishButton}}
               data-test-publish-realm-button
             >
               <Refresh width='22' height='22' class='publish-icon' />
@@ -211,6 +276,7 @@ export default class HostSubmode extends Component<HostSubmodeSignature> {
               @size='tall'
               class='publish-realm-button'
               {{on 'click' this.openPublishRealmModal}}
+              {{this.capturePublishButton}}
               data-test-publish-realm-button
             >
               <PublishSiteIcon width='22' height='22' class='publish-icon' />
@@ -220,7 +286,7 @@ export default class HostSubmode extends Component<HostSubmodeSignature> {
             </BoxelButton>
           {{/if}}
           <PublishingRealmPopover
-            @isOpen={{this.isPublishingRealmPopoverOpen}}
+            @isOpen={{this.showsPublishingRealmPopover}}
           />
         </div>
         {{#if this.hasPublishedSites}}
@@ -270,13 +336,21 @@ export default class HostSubmode extends Component<HostSubmodeSignature> {
       </:default>
     </SubmodeLayout>
 
-    <PublishRealmModal
-      @isOpen={{this.isPublishRealmModalOpen}}
-      @onClose={{this.closePublishRealmModal}}
-      @handlePublish={{this.handlePublish}}
-      @publishError={{this.handlePublishError}}
-      @handleUnpublish={{perform this.handleUnpublish}}
-    />
+    {{! Keyed by the realm, so another workspace gets a new dialog: it loads
+        a workspace's unlisted link and domains when it's made. }}
+    {{#each this.publishDialogRealms key='@identity' as |_realmURL|}}
+      <PublishRealmModal
+        @isOpen={{this.isPublishRealmModalOpen}}
+        @onClose={{this.closePublishRealmModal}}
+        @handlePublish={{this.handlePublish}}
+        @publishError={{this.handlePublishError}}
+        @handleUnpublish={{perform this.handleUnpublish}}
+        aria-label={{this.publishDialogLabel}}
+        id={{this.publishDialogId}}
+        tabindex='-1'
+        {{focusTrap focusTrapOptions=this.publishFocusTrapOptions}}
+      />
+    {{/each}}
 
     <style scoped>
       .host-submode-layout {

package/bundled-types/host-app/components/operator-mode/motion/stack-motion.gts

@@ -1,4 +1,3 @@
-import { array } from '@ember/helper';
 import { htmlSafe } from '@ember/template';
 import Component from '@glimmer/component';
 
@@ -72,28 +71,85 @@ const reducesMotion = () =>
   typeof matchMedia === 'function' &&
   matchMedia('(prefers-reduced-motion: reduce)').matches;
 
-// How small a card starts as it scales in. Text and card content should not
-// scale in motion (§1.5), so it starts near its full size and the fade
-// carries the entrance. The slight growth is what says the card arrives on
-// top of the stack, over the cards under it, where a rise would read as
-// arriving from below.
-const SCALE_FROM = 0.96;
+// Every positional value here is ONE transform string, never separate x, y
+// or scale values and never a size: a whole transform keyframe pair rides
+// the platform's own animation (WAAPI, off the main thread), where separate
+// values and sizes are written by script every frame and a size re-lays out
+// the card's content each time. That is what keeps the stack smooth while
+// the card under the motion is still rendering.
 
-const scaleInOnTop: PropSource = (sprite, changeset) =>
-  isTopCard(sprite, changeset) ? [SCALE_FROM, 1] : [1, 1];
+/** the translation a card is painted with right now, mid-flight or at rest */
+const paintedTranslation = (sprite: Sprite) => {
+  const matrix = new DOMMatrixReadOnly(
+    getComputedStyle(sprite.element).transform,
+  );
+  return { x: matrix.m41, y: matrix.m42 };
+};
+
+const STILL = ['none', 'none'];
+
+// An opened card lifts into place from just below it as it fades in. Text
+// and card content should not scale in motion (§1.5), so the entrance moves
+// it, a short distance, and the fade carries the arrival.
+const LIFT = 24;
+const liftInOnTop: PropSource = (sprite, changeset) =>
+  isTopCard(sprite, changeset) && !reducesMotion()
+    ? [`translate(0px, ${LIFT}px)`, 'none']
+    : STILL;
 const fadeInOnTop: PropSource = (sprite, changeset) =>
   isTopCard(sprite, changeset) ? [0, 1] : [1, 1];
-// A phone card slides up from below the viewport: its own height.
+// A phone card slides up from below the viewport: its own height. Under
+// reduced motion it fades in where it stands instead.
 const slideUpOnTop: PropSource = (sprite, changeset) =>
-  isTopCard(sprite, changeset) ? [sprite.final?.page.height ?? 0, 0] : [0, 0];
-// Under reduced motion the slide lands at once, so a phone card fades in
-// where it stands instead.
+  isTopCard(sprite, changeset) && !reducesMotion()
+    ? [`translate(0px, ${sprite.final?.page.height ?? 0}px)`, 'none']
+    : STILL;
 const fadeInOnTopWhenReduced: PropSource = (sprite, changeset) =>
   reducesMotion() ? fadeInOnTop(sprite, changeset) : [1, 1];
-// A leaving card sinks by its own height as it fades; under reduced motion
-// it fades where it stood.
-const sinkOut: PropSource = (sprite) =>
-  reducesMotion() ? [0, 0] : [0, sprite.initial?.page.height ?? 0];
+
+// A leaving card drops a little below where it is painted as it fades, so
+// a card closed mid-glide drops from where it is, not to a fixed place. It
+// eases in, as a leaving element should (ADR 007 §1.5). Under reduced
+// motion it fades where it stood.
+const DROP = 18;
+const dropOut: PropSource = (sprite) => {
+  const { x, y } = paintedTranslation(sprite);
+  const from = `translate(${x}px, ${y}px)`;
+  return reducesMotion()
+    ? [from, from]
+    : [from, `translate(${x}px, ${y + DROP}px)`];
+};
+
+/**
+ * A card whose place changed (covered, uncovered, expanded) glides from the
+ * center it was painted at to its new one, by transform alone. Its size
+ * lands at once: the card is laid out once at its new width, and only
+ * travels, so its content never re-lays out frame by frame. Center to
+ * center, because the stack centers its cards: a card that narrows stays
+ * under its own middle. Measured against the painted translation, so a
+ * card caught mid-flight (or measured with its transform still on) carries
+ * on from where it is seen.
+ *
+ * Under reduced motion it lands at once. The region's reduced motion lands
+ * only the separate positional values (x, y, scale, width, height); a whole
+ * transform string is not one of them, so this value has to stand still
+ * itself, as the entrance and the exit do.
+ */
+const reflow: PropSource = (sprite, changeset) => {
+  const from = sprite.initial?.page;
+  const to = sprite.final?.page;
+  if (!from || !to || reducesMotion()) {
+    return STILL;
+  }
+  const painted = paintedTranslation(sprite);
+  const zoom = changeset.measureZoom || 1;
+  const x =
+    painted.x + (from.x + from.width / 2 - (to.x + to.width / 2)) / zoom;
+  const y = painted.y + (from.y - to.y) / zoom;
+  return Math.abs(x) < 0.5 && Math.abs(y) < 0.5
+    ? STILL
+    : [`translate(${x}px, ${y}px)`, 'none'];
+};
 
 // How long a phone card stays in view under a card opening over it, read by
 // the stylesheet as a transition delay (see stack-item.gts). The slide runs
@@ -120,17 +176,19 @@ interface Signature {
  * 300–500 ms), and the cards under it move on the same clock, so the stack
  * reads as one change.
  *
- * - the inserted top card scales in and fades in, easing out; on a phone it
- *   slides up from below the viewport instead;
- * - a departing card fades and sinks, easing in over the exit duration;
- * - a card whose box changed (uncovered, covered, or expanded) moves by
- *   transform to its new place. Its width and height animate as layout, not
- *   by scale, so its text is never scaled (§1.5); the frame reflows under
- *   the card's content, the way a width transition does.
+ * - the inserted top card lifts into place and fades in, easing out; on a
+ *   phone it slides up from below the viewport instead;
+ * - a departing card fades and drops a little, over the exit duration;
+ * - a card whose box changed (uncovered, covered, or expanded) takes its
+ *   new size at once and glides by transform from the center it was painted
+ *   at to its new one, so its content is laid out once and only travels.
+ *   A fade the card was still playing (an entrance cut short) is carried on
+ *   by the region itself, so this step names only the transform.
  *
- * Under reduced motion the region's MotionConfig ('user') lands every move
- * at once, and a card fades in or out where it stands, on a phone as on a
- * wide screen (§1.5).
+ * Under reduced motion every move lands at once, and a card fades in or out
+ * where it stands, on a phone as on a wide screen (§1.5). Each transform
+ * value here checks for it itself: the region's MotionConfig ('user') lands
+ * separate positional values, never a whole transform string.
  */
 export default class StackMotion extends Component<Signature> {
   private enabled = motionEnabled('boxel-stack-motion');
@@ -148,7 +206,7 @@ export default class StackMotion extends Component<Signature> {
           {{#if @phone}}
             <c.Tween
               @of={{c.inserted STACK_ITEM_ROLE}}
-              @y={{slideUpOnTop}}
+              @transform={{slideUpOnTop}}
               @opacity={{fadeInOnTopWhenReduced}}
               @duration={{DURATION.space}}
               @ease={{EASE}}
@@ -156,7 +214,7 @@ export default class StackMotion extends Component<Signature> {
           {{else}}
             <c.Tween
               @of={{c.inserted STACK_ITEM_ROLE}}
-              @scale={{scaleInOnTop}}
+              @transform={{liftInOnTop}}
               @opacity={{fadeInOnTop}}
               @duration={{DURATION.space}}
               @ease={{EASE}}
@@ -164,13 +222,14 @@ export default class StackMotion extends Component<Signature> {
           {{/if}}
           <c.Tween
             @of={{DEPARTED}}
-            @opacity={{array 1 0}}
-            @y={{sinkOut}}
+            @opacity={{0}}
+            @transform={{dropOut}}
             @duration={{DURATION.exit}}
             @ease={{EASE_IN}}
           />
-          <c.Move
-            @of={{c.moved STACK_ITEM_ROLE}}
+          <c.Tween
+            @of={{c.kept STACK_ITEM_ROLE}}
+            @transform={{reflow}}
             @duration={{DURATION.space}}
             @ease={{EASE}}
           />

package/bundled-types/host-app/components/operator-mode/publish-realm-modal.gts

@@ -1031,6 +1031,7 @@ export default class PublishRealmModal extends Component<Signature> {
       @isOpen={{@isOpen}}
       @onClose={{this.handleCancel}}
       data-test-publish-realm-modal
+      ...attributes
     >
       <:header>
         <div class='modal-subtitle'>

package/bundled-types/host-app/components/operator-mode/stack-item.gts

@@ -1033,7 +1033,7 @@ export default class OperatorModeStackItem extends Component<Signature> {
         justify-self: center;
         position: absolute;
         width: 89%;
-        height: inherit;
+        height: 100%;
         z-index: 0;
         pointer-events: none;
       }
@@ -1114,7 +1114,7 @@ export default class OperatorModeStackItem extends Component<Signature> {
       /* When the top card is expanded, fade out the underlying
          buried cards so the user isn't visually distracted by the
          stack history behind the expanded surface. Sibling selector
-         within .operator-mode-stack > .inner; uses :has() to match
+         within the stack's cards wrapper (.stack-cards); uses :has() to match
          buried items that have an expanded sibling AFTER them in the
          DOM (top card = last in DOM order). */
       .item:not(.expanded, .phone-layout):has(~ .item.expanded) {

package/bundled-types/host-app/components/operator-mode/stack.gts

@@ -77,31 +77,38 @@ export default class OperatorModeStack extends Component<Signature> {
   };
 
   <template>
-    <div
-      class={{cn
-        'operator-mode-stack'
-        stack-medium-padding-top=(eq @stackItems.length 2)
-        stack-small-padding-top=(gte @stackItems.length 3)
-      }}
-      ...attributes
-    >
+    <div class='operator-mode-stack' ...attributes>
       {{! the stack's motion region: its cards are the participants (motion/stack-motion.gts) }}
       <StackMotion
         class='inner'
         @phone={{this.operatorModeStateService.isMobileViewport}}
       >
-        {{#each @stackItems as |item i|}}
-          <OperatorModeStackItem
-            @item={{item}}
-            @index={{i}}
-            @stackItems={{@stackItems}}
-            @toolContext={{@toolContext}}
-            @dismissStackedCardsAbove={{this.dismissStackedCardsAbove}}
-            @requestDeleteCard={{@deleteCard}}
-            @close={{@close}}
-            @setupStackItem={{@setupStackItem}}
-          />
-        {{/each}}
+        {{! The cards' top padding follows how many cards stand in the stack,
+        so it is set here, inside the region: the region measures the cards
+        before a render patches anything inside it, and a padding set
+        outside it would already have changed by then, so a card would jump
+        by the difference instead of moving. }}
+        <div
+          class={{cn
+            'stack-cards'
+            stack-medium-padding-top=(eq @stackItems.length 2)
+            stack-small-padding-top=(gte @stackItems.length 3)
+          }}
+          data-test-stack-cards
+        >
+          {{#each @stackItems as |item i|}}
+            <OperatorModeStackItem
+              @item={{item}}
+              @index={{i}}
+              @stackItems={{@stackItems}}
+              @toolContext={{@toolContext}}
+              @dismissStackedCardsAbove={{this.dismissStackedCardsAbove}}
+              @requestDeleteCard={{@deleteCard}}
+              @close={{@close}}
+              @setupStackItem={{@setupStackItem}}
+            />
+          {{/each}}
+        </div>
       </StackMotion>
     </div>
 
@@ -124,7 +131,6 @@ export default class OperatorModeStack extends Component<Signature> {
         width: 100%;
         background-position: center;
         background-size: cover;
-        padding-top: var(--stack-padding-top);
         padding-inline: var(--stack-padding-inline);
         padding-bottom: var(--stack-padding-bottom);
         z-index: 0;
@@ -132,13 +138,13 @@ export default class OperatorModeStack extends Component<Signature> {
       /* The padding follows the cards standing in the stack: a leaving card
          is kept in the region's orphan layer while it fades, and must not
          hold the padding it had */
-      .stack-medium-padding-top:not(:has(> .inner > .item.expanded)) {
+      .stack-medium-padding-top:not(:has(> .item.expanded)) {
         --stack-padding-top: var(--stack-md-padding-top);
       }
-      .stack-small-padding-top:not(:has(> .inner > .item.expanded)) {
+      .stack-small-padding-top:not(:has(> .item.expanded)) {
         --stack-padding-top: var(--stack-sm-padding-top);
       }
-      .operator-mode-stack:has(> .inner > .item.expanded) {
+      .operator-mode-stack:has(> .inner > .stack-cards > .item.expanded) {
         --stack-padding-inline: 0;
         --stack-padding-bottom: 0;
       }
@@ -153,9 +159,14 @@ export default class OperatorModeStack extends Component<Signature> {
         width: 100%;
         height: 100%;
         position: relative;
+        margin: 0 auto;
+      }
+      .stack-cards {
+        position: relative;
+        height: calc(100% - var(--stack-padding-top));
+        margin-top: var(--stack-padding-top);
         display: flex;
         justify-content: center;
-        margin: 0 auto;
         border-bottom-left-radius: var(--boxel-border-radius);
         border-bottom-right-radius: var(--boxel-border-radius);
       }

package/bundled-types/host-app/components/operator-mode/submode-layout.gts

@@ -710,8 +710,8 @@ export default class SubmodeLayout extends Component<Signature> {
         max-width: 100%;
         container-type: inline-size;
         /* Lock outer box to exactly var(--stack-padding-top) — the
-           same value .operator-mode-stack uses for its padding-top
-           offset. Any content the bar contains (workspace button,
+           same value the stack's cards wrapper (.stack-cards in
+           stack.gts) uses for its top margin. Any content the bar contains (workspace button,
            submode switcher, portaled expanded-card-header pill,
            etc.) renders WITHIN this fixed height; nothing the slot
            contents do can push the bar taller. This is what lets

package/bundled-types/host-app/lib/modal-focus-trap.ts

@@ -0,0 +1,33 @@
+interface ModalFocusArgs {
+  onClose: () => void;
+  returnFocusTarget?: () => HTMLElement | undefined;
+}
+
+// Options for the `focusTrap` modifier on a modal whose element has the id
+// `dialogId`. Focus opens on the element marked `data-modal-initial-focus`,
+// or on the modal itself when none is, stays in the modal, and on close goes
+// to `returnFocusTarget` or back to where it was. Escape closes the modal.
+export function modalFocusTrapOptions(dialogId: string, args: ModalFocusArgs) {
+  return {
+    initialFocus: () =>
+      document.querySelector<HTMLElement>(
+        `#${dialogId} [data-modal-initial-focus]`,
+      ) ?? `#${dialogId}`,
+    fallbackFocus: `#${dialogId}`,
+    allowOutsideClick: true,
+    escapeDeactivates: () => {
+      args.onClose();
+      return false;
+    },
+    setReturnFocus: (previous: HTMLElement | SVGElement) =>
+      args.returnFocusTarget?.() ?? previous,
+  };
+}
+
+// The element when it's still on the page, for a `returnFocusTarget` whose
+// opener may have been replaced or removed while the modal was open.
+export function ifConnected(
+  element: HTMLElement | undefined,
+): HTMLElement | undefined {
+  return element?.isConnected ? element : undefined;
+}

package/bundled-types/host-app/lib/workspace-actions.ts

@@ -10,6 +10,7 @@ import CopyIcon from '@cardstack/boxel-icons/copy';
 import FileSettingsIcon from '@cardstack/boxel-icons/file-settings';
 import RefreshIcon from '@cardstack/boxel-icons/refresh-cw';
 import IconTrash from '@cardstack/boxel-icons/trash-2';
+import PublishIcon from '@cardstack/boxel-icons/world-upload';
 
 import { format as formatDate } from 'date-fns';
 import { didCancel, dropTask, task } from 'ember-concurrency';
@@ -37,6 +38,7 @@ import {
 } from '@cardstack/host/lib/realm-utils';
 import { publishedRealmURLsFromInfo } from '@cardstack/host/lib/utils';
 import { wallpaperImage } from '@cardstack/host/lib/workspace-list';
+import type HostModeService from '@cardstack/host/services/host-mode-service';
 import type MatrixService from '@cardstack/host/services/matrix-service';
 import type NetworkService from '@cardstack/host/services/network';
 import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
@@ -67,6 +69,7 @@ export class WorkspaceActions {
   @service declare private recentFilesService: RecentFilesService;
   @service declare private realm: RealmService;
   @service declare private realmServer: RealmServerService;
+  @service declare private hostModeService: HostModeService;
 
   @tracked showDeleteModal = false;
   @tracked deleteError: string | undefined;
@@ -266,6 +269,15 @@ export class WorkspaceActions {
         action: this.openRealmConfig,
       }),
     );
+    if (this.canPublish) {
+      items.push(
+        new MenuItem({
+          label: 'Publish',
+          icon: PublishIcon,
+          action: this.openToPublish,
+        }),
+      );
+    }
     if (this.isRealmOwner) {
       items.push(
         new MenuItem({
@@ -373,6 +385,15 @@ export class WorkspaceActions {
     return this.realm.isRealmOwner(this.realmIdentifier);
   }
 
+  private get canPublish() {
+    return this.realm.canPublish(this.realmIdentifier);
+  }
+
+  // Publishing happens in host mode, which shows the site it publishes.
+  @action private openToPublish() {
+    this.hostModeService.openToPublishTask.perform(this.realmIdentifier);
+  }
+
   private get canDuplicateWorkspace() {
     return (
       this.network.virtualNetwork.unresolveURL(