@jxsuite/studio 4.0.0 → 4.1.0

package/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Jx Studio</title>
+    <link rel="icon" href="./favicon.ico" />
     <link rel="stylesheet" href="./dist/studio.css" />
     <link rel="stylesheet" href="./styles/tokens.css" />
     <link rel="stylesheet" href="./styles/shell.css" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -21,6 +21,7 @@
     "dist/workers",
     "index.html",
     "canvas.html",
+    "favicon.ico",
     "styles",
     "fonts"
   ],
@@ -55,17 +56,17 @@
     "upgrade": "bun update --latest && bun install"
   },
   "dependencies": {
-    "@atlaskit/pragmatic-drag-and-drop": "^3.0.0",
-    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.1.0",
-    "@jxsuite/ai": "^0.36.5",
-    "@jxsuite/collab": "^0.8.4",
-    "@jxsuite/create": "^1.3.8",
-    "@jxsuite/formulas": "^0.0.15",
-    "@jxsuite/markup": "^0.4.8",
-    "@jxsuite/protocol": "^2.1.0",
-    "@jxsuite/runtime": "^3.0.0",
-    "@jxsuite/schema": "^2.0.0",
-    "@jxsuite/site": "^1.0.0",
+    "@atlaskit/pragmatic-drag-and-drop": "^3.1.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.2.0",
+    "@jxsuite/ai": "^0.37.0",
+    "@jxsuite/collab": "^0.8.5",
+    "@jxsuite/create": "^1.3.9",
+    "@jxsuite/formulas": "^0.0.16",
+    "@jxsuite/markup": "^0.4.9",
+    "@jxsuite/protocol": "^2.2.0",
+    "@jxsuite/runtime": "^3.1.0",
+    "@jxsuite/schema": "^2.1.0",
+    "@jxsuite/site": "^1.1.0",
     "@spectrum-web-components/accordion": "^1.12.2",
     "@spectrum-web-components/action-bar": "1.12.2",
     "@spectrum-web-components/action-button": "^1.12.2",
@@ -102,7 +103,7 @@
     "@spectrum-web-components/toast": "^1.12.2",
     "@spectrum-web-components/tooltip": "^1.12.2",
     "@spectrum-web-components/underlay": "^1.12.2",
-    "@vue/reactivity": "3.5.41",
+    "@vue/reactivity": "3.5.42",
     "ajv": "^8.20.0",
     "ajv-formats": "^3.0.1",
     "lit": "^3.3.3",
@@ -112,7 +113,7 @@
     "yaml": "^2.9.0"
   },
   "devDependencies": {
-    "@happy-dom/global-registrator": "^20.11.8",
+    "@happy-dom/global-registrator": "^20.12.0",
     "@types/mdast": "^4.0.4",
     "@webref/css": "^8.7.3",
     "@webref/elements": "^2.8.0",

package/src/about/about-modal.ts

@@ -152,8 +152,9 @@ function renderModal() {
  *
  * The rail foot carries **Preferences** and nothing else (plan §3.2 ②). About is not a view you
  * switch to and it is opened roughly once in an app's lifetime, so it costs a rail slot it cannot
- * repay; as a record it stays reachable by name from the palette, which is where a thing you look
- * for by name belongs.
+ * repay; instead it sits at the bottom of the ⬢ Studio menu (`commandbar/overflow`, `group:
+ * "9_help"` sorts after every other group there) and stays reachable by name from the palette
+ * besides.
  */
 export function aboutCommands(): Command[] {
   return [
@@ -162,7 +163,7 @@ export function aboutCommands(): Command[] {
       title: `About ${APP_NAME}`,
       category: "Help",
       level: "application",
-      menus: ["palette"],
+      menus: ["commandbar/overflow", "palette"],
       group: "9_help",
       run: () => {
         openAboutModal();

package/src/files/files.ts

@@ -1910,10 +1910,12 @@ function renameStatus(newName: string, report: RenameResult): string {
  *
  * The dialog above a rename states, in a modal the user has to accept, that N references "will be
  * updated automatically. Nothing else changes." The engine keeps that promise for every document it
- * can write — but some it cannot: a content source like a `.csv` collection has a parser and
- * deliberately no serializer, and a document that fails to parse cannot be rewritten either. In
- * both cases `applyRename` names the file rather than dropping it, and this is the half that makes
- * the naming reach a person. Silence here is what turns a stated promise into a false one.
+ * can write, and it can write more than it round-trips: a `.csv` collection has a parser and
+ * deliberately no serializer, but declares the narrower `rewrite` capability, so a reference in one
+ * is repaired cell by cell. What is left over is a document that fails to parse, and a tag rename
+ * inside a format with no serializer. In those `applyRename` names the file rather than dropping
+ * it, and this is the half that makes the naming reach a person. Silence here is what turns a
+ * stated promise into a false one.
  *
  * A drag-move makes no promise at all — it has no dialog — which is exactly why it needs this more,
  * not less. A format CONVERSION makes the strongest promise of the three, and shares this for that

package/src/files/media-paths.ts

@@ -15,14 +15,19 @@
  * mount (specs/site-architecture.md §9.3), so the same file can also be named
  * `/content/blog/images/hero.png` when the collection's `source` is not already `content/blog`.
  *
- * **Why this module exists at all.** `findReferences` resolves each authored ref the way the
- * compiler does — rooted values against the project root, relative ones against the referencing
- * document — and compares the RESULT to the path it was asked about. Ask it about `public/hero.jpg`
- * and every `/hero.jpg` in the project resolves to `hero.jpg`, matches nothing, and the answer is a
- * confident zero. That is the exact shape of bug that makes a delete look safe: seven pages break
- * and the dialog says nothing else refers to it. {@link authoredRefTargets} is the fix — it
- * enumerates what an authored reference to this file RESOLVES to, so the query is keyed on the ref
- * as written rather than on the file as stored.
+ * **Why this module exists at all.** A surface that has a FILE and needs a URL cannot get one by
+ * prefixing a slash. The library grid did exactly that, so every `public/` image asked for
+ * `/public/hero.jpg` — a URL the site does not publish — and every content-collection image skipped
+ * its mount entirely. {@link mediaSiteUrl} and {@link previewFileSrc} are the answer, and they take
+ * a FILE PATH: an authored reference is a different thing and resolves through
+ * `canvas/asset-refs`.
+ *
+ * This module used to carry a third function, `authoredRefTargets`, enumerating every path an
+ * authored reference to a file could resolve to, so a usage query could ask about all of them and
+ * union the answers. That existed because `findReferences` resolved a rooted reference against the
+ * project root alone; the engine now resolves every lane itself (`site-architecture.md` §9.3), on
+ * the write side as well as the read side, which a client-side union never could. Asking once is
+ * both simpler and more correct, so the helper is gone.
  *
  * Everything here is pure string math over project-relative, forward-slashed paths. The only input
  * from outside is the open project's content sections, read the same way `canvas/asset-refs.ts`
@@ -101,40 +106,6 @@ export function mediaSiteUrl(path: string): string {
   return mount ? `/${mountedPath(normalized, mount)}` : `/${normalized}`;
 }
 
-/**
- * Every path an authored reference to this media file resolves to — the keys a usage query must ask
- * about, most literal first.
- *
- * 1. The file itself. A sibling's `./images/hero.png`, a rooted `/content/blog/images/hero.png` and a
- *    bare `assets/logo.svg` all land here.
- * 2. Its served path, for `public/` media. `/hero.jpg` resolves to `hero.jpg`, which is not a file on
- *    disk and does not need to be — the sweep compares resolved strings, and this is the string
- *    every reference to a public asset produces.
- * 3. Its asset-mount path, when a collection's `source` differs from its mount prefix. Identical to
- *    (1) for the ordinary `content/<type>/` layout, and deduplicated when it is.
- *
- * The list is a UNION and is deliberately generous: over-counting a reference makes a delete dialog
- * more alarming than it needs to be, while missing one makes it lie.
- */
-export function authoredRefTargets(path: string): string[] {
-  const normalized = normalizeProjectPath(path);
-  if (normalized === "") {
-    return [];
-  }
-  const targets = [normalized];
-  if (normalized.startsWith(`${PUBLIC_DIR}/`)) {
-    targets.push(normalized.slice(PUBLIC_DIR.length + 1));
-  }
-  const mount = mountOf(normalized);
-  if (mount) {
-    const mounted = mountedPath(normalized, mount);
-    if (!targets.includes(mounted)) {
-      targets.push(mounted);
-    }
-  }
-  return targets;
-}
-
 /**
  * The src a PARENT-REALM preview should load for a PROJECT FILE PATH — a library thumbnail, a
  * media-browser tile.

package/src/files/media-usage.ts

@@ -1,164 +1,74 @@
 /**
- * Media usage — "which pages use this image?", asked in the shape an author actually wrote.
+ * Media usage — "which pages use this image?", asked once.
  *
- * `services/references.ts` already answers "where is this used?" for documents, and its answer is
- * what every destructive confirmation says out loud. Media does not fit through it unmodified, for
- * one reason: **the reference index resolves refs, and a media file's authored ref usually resolves
- * somewhere else.** `public/hero.jpg` is written `/hero.jpg`, which the compiler — and therefore
- * the sweep — resolves to `hero.jpg`. Ask about the file and every reference to it is invisible;
- * the query succeeds, returns zero, and the delete dialog says nothing else refers to it while
- * seven pages break. A confident zero is the one answer a destructive dialog must never invent.
+ * `services/references.ts` answers "where is this used?" for every kind of file, and its answer is
+ * what every destructive confirmation says out loud. Media needs three things on top of it, and no
+ * longer needs the fourth this module was built for.
  *
- * So the query is keyed on the AUTHORED ref. {@link authoredRefTargets} enumerates every path a
- * reference to this file resolves to — the file, its served path, its asset-mount path — and this
- * module asks all of them and unions the answers. Everything else is deliberately inherited rather
- * than re-implemented: the same `loadUsages` cache (so a dialog and a panel asking at once are one
- * round trip), the same `invalidateUsages` on any filesystem event, the same `usageWarning`
- * sentence in the confirmation, and the same `usageHeadline` wording on a panel.
+ * **What it still does.** A media path is normalized before it becomes a query (a leading `./` is
+ * not part of a file's identity), an empty path is a FAILURE rather than "nothing uses it", and
+ * {@link mediaUsageHeadline} renders the one line a media surface shows beside a file — where a
+ * failed query says **unknown**, which is a different fact from "unused" and has to read like one.
  *
- * **A partial answer is `failed`, not a total.** If one lane of the union cannot be counted, the
- * union cannot either — a number assembled from the lanes that worked reads exactly like a complete
- * one, and would understate what a delete breaks. Unknown is the honest answer, and
- * {@link mediaUsageHeadline} says the word.
+ * **What it no longer does, and why that matters.** A media file's authored reference usually
+ * resolves somewhere else: `public/hero.jpg` is written `/hero.jpg`, and a content asset is written
+ * `./images/hero.png` and republished at its collection's mount. `findReferences` used to resolve a
+ * rooted reference against the project root ALONE, so asking it about the file matched none of
+ * those and returned a confident zero — the one answer a destructive dialog must never invent. This
+ * module's answer was to enumerate every authored spelling of the file and union the results.
+ *
+ * That was a workaround in the wrong place. A client-side union can make a COUNT come out right and
+ * can do nothing at all about the REWRITE, which happens inside the engine — so the engine learned
+ * to resolve every lane itself (issue 239/241, `site-architecture.md` §9.3), and the union became a
+ * second implementation of a rule that now has one. It is gone: one path in, one query, one answer,
+ * and the lanes are the engine's business.
  *
  * @docs studio/projects/media
  */
 
-import { authoredRefTargets } from "./media-paths";
+import { normalizeProjectPath } from "./media-paths";
 import { loadUsages, peekUsages, retryUsages, usageHeadline } from "../services/references";
-import type { UsageQuery, UsageState } from "../services/references";
-import type { ReferenceFile, ReferenceHit, ReferencesResult } from "../types";
+import type { UsageState } from "../services/references";
 
-/**
- * The queries whose union answers "what uses this media file?".
- *
- * One per authored form. An empty list means there is no question to ask (an empty path), which
- * {@link loadMediaUsages} reports as a failure rather than as "nothing uses it".
- */
-export function mediaUsageQueries(path: string): UsageQuery[] {
-  return authoredRefTargets(path).map((target) => ({ path: target }));
-}
-
-/** Merge one file's hits into the accumulator, summing counts per `(refType, ref)`. */
-function mergeFile(into: Map<string, ReferenceFile>, file: ReferenceFile): void {
-  const existing = into.get(file.path);
-  if (!existing) {
-    into.set(file.path, { count: file.count, path: file.path, refs: [...file.refs] });
-    return;
-  }
-  for (const hit of file.refs) {
-    const same = existing.refs.find(
-      (candidate: ReferenceHit) => candidate.refType === hit.refType && candidate.ref === hit.ref,
-    );
-    if (same) {
-      same.count += hit.count;
-    } else {
-      existing.refs.push({ ...hit });
-    }
-  }
-  existing.count += file.count;
-}
+/** The state a caller gets for a path that names no file. */
+const NO_FILE: UsageState = { message: "no media file to look for", status: "failed" };
 
 /**
- * One result out of several, for the same file asked about under different names.
+ * The query for a media file, or null when the path names nothing.
  *
- * The lanes cannot double-count: each asks about a DIFFERENT resolved path, and one authored string
- * resolves to exactly one of them. Errors are unioned by path so a document that failed to parse in
- * every lane is reported once, and `path` reports the media file the caller asked about rather than
- * whichever lane happened to be first.
+ * Normalizing here rather than at each call site is the whole of what this wrapper adds over
+ * `loadUsages`: the file tree, a drop handler and a library tile do not agree on whether a path
+ * carries a leading `./`, and two spellings of one file must not become two cache entries.
  */
-function unionResults(path: string, results: readonly ReferencesResult[]): ReferencesResult {
-  const files = new Map<string, ReferenceFile>();
-  const errors = new Map<string, { path: string; error: string }>();
-  for (const result of results) {
-    for (const file of result.files) {
-      mergeFile(files, file);
-    }
-    for (const error of result.errors) {
-      if (!errors.has(error.path)) {
-        errors.set(error.path, error);
-      }
-    }
-  }
-  const merged = [...files.values()].toSorted((a, b) => a.path.localeCompare(b.path));
-  return {
-    errors: [...errors.values()],
-    files: merged,
-    filesReferencing: merged.length,
-    path,
-    refsTotal: merged.reduce((sum, file) => sum + file.count, 0),
-    tagName: null,
-  };
-}
-
-/**
- * Reduce the lanes to one state.
- *
- * Precedence is strictly least-informative-wins, because every step down is a step away from a
- * number the caller could act on: unsupported (the host cannot answer at all) beats failed (it
- * tried and could not) beats pending beats a real union.
- */
-function combine(path: string, states: readonly UsageState[]): UsageState {
-  if (states.some((state) => state.status === "unsupported")) {
-    return { status: "unsupported" };
-  }
-  const failure = states.find((state) => state.status === "failed");
-  if (failure) {
-    return failure;
-  }
-  if (states.some((state) => state.status === "pending")) {
-    return { status: "pending" };
-  }
-  return {
-    result: unionResults(
-      path,
-      states.map((state) => (state as { result: ReferencesResult }).result),
-    ),
-    status: "ready",
-  };
+function mediaQuery(path: string): { path: string } | null {
+  const normalized = normalizeProjectPath(path);
+  return normalized === "" ? null : { path: normalized };
 }
 
 /**
  * The answer right now, WITHOUT starting a request — the synchronous read a lit template needs.
  *
- * `null` means at least one lane has never been asked, and the caller decides whether this paint is
- * the one that asks (see {@link loadMediaUsages}).
+ * `null` means the question has never been asked, and the caller decides whether this paint is the
+ * one that asks (see {@link loadMediaUsages}).
  */
 export function peekMediaUsages(path: string): UsageState | null {
-  const queries = mediaUsageQueries(path);
-  if (queries.length === 0) {
-    return null;
-  }
-  const states: UsageState[] = [];
-  for (const query of queries) {
-    const state = peekUsages(query);
-    if (state === null) {
-      return null;
-    }
-    states.push(state);
-  }
-  return combine(path, states);
+  const query = mediaQuery(path);
+  return query === null ? null : peekUsages(query);
 }
 
 /**
- * Ask every lane and union the answers. Never rejects — a failure is a STATE, because the caller
+ * Ask, or join the ask already in flight. Never rejects — a failure is a STATE, because the caller
  * has to render something and "unknown" is the honest something.
  */
 export async function loadMediaUsages(path: string): Promise<UsageState> {
-  const queries = mediaUsageQueries(path);
-  if (queries.length === 0) {
-    return { message: "no media file to look for", status: "failed" };
-  }
-  return combine(path, await Promise.all(queries.map((query) => loadUsages(query))));
+  const query = mediaQuery(path);
+  return query === null ? NO_FILE : loadUsages(query);
 }
 
-/** Forget every lane's answer and ask again — the Retry behind a failed media count. */
+/** Forget the answer and ask again — the Retry behind a failed media count. */
 export async function retryMediaUsages(path: string): Promise<UsageState> {
-  const queries = mediaUsageQueries(path);
-  if (queries.length === 0) {
-    return { message: "no media file to look for", status: "failed" };
-  }
-  return combine(path, await Promise.all(queries.map((query) => retryUsages(query))));
+  const query = mediaQuery(path);
+  return query === null ? NO_FILE : retryUsages(query);
 }
 
 /**

package/src/hosting/document.ts

@@ -15,6 +15,7 @@ import {
   assetUrl,
   STUDIO_BUNDLE_CSS,
   STUDIO_ENTRY,
+  STUDIO_FAVICON,
   STUDIO_IFRAME_ENTRY,
   STUDIO_STYLESHEETS,
 } from "./layout";
@@ -71,6 +72,7 @@ export function studioShellHtml(options: DocumentOptions = {}): string {
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>${options.title ?? "Jx Studio"}</title>
+    <link rel="icon" href="${url(STUDIO_FAVICON)}" />
 ${links}
   </head>
   <body>

package/src/hosting/layout.ts

@@ -66,6 +66,13 @@ export const STUDIO_ASSETS: readonly StudioAsset[] = [
     required: true,
     why: "the canvas iframe document. Without it every canvas frame 404s at boot.",
   },
+  {
+    dir: false,
+    kind: "asset",
+    path: "favicon.ico",
+    required: true,
+    why: "the shell document's <link rel=\"icon\">. A Chromium --app window (the NixOS desktop install) has no native title-bar icon of its own and falls back to the page's favicon, so without this the window chrome shows a generic icon even though the taskbar/dock entry is already branded via the .desktop file.",
+  },
   {
     dir: false,
     kind: "entry",
@@ -143,6 +150,7 @@ export const PUBLISHED_EXTRAS: readonly string[] = ["src", "data"];
 
 export const STUDIO_SHELL = "index.html";
 export const STUDIO_CANVAS = "canvas.html";
+export const STUDIO_FAVICON = "favicon.ico";
 export const STUDIO_ENTRY = "dist/studio.js";
 export const STUDIO_IFRAME_ENTRY = "dist/iframe-entry.js";
 export const STUDIO_BUNDLE_CSS = "dist/studio.css";

package/src/new-project/import-tab.ts

@@ -58,8 +58,8 @@ export interface ImportTabCtx {
   form: { name: string; directory: string };
   /**
    * Validate the shared Parameters fields and return where to write, or null when something is
-   * missing (the modal has already rendered the reason inline). Import is always a `"path"`
-   * destination — cloud ships no `importSite`, so the Import tab never renders there.
+   * missing (the modal has already rendered the reason inline). Either destination shape: a hosted
+   * backend imports into a repository it creates, so `"repo"` reaches here too.
    */
   resolveDestination: () => CreateProjectDestination | null;
   rerender: () => void;
@@ -201,6 +201,22 @@ export function breakpointPolicyFromForm(): ImportBreakpointPolicy {
   return { count: _breakpointCount, mode: "limit", rounding: _breakpointRounding };
 }
 
+/**
+ * Whether this backend can answer the fidelity question at all.
+ *
+ * `verify` builds the emitted project with the compiler and serves it to screenshot every page
+ * against the original — it executes the project's own JavaScript, so `@jxsuite/import` keeps that
+ * phase out of the portable pipeline entirely and a hosted backend deliberately never runs it.
+ *
+ * There is no PAL member for "this backend compiles", so the nearest DECLARED fact stands in:
+ * `createDestination`. A `"repo"` platform commits the emitted project into a git tree it never
+ * checks out, which is the same set of hosts and one the tab can read without naming a platform by
+ * id. Offering the switch there would collect an answer nothing acts on.
+ */
+function canVerify(): boolean {
+  return getPlatform().createDestination !== "repo";
+}
+
 function slugOf(name: string): string {
   return name
     .toLowerCase()
@@ -252,7 +268,7 @@ export function importBriefFor(ctx: ImportTabCtx): ImportBrief | null {
     return null;
   }
   const destination = ctx.resolveDestination();
-  if (!destination || destination.kind !== "path") {
+  if (!destination) {
     return null;
   }
   return {
@@ -266,7 +282,9 @@ export function importBriefFor(ctx: ImportTabCtx): ImportBrief | null {
     prompt: _prompt.trim(),
     minFidelity: _minFidelity,
     url: parsed.href,
-    verify: _verify,
+    /* Never asked for where it cannot run: the switch is not rendered there, and a value left over
+       from a session on another platform must not travel as a request the backend would ignore. */
+    verify: canVerify() && _verify,
   };
 }
 
@@ -472,18 +490,22 @@ export function renderImportSource(ctx: ImportTabCtx): TemplateResult {
     >
       AI component naming
     </sp-switch>
-    <sp-switch
-      .checked=${live(_verify)}
-      @change=${(e: Event) => {
-        _verify = (e.target as HTMLInputElement).checked;
-        // The bar below it only means anything while the check runs, so it appears with it.
-        ctx.rerender();
-      }}
-    >
-      Check fidelity against the original (slower)
-    </sp-switch>
     ${
-      _verify
+      canVerify()
+        ? html`<sp-switch
+            .checked=${live(_verify)}
+            @change=${(e: Event) => {
+              _verify = (e.target as HTMLInputElement).checked;
+              // The bar below it only means anything while the check runs, so it appears with it.
+              ctx.rerender();
+            }}
+          >
+            Check fidelity against the original (slower)
+          </sp-switch>`
+        : nothing
+    }
+    ${
+      canVerify() && _verify
         ? html`
             <label class="new-project-field">
               <span class="new-project-label">Minimum fidelity</span>

package/src/new-project/location-fields.ts

@@ -140,13 +140,16 @@ function joinPath(parent: string, name: string): string {
 }
 
 /**
- * The absolute directory a `"path"` destination writes to. The import pipeline takes a plain
- * absolute `directory` rather than a destination object (it is never repo-mode — cloud ships no
- * `importSite`), so the modal resolves it here.
+ * The destination as the import pipeline names it: `importSite` takes a plain `directory` string
+ * rather than a destination object, so the modal flattens one here.
+ *
+ * Both shapes, because both platforms import now. A `"path"` destination flattens to the absolute
+ * folder it writes; a `"repo"` one to `owner/repo`, which is what a backend that commits the
+ * emitted project into a git tree can act on — there is no directory for it to name.
  */
 export function destinationPath(destination: CreateProjectDestination, slug: string): string {
-  if (destination.kind !== "path") {
-    throw new Error("Only filesystem destinations have a path");
+  if (destination.kind === "repo") {
+    return `${destination.owner}/${destination.repo || slug.trim()}`;
   }
   return joinPath(destination.parent, slug.trim());
 }

package/src/panels/ai-chat/composer.ts

@@ -280,6 +280,16 @@ export function createComposer(opts: ComposerOptions): Composer {
                 `
           }
         </div>
+        ${
+          /* Said once, quietly, under the picker that caused it. A chat-only model still answers,
+             so this is not a gate — but the agent loop it silently disables is the whole reason
+             the panel exists, and nothing else on screen would have mentioned it. */
+          modelPicker.selectedLacksTools()
+            ? html`<div class="ai-composer-note">
+                This model can't use editing tools — the assistant will answer but not edit.
+              </div>`
+            : nothing
+        }
       </div>
     `;
   }