@cardstack/boxel-cli 0.2.0-unstable.448 → 0.3.0-unstable.13

package/bundled-types/host-app/components/pill-menu/index.gts

@@ -0,0 +1,281 @@
+import { on } from '@ember/modifier';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import { Header } from '@cardstack/boxel-ui/components';
+
+import { DropdownArrowFilled } from '@cardstack/boxel-ui/icons';
+
+export type PillMenuItem = {
+  cardId: string;
+  realmURL: string | undefined;
+  isActive: boolean;
+};
+
+interface Signature {
+  Element: HTMLDivElement | HTMLButtonElement;
+  Args: {
+    title?: string;
+    onExpand?: () => void;
+    onCollapse?: () => void;
+  };
+  Blocks: {
+    headerIcon: [];
+    headerDetail: [];
+    content: [];
+    footer: [];
+  };
+}
+
+export default class PillMenu extends Component<Signature> {
+  <template>
+    {{#if this.isExpanded}}
+      <div
+        class='pill-menu {{if (has-block "footer") "has-footer"}}'
+        ...attributes
+      >
+        <Header class='menu-header' data-test-pill-menu-header>
+          <:icon>
+            {{yield to='headerIcon'}}
+          </:icon>
+          <:default>
+            <button
+              {{on 'click' this.collapseMenu}}
+              class='detail-close-button'
+              data-test-pill-menu-detail-close
+            >
+              {{yield to='headerDetail'}}
+            </button>
+          </:default>
+          <:detail>
+            <button
+              {{on 'click' this.collapseMenu}}
+              class='header-button'
+              data-test-pill-menu-button
+            >
+              <DropdownArrowFilled width='8px' height='8px' />
+            </button>
+          </:detail>
+        </Header>
+        {{#if (has-block 'content')}}
+          <div class='menu-content'>
+            {{yield to='content'}}
+          </div>
+        {{/if}}
+
+        {{#if (has-block 'footer')}}
+          <footer class='menu-footer'>
+            {{yield to='footer'}}
+          </footer>
+        {{/if}}
+      </div>
+    {{else}}
+      <button
+        {{on 'click' this.expandMenu}}
+        class='pill-menu-button'
+        data-test-pill-menu-button
+        ...attributes
+      >
+        {{yield to='headerIcon'}}
+        {{yield to='headerDetail'}}
+        <DropdownArrowFilled class='minimized-arrow' width='8px' height='8px' />
+      </button>
+    {{/if}}
+    <style scoped>
+      .pill-menu {
+        --boxel-header-gap: var(--boxel-sp-4xs);
+        --boxel-header-detail-margin-left: 0;
+        --pill-menu-spacing: var(--boxel-pill-menu-spacing, var(--boxel-sp-xs));
+        --boxel-header-padding: 0 0 0 var(--pill-menu-spacing);
+        --button-outline: 2px;
+        --boxel-header-min-height: fit-content;
+        --pill-menu-gradient-height: 5px;
+
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        max-height: 100%;
+        min-height: max-content;
+        width: var(--boxel-pill-menu-width, 100%);
+        background-color: var(--boxel-light);
+        border-radius: var(--boxel-border-radius-xl);
+        color: var(--boxel-dark);
+        font: 700 var(--boxel-font-xs);
+        letter-spacing: var(--boxel-lsp);
+        box-shadow: var(--boxel-box-shadow);
+        transition: width 0.2s ease-in;
+
+        timeline-scope: --pill-menu-content-scroll-timeline;
+      }
+      .pill-menu-button {
+        display: flex;
+        align-items: center;
+        font: 700 var(--boxel-font-xs);
+        gap: var(--boxel-sp-xxs);
+        padding: var(
+          --boxel-pill-menu-button-padding,
+          var(--pill-menu-spacing)
+        );
+        border: none;
+        white-space: nowrap;
+        background-color: transparent;
+        border: 1px solid transparent;
+        border-radius: var(--boxel-border-radius-xl);
+        width: fit-content;
+      }
+      .pill-menu-button:hover {
+        border: 1px solid var(--boxel-400);
+      }
+      .menu-header {
+        overflow: hidden;
+        padding: var(--chat-input-area-bottom-padding);
+        font: 700 var(--boxel-font-xs);
+      }
+      .menu-header :deep(.title) {
+        font: 700 var(--boxel-font);
+      }
+      .header-button {
+        margin: var(--button-outline);
+        padding: 0;
+        background: none;
+        border: none;
+        border-radius: var(--boxel-border-radius-xl);
+        font: 700 var(--boxel-font-xs);
+        letter-spacing: var(--boxel-lsp-xs);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .header-button:focus:focus-visible {
+        outline-color: var(--boxel-highlight);
+      }
+
+      .detail-close-button {
+        border: none;
+        padding: 0;
+        background: none;
+      }
+
+      .expandable-header-button {
+        width: var(
+          --boxel-pill-menu-expandable-header-button-width,
+          fit-content
+        );
+        color: var(--boxel-450);
+        text-transform: uppercase;
+      }
+      .menu-content {
+        padding: 0 var(--chat-input-area-bottom-padding);
+        display: grid;
+        gap: var(--pill-menu-spacing);
+        overflow-y: auto;
+        min-height: 0;
+      }
+
+      .pill-menu:not(:has(.menu-footer)) .menu-content {
+        padding-bottom: var(--chat-input-area-bottom-padding);
+      }
+
+      .menu-content::before,
+      .menu-content::after,
+      .menu-footer::before {
+        content: '';
+        display: block;
+        width: 100%;
+        height: var(--pill-menu-gradient-height);
+        position: absolute;
+        left: 0;
+        opacity: 0;
+        pointer-events: none;
+      }
+
+      .menu-content::before {
+        background: linear-gradient(
+          to bottom,
+          rgba(0, 0, 0, 0.25) 0%,
+          transparent 100%
+        );
+
+        animation: scroll-pill-menu-content linear forwards;
+        animation-timeline: --pill-menu-content-scroll-timeline;
+      }
+
+      .pill-menu.has-footer .menu-content::after {
+        display: none;
+      }
+
+      .menu-content::after {
+        background: linear-gradient(
+          to top,
+          rgba(0, 0, 0, 0.25) 0%,
+          transparent 100%
+        );
+
+        animation: scroll-pill-menu-content reverse linear backwards;
+        animation-timeline: --pill-menu-content-scroll-timeline;
+
+        bottom: var(--chat-input-area-bottom-padding);
+      }
+
+      .menu-footer {
+        padding: var(--chat-input-area-bottom-padding);
+      }
+
+      .menu-footer::before {
+        background: linear-gradient(
+          to top,
+          rgba(0, 0, 0, 0.25) 0%,
+          transparent 100%
+        );
+
+        animation: scroll-pill-menu-content reverse linear backwards;
+        animation-timeline: --pill-menu-content-scroll-timeline;
+
+        transform: translateY(
+          calc(
+            -1 *
+              (
+                var(--pill-menu-gradient-height) +
+                  var(--chat-input-area-bottom-padding)
+              )
+          )
+        );
+      }
+
+      .pill-menu :deep(.menu-header .detail) {
+        order: -1;
+        margin-left: 0;
+      }
+      .minimized-arrow {
+        transform: rotate(180deg);
+        transform-origin: center;
+        margin-left: var(--boxel-sp-xs);
+        flex-shrink: 0;
+      }
+
+      @keyframes scroll-pill-menu-content {
+        0% {
+          opacity: 0;
+        }
+        1% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+    </style>
+  </template>
+
+  @tracked isExpanded = false;
+
+  @action expandMenu() {
+    this.isExpanded = true;
+    this.args.onExpand?.();
+  }
+
+  @action collapseMenu() {
+    this.isExpanded = false;
+    this.args.onCollapse?.();
+  }
+}

package/bundled-types/host-app/components/pill-menu/usage.gts

@@ -0,0 +1,64 @@
+import { fn } from '@ember/helper';
+import { action } from '@ember/object';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+
+import FreestyleUsage from 'ember-freestyle/components/freestyle/usage';
+
+import headerIcon from '../ai-assistant/ai-assist-icon@2x.webp';
+
+import PillMenu from './index';
+
+export default class PillMenuUsage extends Component {
+  @tracked private title = 'Pill Menu';
+  private headerIconURL = headerIcon;
+
+  @action private onExpand() {
+    console.log('Pill menu expanded');
+  }
+
+  @action private onCollapse() {
+    console.log('Pill menu collapsed');
+  }
+
+  <template>
+    <FreestyleUsage @name='PillMenu'>
+      <:description>
+        Component with a header and a list of card pills.
+      </:description>
+      <:example>
+        <PillMenu @onExpand={{this.onExpand}} @onCollapse={{this.onCollapse}}>
+          <:headerIcon>
+            <img
+              src={{this.headerIconURL}}
+              width='18'
+              height='18'
+              alt='menu icon'
+            />
+          </:headerIcon>
+          <:headerDetail>
+            1 Active
+          </:headerDetail>
+          <:content>
+            This is the content of the pill menu.
+          </:content>
+          <:footer>
+            This is the footer of the pill menu.
+          </:footer>
+        </PillMenu>
+      </:example>
+      <:api as |Args|>
+        <Args.String
+          @name='title'
+          @description='Menu title displayed on the header'
+          @value={{this.title}}
+          @onInput={{fn (mut this.title)}}
+        />
+        <Args.Action
+          @name='headerAction'
+          @description='Action to take when header button is clicked.'
+        />
+      </:api>
+    </FreestyleUsage>
+  </template>
+}

package/bundled-types/host-app/components/prerendered-card-search.gts

@@ -0,0 +1,274 @@
+import { setComponentTemplate } from '@ember/component';
+import type { TemplateOnlyComponent } from '@ember/component/template-only';
+import { isDestroyed, isDestroying } from '@ember/destroyable';
+import { getOwner } from '@ember/owner';
+import { precompileTemplate } from '@ember/template-compilation';
+import { isTesting } from '@embroider/macros';
+import Component from '@glimmer/component';
+
+import TriangleAlert from '@cardstack/boxel-icons/triangle-alert';
+
+import { consume } from 'ember-provide-consume-context';
+
+import { CardContainer } from '@cardstack/boxel-ui/components';
+
+import {
+  RealmPaths,
+  CardContextName,
+  type PrerenderedCardLike,
+  type PrerenderedCardData,
+  type PrerenderedCardComponentSignature,
+  type ResolvedCodeRef,
+} from '@cardstack/runtime-common';
+
+import type { CardContext, CardDef } from 'https://cardstack.com/base/card-api';
+import type { FileDef } from 'https://cardstack.com/base/file-api';
+
+import { type HTMLComponent, htmlComponent } from '../lib/html-component';
+// `knownFileMetaUrls` lives in `lib/` so non-component code (e.g.
+// `lib/stack-item.ts`) can read it without importing a component file. We
+// re-export here for back-compat with existing call sites that imported it
+// from this module.
+import {
+  knownFileMetaUrls,
+  clearKnownFileMetaUrls,
+} from '../lib/known-file-meta-urls';
+import { getLivePrerenderedSearch } from '../resources/live-prerendered-search';
+import { getPrerenderedSearch } from '../resources/prerendered-search';
+import { getSearch } from '../resources/search';
+
+export { knownFileMetaUrls, clearKnownFileMetaUrls };
+
+const OWNER_DESTROYED_ERROR =
+  "Cannot call `.lookup('renderer:-dom')` after the owner has been destroyed";
+
+export class PrerenderedCard implements PrerenderedCardLike {
+  component: HTMLComponent;
+  constructor(
+    public data: PrerenderedCardData,
+    cardComponentModifier?: CardContext['cardComponentModifier'],
+  ) {
+    if (data.isFileMeta) {
+      knownFileMetaUrls.add(data.url);
+    }
+    if (data.isError && !data.html) {
+      this.component = wrapWithModifier(
+        getErrorComponent(data.realmUrl, data.url),
+        cardComponentModifier,
+        data.url,
+      );
+    } else {
+      let extraAttributes: Record<string, string> = {};
+      if (data.isError) {
+        extraAttributes['data-is-error'] = 'true';
+      }
+      this.component = wrapWithModifier(
+        htmlComponent(data.html, extraAttributes),
+        cardComponentModifier,
+        data.url,
+      );
+    }
+  }
+  get url() {
+    return this.data.url;
+  }
+  get isError() {
+    return this.data.isError;
+  }
+  get realmUrl(): string {
+    return this.data.realmUrl;
+  }
+  get cardType(): string | undefined {
+    return this.data.cardType;
+  }
+  get iconHtml(): string | undefined {
+    return this.data.iconHtml;
+  }
+  get usedRenderType(): ResolvedCodeRef | undefined {
+    return this.data.usedRenderType;
+  }
+  // True iff the prerender pipeline produced HTML for this row. Currently
+  // false for executable-module FileDef rows (`.gts`/`.ts`) because the
+  // fused visit skips the FileRender pass when `isModule` is true — see
+  // CS-11171. CardList consults this to render a filename fallback so the
+  // user can still see and click the row through to interact-mode.
+  get hasHtml(): boolean {
+    return typeof this.data.html === 'string' && this.data.html.length > 0;
+  }
+}
+function getErrorComponent(realmURL: string, url: string) {
+  let name = new RealmPaths(new URL(realmURL)).local(new URL(url));
+  const DefaultErrorResultComponent: TemplateOnlyComponent<{
+    Element: HTMLDivElement;
+  }> = <template>
+    <CardContainer
+      class='card instance-error'
+      @displayBoundaries={{true}}
+      data-test-instance-error={{true}}
+      data-test-card={{url}}
+      ...attributes
+    >
+      <div class='error'>
+        <div class='thumbnail'>
+          <TriangleAlert />
+        </div>
+        <div class='name' data-test-instance-error-name>{{name}}</div>
+      </div>
+    </CardContainer>
+    <style scoped>
+      .error {
+        display: flex;
+        align-content: flex-start;
+        justify-content: center;
+        padding: var(--boxel-sp-xs);
+        flex-wrap: wrap;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+      .thumbnail {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: calc(100% - 64.35px);
+      }
+      .name {
+        width: 100%;
+        text-align: center;
+        font: 500 var(--boxel-font-sm);
+        line-height: 1.23;
+        letter-spacing: 0.13px;
+        text-overflow: ellipsis;
+      }
+      svg {
+        width: 50px;
+        height: 50px;
+      }
+    </style>
+  </template>;
+  return DefaultErrorResultComponent as unknown as HTMLComponent;
+}
+
+function wrapWithModifier(
+  innerComponent: HTMLComponent,
+  modifier: CardContext['cardComponentModifier'] | undefined,
+  cardId: string,
+): HTMLComponent {
+  if (!modifier) {
+    return innerComponent;
+  }
+
+  let cardIdForModifier = cardId;
+
+  class DecoratedPrerenderedCard extends Component {
+    component = innerComponent;
+    cardModifier = modifier!;
+    cardId = cardIdForModifier;
+  }
+
+  setComponentTemplate(
+    precompileTemplate(
+      `<this.component
+        {{this.cardModifier
+          cardId=this.cardId
+          format='data'
+          fieldType=undefined
+          fieldName=undefined
+        }}
+        ...attributes
+      />`,
+      { strictMode: true, scope: () => ({}) },
+    ),
+    DecoratedPrerenderedCard,
+  );
+
+  return DecoratedPrerenderedCard as unknown as HTMLComponent;
+}
+
+export default class PrerenderedCardSearch extends Component<PrerenderedCardComponentSignature> {
+  @consume(CardContextName) declare private cardContext?: CardContext;
+
+  private get cardComponentModifier() {
+    if (isDestroying(this) || isDestroyed(this)) {
+      return undefined;
+    }
+    try {
+      return this.cardContext?.cardComponentModifier;
+    } catch (error) {
+      if (
+        error instanceof Error &&
+        error.message.includes(OWNER_DESTROYED_ERROR)
+      ) {
+        // Realm refreshes can finish after the component tree has torn down.
+        return undefined;
+      }
+      throw error;
+    }
+  }
+
+  private prerenderedSearchResource = getPrerenderedSearch(
+    this,
+    getOwner(this)!,
+    () => ({
+      query: this.shouldUseRenderContextSearch ? undefined : this.args.query,
+      format: this.shouldUseRenderContextSearch ? undefined : this.args.format,
+      realms: this.args.realms,
+      cardUrls: this.args.cardUrls,
+      isLive: this.args.isLive ?? false,
+      cardComponentModifier: this.cardComponentModifier,
+    }),
+  );
+
+  private renderContextSearchResource = getSearch<CardDef | FileDef>(
+    this,
+    getOwner(this)!,
+    () => (this.shouldUseRenderContextSearch ? this.args.query : undefined),
+    () => this.args.realms,
+    {
+      isLive: false,
+      storeService: getOwner(this)!.lookup('service:render-store') as any,
+    },
+  );
+
+  private renderContextPrerenderedSearchResource = getLivePrerenderedSearch(
+    this,
+    getOwner(this)!,
+    () => ({
+      instances: this.renderContextSearchResource.instances,
+      isLoading: this.renderContextSearchResource.isLoading,
+      meta: this.renderContextSearchResource.meta,
+      format: this.shouldUseRenderContextSearch ? this.args.format : undefined,
+      realms: this.args.realms,
+      cardComponentModifier: this.cardComponentModifier,
+    }),
+  );
+
+  private get shouldUseRenderContextSearch() {
+    return Boolean((globalThis as any).__boxelRenderContext) && !isTesting();
+  }
+
+  private get searchResource() {
+    return this.shouldUseRenderContextSearch
+      ? this.renderContextPrerenderedSearchResource
+      : this.prerenderedSearchResource;
+  }
+
+  private get searchResults() {
+    return {
+      instances: this.searchResource.instances,
+      isLoading: this.searchResource.isLoading,
+      meta: this.searchResource.meta,
+    };
+  }
+
+  <template>
+    {{#if this.searchResults.isLoading}}
+      {{yield to='loading'}}
+    {{else}}
+      {{yield this.searchResults.instances to='response'}}
+      {{#if this.searchResults.meta}}
+        {{yield this.searchResults.meta to='meta'}}
+      {{/if}}
+    {{/if}}
+  </template>
+}