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

package/bundled-types/choreo/run.ts

@@ -78,6 +78,15 @@ const loopKey = (cue: Cue) =>
     .sort()
     .join(',');
 
+/** where releaseForMeasure stands a transform a tween is carrying */
+const TRANSFORM_REST: Record<string, PropValue> = {
+  scale: 1,
+  scaleX: 1,
+  scaleY: 1,
+  x: 0,
+  y: 0,
+};
+
 /** a tween a replacement pass carries on: see Run.midfade */
 export interface Fade {
   /** score ms until it starts (0 when it is already running) */
@@ -99,6 +108,12 @@ export interface Run {
   finished: Promise<void>;
   /** nothing left to play: the run completed or was cancelled */
   isDone(): boolean;
+  /**
+   * The run completed and every cue it has is an ambient loop, still going
+   * round. Such a run is done but not over: its loops play on until a pass
+   * replaces it.
+   */
+  isLooping(): boolean;
   /**
    * Where each of this run's ambient loops is in its cycle. A replacement
    * run starts the same loop on the same sprite from there, so an edited
@@ -141,6 +156,8 @@ export interface Run {
   reassert(): void;
   /** put every element this run has touched back to its resting layout NOW */
   releaseForMeasure(): void;
+  /** stand back up rested tween values the replacement drives itself (see ChoreoRun.restoreRested) */
+  restoreRested(drives: (ve: VisualElement, key: string) => boolean): void;
   /**
    * One build backwards — Keynote's rule. Land PARKED at the previous
    * gate with everything ahead re-closed, and HOLD: a retreat never
@@ -489,7 +506,9 @@ export class ChoreoRun implements Run {
       value: unknown;
       ve: VisualElement;
     }[];
-  } = { borrowed: [], moved: [] };
+    /** transforms in-flight tweens carry, rested for the measure */
+    tweened: { key: string; value: unknown; ve: VisualElement }[];
+  } = { borrowed: [], moved: [], tweened: [] };
   private owned: { el: HTMLElement; key: string; ve: VisualElement }[] = [];
   private cancelled = false;
   private ended = false;
@@ -772,6 +791,19 @@ export class ChoreoRun implements Run {
   isDone(): boolean {
     return this.ended || this.cancelled;
   }
+  isLooping(): boolean {
+    return (
+      this.ended &&
+      !this.cancelled &&
+      this.tracks.length > 0 &&
+      this.tracks.every(
+        (t) =>
+          t.cue.loop &&
+          t.loopAnimation !== undefined &&
+          t.loopAnimation.playState !== 'idle',
+      )
+    );
+  }
   /**
    * A text delivery is still standing in for its sprite's text. The clock
    * can end first: a delivery lands on its own platform animations, and the
@@ -2946,7 +2978,7 @@ export class ChoreoRun implements Run {
       this.dropCameraAnimation(t);
     }
     const touched = new Set<VisualElement>();
-    this.retired = { borrowed: [], moved: [] };
+    this.retired = { borrowed: [], moved: [], tweened: [] };
     for (const { ve, el, key, prior } of this.borrowedValues.splice(0)) {
       this.retired.borrowed.push({
         el,
@@ -2973,6 +3005,63 @@ export class ChoreoRun implements Run {
       ve.getValue(key)?.jump(rest ?? 0);
       touched.add(ve);
     }
+    // A transform a tween or spring is still carrying (an entrance's scale,
+    // a slide's y) is part of the picture, not of the layout: measured with
+    // it on, the final box would be the one it paints mid-way, and a move
+    // the next score plays from it would land short and snap. So it rests
+    // for the measurement too. A kept run stands it back up (reassert); a
+    // replacement either moves the sprite from its painted box, carries it
+    // on to rest (the region's continuity cues), or, when a new tween drives
+    // the same value, stands it back up for that tween to carry on from
+    // (restoreRested). A cancelled run is past measuring: its values stay
+    // where they are painted for whatever takes them over.
+    const now = this.master;
+    const rested = new Set<string>();
+    for (const t of this.cancelled ? [] : this.tracks) {
+      const { cue } = t;
+      const ve = cue.sprite.node.visualElement;
+      if (
+        !ve ||
+        t.passed ||
+        t.end <= now ||
+        cue.loop ||
+        (cue.kind !== 'tween' && cue.kind !== 'spring') ||
+        !cue.target
+      ) {
+        continue;
+      }
+      for (const key of Object.keys(cue.target)) {
+        const rest = TRANSFORM_REST[key];
+        const seen = `${cue.sprite.node.layoutKey}:${key}`;
+        if (rest === undefined || rested.has(seen) || !ve.hasValue(key)) {
+          continue;
+        }
+        rested.add(seen);
+        const value = ve.getValue(key)!;
+        this.retired.tweened.push({ key, value: value.get(), ve });
+        value.jump(rest);
+        touched.add(ve);
+      }
+    }
+    touched.forEach((ve) => ve.render());
+  }
+
+  /**
+   * Stand back up the in-flight tween values the last measure rested, where
+   * the replacement score drives the same value with a tween or spring of
+   * its own: that tween starts from the value on the element, which has to
+   * be the one painted, not its rest. Values nothing new drives stay
+   * rested, for a continuation to carry on (restoring those too would
+   * compound a continuation's scaleX/scaleY with a restored scale).
+   */
+  restoreRested(drives: (ve: VisualElement, key: string) => boolean) {
+    const touched = new Set<VisualElement>();
+    for (const { key, value, ve } of this.retired.tweened) {
+      if (value !== undefined && drives(ve, key)) {
+        ve.getValue(key)?.jump(value as PropValue);
+        touched.add(ve);
+      }
+    }
     touched.forEach((ve) => ve.render());
   }
 
@@ -2992,8 +3081,14 @@ export class ChoreoRun implements Run {
    * run's own clock, so a keep is invisible rather than a restart.
    */
   reassert() {
-    const { borrowed, moved } = this.retired;
-    this.retired = { borrowed: [], moved: [] };
+    const { borrowed, moved, tweened } = this.retired;
+    this.retired = { borrowed: [], moved: [], tweened: [] };
+    // first, so a value a move also writes ends on the move's own
+    for (const { key, value, ve } of tweened) {
+      if (value !== undefined) {
+        ve.getValue(key)?.jump(value as PropValue);
+      }
+    }
     for (const { el, key, prior, value, ve } of borrowed) {
       if (value !== undefined) {
         ve.getValue(key, value as PropValue)!.jump(value as PropValue);

package/bundled-types/host-app/components/operator-mode/dashboard/get-started.gts

@@ -1,3 +1,4 @@
+import { fn } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { guidFor } from '@ember/object/internals';
@@ -11,18 +12,21 @@ import ChevronDown from '@cardstack/boxel-icons/chevron-down';
 import ChevronUp from '@cardstack/boxel-icons/chevron-up';
 import { Button } from '@cardstack/pretui/components/button';
 import { IconButton } from '@cardstack/pretui/components/icon-button';
+import { Menu } from '@cardstack/pretui/components/menu';
 import { ProgressBar } from '@cardstack/pretui/components/progress-bar';
 import { VisuallyHidden } from '@cardstack/pretui/components/visually-hidden';
 import { didCancel, dropTask, task, timeout } from 'ember-concurrency';
 import { modifier } from 'ember-modifier';
 
-import { cn, eq } from '@cardstack/boxel-ui/helpers';
+import { cn, eq, not } from '@cardstack/boxel-ui/helpers';
 
-import { logger } from '@cardstack/runtime-common';
+import { logger, type RealmIdentifier } from '@cardstack/runtime-common';
 
+import { realmIdentifierSegments } from '@cardstack/host/lib/realm-utils';
 import { isHostedRealm } from '@cardstack/host/lib/workspace-list';
 import { NEW_SESSION_NAME } from '@cardstack/host/services/ai-assistant-panel-service';
 import type AiAssistantPanelService from '@cardstack/host/services/ai-assistant-panel-service';
+import type HostModeService from '@cardstack/host/services/host-mode-service';
 import type MatrixService from '@cardstack/host/services/matrix-service';
 import type OperatorModeStateService from '@cardstack/host/services/operator-mode-state-service';
 import type RealmService from '@cardstack/host/services/realm';
@@ -30,6 +34,9 @@ import type RealmServerService from '@cardstack/host/services/realm-server';
 import type RecentCardsService from '@cardstack/host/services/recent-cards-service';
 
 import { AGENT_KINDS, usesCodingAgent } from './agent-kinds';
+import { sortByUpdatedAtDesc } from './workspace-layout';
+
+import type { MenuEntry } from '@cardstack/pretui/internal/menu';
 
 const log = logger('component:dashboard/get-started');
 
@@ -83,6 +90,10 @@ interface Signature {
   };
 }
 
+function countOf<T>(values: T[], value: T) {
+  return values.filter((other) => other === value).length;
+}
+
 // The dashboard's onboarding checklist. Every tick comes from something the
 // user has actually done, read from state the host already keeps, so the list
 // can't drift from what happened. A button in the page's header opens and
@@ -93,6 +104,7 @@ export default class GetStarted extends Component<Signature> {
   @service declare private operatorModeStateService: OperatorModeStateService;
   @service declare private realm: RealmService;
   @service declare private realmServer: RealmServerService;
+  @service declare private hostModeService: HostModeService;
   @service declare private recentCardsService: RecentCardsService;
 
   // The open list and the dismissed note each hold only for the dismissal
@@ -331,6 +343,73 @@ export default class GetStarted extends Component<Signature> {
     }
   }
 
+  // The workspaces the user can publish, most recently updated first.
+  // Read several times a render.
+  @cached
+  private get workspacesToPublish() {
+    return sortByUpdatedAtDesc(
+      this.realmServer.userRealmIdentifiers.filter((url) =>
+        this.realm.canPublish(url),
+      ),
+      this.realm.info,
+    );
+  }
+
+  // Why there's nothing to publish. A workspace made before workspaces were
+  // marked publishable isn't, so owning one isn't enough.
+  private get publishUnavailableNote() {
+    return this.realmServer.userRealmIdentifiers.some((url) =>
+      this.realm.isRealmOwner(url),
+    )
+      ? 'None of your workspaces can be published. Create a new one to publish it.'
+      : 'Publishing needs a workspace you own. Create one to publish it.';
+  }
+
+  // The note waits for the info of every workspace the user owns: until a
+  // workspace's info loads, it may yet turn out publishable.
+  private get showsPublishUnavailableNote() {
+    return (
+      this.workspacesToPublish.length === 0 &&
+      this.realmServer.userRealmIdentifiers
+        .filter((url) => this.realm.isRealmOwner(url))
+        .every((url) => this.realm.isInfoLoaded(url))
+    );
+  }
+
+  // With one workspace to publish the button opens it in host mode to
+  // publish; with more, a menu asks which.
+  private get onlyWorkspaceToPublish() {
+    let [only, ...rest] = this.workspacesToPublish;
+    return rest.length === 0 ? only : undefined;
+  }
+
+  // Workspaces that share a name are told apart by the last segment of
+  // their address, or by the whole address when that segment is shared too.
+  private get publishMenuItems(): MenuEntry[] {
+    let workspaces = this.workspacesToPublish;
+    let names = workspaces.map((url) => this.realm.info(url).name);
+    let withSegment = workspaces.map((url, index) => {
+      let segment = realmIdentifierSegments(url).at(-1);
+      return segment ? `${names[index]} (${segment})` : undefined;
+    });
+    return workspaces.map((url, index) => {
+      let label = names[index];
+      if (countOf(names, label) > 1) {
+        let short = withSegment[index];
+        label =
+          short && countOf(withSegment, short) === 1
+            ? short
+            : `${label} (${this.realm.realmURLTextOf(url) ?? url})`;
+      }
+      return { label, onSelect: () => this.openToPublish(url) };
+    });
+  }
+
+  // Publishing happens in host mode, which shows the site it publishes.
+  @action private openToPublish(workspace: RealmIdentifier) {
+    this.hostModeService.openToPublishTask.perform(workspace);
+  }
+
   @action private async askBoxelAi() {
     await this.aiAssistantPanelService.openNewSession();
   }
@@ -420,8 +499,66 @@ export default class GetStarted extends Component<Signature> {
                       {{/if}}
                     </span>
                     <span class='step-hint'>{{step.hint}}</span>
+                    {{#if (eq step.id 'publish')}}
+                      {{#unless step.done}}
+                        {{#if this.showsPublishUnavailableNote}}
+                          <span
+                            class='step-note'
+                            data-test-get-started-publish-unavailable
+                          >{{this.publishUnavailableNote}}</span>
+                        {{/if}}
+                      {{/unless}}
+                    {{/if}}
                   </span>
-                  {{#unless step.done}}
+                  {{! Publishing again stays a step away once one workspace
+                      is on the web. }}
+                  {{#if (eq step.id 'publish')}}
+                    {{#if this.onlyWorkspaceToPublish}}
+                      <Button
+                        class='step-action'
+                        @appearance='outlined'
+                        @size='s'
+                        {{on
+                          'click'
+                          (fn this.openToPublish this.onlyWorkspaceToPublish)
+                        }}
+                        data-test-get-started-action={{step.id}}
+                      >Publish a workspace</Button>
+                    {{else if this.workspacesToPublish.length}}
+                      <Menu
+                        class='step-action'
+                        @items={{this.publishMenuItems}}
+                        @label='Workspaces to publish'
+                        @align='end'
+                      >
+                        <:trigger as |isMenuOpen toggle|>
+                          <Button
+                            @appearance='outlined'
+                            @size='s'
+                            {{on 'click' toggle}}
+                            data-test-get-started-action={{step.id}}
+                          >Publish a workspace
+                            {{#if isMenuOpen}}
+                              <ChevronUp
+                                width='14'
+                                height='14'
+                                class='publish-chevron'
+                                aria-hidden='true'
+                                data-test-get-started-publish-chevron='up'
+                              />
+                            {{else}}
+                              <ChevronDown
+                                width='14'
+                                height='14'
+                                class='publish-chevron'
+                                aria-hidden='true'
+                                data-test-get-started-publish-chevron='down'
+                              />
+                            {{/if}}</Button>
+                        </:trigger>
+                      </Menu>
+                    {{/if}}
+                  {{else if (not step.done)}}
                     {{#if (eq step.id 'open-card')}}
                       {{#if this.realmServer.userRealmIdentifiers.length}}
                         <Button
@@ -449,7 +586,7 @@ export default class GetStarted extends Component<Signature> {
                         data-test-get-started-action={{step.id}}
                       >Set up an agent</Button>
                     {{/if}}
-                  {{/unless}}
+                  {{/if}}
                 </li>
               {{/each}}
             </ol>
@@ -560,10 +697,15 @@ export default class GetStarted extends Component<Signature> {
         color: var(--muted-foreground);
         font-weight: 500;
       }
-      .step-hint {
+      .step-hint,
+      .step-note {
         font-size: var(--boxel-font-size-xs);
         color: var(--muted-foreground);
       }
+      /* Keeps its size when the label runs short of room. */
+      .publish-chevron {
+        flex: none;
+      }
       .get-started-dismissed {
         display: flex;
         flex-wrap: wrap;
@@ -617,9 +759,12 @@ export default class GetStarted extends Component<Signature> {
         .get-started-step {
           grid-template-columns: var(--_get-started-tick-size) minmax(0, 1fr);
         }
+        /* The action takes the whole row, tick column included: the text
+           column alone is narrower than a labeled button. It stays at the
+           row's end, as in the wide layout. */
         .step-action {
-          grid-column: 2;
-          justify-self: start;
+          grid-column: 1 / -1;
+          justify-self: end;
         }
       }
     </style>

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

@@ -576,10 +576,12 @@ export default class Dashboard extends Component<Signature> {
             <:head as |getStarted|>
               <header class='page-head'>
                 <div class='greeting-line'>
+                  {{! Percy hides the greeting: it changes with the hour. }}
                   <h1
                     class='greeting'
                     {{this.trackHour}}
                     data-test-dashboard-greeting
+                    data-test-percy-hide
                   >{{this.greeting}}</h1>
                   {{#if getStarted.isReady}}
                     {{! Light mode on the dark dashboard, so the neutral open state

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

@@ -335,8 +335,10 @@ export default class Workspace extends Component<Signature> {
         >
           {{! The star's fill already shows the state, so it takes no
               pressed tint, which would show as a gray square on the chip.
-              Its tip opens to the right, into the tile: centered above the
-              corner, it would run past the tile into a narrow gutter. }}
+              Its tip opens into the workspace, away from the edge the star
+              sits on: right from a tile's top-left corner, left from a row's
+              right end. Centered, or opened the other way, it would run
+              past the workspace. }}
           <IconButton
             @label='Favorite'
             @appearance='plain'
@@ -347,7 +349,7 @@ export default class Workspace extends Component<Signature> {
               'Remove from Favorites'
               'Add to Favorites'
             }}
-            @tooltipSide='right'
+            @tooltipSide={{if (eq @variant 'row') 'left' 'right'}}
             {{on 'click' this.workspace.toggleFavorite}}
             data-test-workspace-favorite-btn={{@realmIdentifier}}
           >

package/bundled-types/host-app/components/operator-mode/dashboard-modals/workspace-modals.gts

@@ -14,33 +14,16 @@ import { Warning as WarningIcon } from '@cardstack/boxel-ui/icons';
 import type { RealmIdentifier } from '@cardstack/runtime-common';
 
 import ModalContainer from '@cardstack/host/components/modal-container';
+import { modalFocusTrapOptions } from '@cardstack/host/lib/modal-focus-trap';
 import type { EnhancedRealmInfo } from '@cardstack/host/services/realm';
 
 // The tile's Delete, Archive and Duplicate modals. The tile sends them to the
 // operator-mode modal outlet, so they render outside the dashboard's size
 // container, which would otherwise trap their fixed positioning.
-
-interface ModalFocusArgs {
-  onClose: () => void;
-  returnFocusTarget: () => HTMLElement | undefined;
-}
-
-// Focus opens on Cancel, stays in the modal, and goes back to the tile on
-// close. Escape closes the modal. The confirm button turns busy
-// rather than being replaced while its task runs, so it keeps focus.
-function modalFocusTrapOptions(dialogId: string, args: ModalFocusArgs) {
-  return {
-    initialFocus: `#${dialogId} [data-modal-initial-focus]`,
-    fallbackFocus: `#${dialogId}`,
-    allowOutsideClick: true,
-    escapeDeactivates: () => {
-      args.onClose();
-      return false;
-    },
-    setReturnFocus: (previous: HTMLElement | SVGElement) =>
-      args.returnFocusTarget() ?? previous,
-  };
-}
+//
+// Each opens with focus on Cancel and hands it back to the tile on close.
+// The confirm button turns busy rather than being replaced while its task
+// runs, so it keeps focus.
 
 interface DeleteWorkspaceModalSignature {
   Args: {

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

@@ -32,7 +32,7 @@ export default class PublishingRealmPopover extends Component<PublishingRealmArg
 
   <template>
     {{#if @isOpen}}
-      <div class='publishing-realm-popover'>
+      <div class='publishing-realm-popover' data-test-publishing-realm-popover>
         <div class='publishing-realm-header'>
           Publishing to:
         </div>