@jxsuite/studio 4.1.0 → 5.1.0

package/src/surfaces/files-panel.ts

@@ -0,0 +1,301 @@
+/// <reference lib="dom" />
+/**
+ * The Navigator's Files tree, as a mounted document.
+ *
+ * `files/files.ts` is the flow — what a directory listing is, which entries `.gitignore` masks, how
+ * the flat row model is built, where the window falls, what a click and a key MEAN, what the
+ * context menu offers and what each verb does to the filesystem — and this is the surface it draws
+ * into: the reactive scope the document reads, the discriminant it switches on, and the mount that
+ * stays put while the Navigator repaints around it.
+ *
+ * **The keyboard is the kit's now.** `jx-tree` owns the ARIA tree contract — the roving caret, the
+ * arrows, `Home`/`End`, the two that open and close a directory, typeahead — and this adapter
+ * carries the five events it answers with. What a row VIEW no longer says is the whole point: no
+ * role, no `aria-level`, no set counts, no `tabindex`. `panel-outline.ts` was the second copy of
+ * every one of those, and there was nothing keeping the two in agreement.
+ *
+ * **Four facts are scope fields rather than row fields, and that is the whole reason a drag no
+ * longer rebuilds the list.** The current path, the selected path, the dragged path and the drop
+ * target are each one value the document compares against `$map.item.path`, so changing any of them
+ * re-evaluates one attribute per DRAWN row and leaves every node — and the caret — where it was.
+ * The predecessor recomputed `classMap` for the whole tree on each of the four, which is what made
+ * a drag-over highlight cost a repaint of the panel the drag was happening in.
+ *
+ * **The container is not cleared**, which is the one line where a panel differs from a settings
+ * section. A section is handed the pane's whole content area and starts by emptying it; a panel
+ * body is a node lit renders into, and its comment markers are how lit finds its own content again.
+ * So the document is APPENDED, and {@link FilesPanelSurfaceHandle.connected} is how the flow finds
+ * out that the Navigator has since painted another panel over the top of it.
+ *
+ * **Two islands, both through `onNodeCreated`.** The tree element is the window's scroller and the
+ * project root's drop target; each row is a pragmatic-drag-and-drop source, and a directory row is
+ * also a target. Neither is a thing a document can express, and neither may be re-found by selector
+ * afterwards — a windowed list re-uses its nodes for different rows as it scrolls, so a query would
+ * hand a registration to whichever file happens to be standing there now
+ * (specs/studio-ui-guidelines.md §9.4).
+ *
+ * @docs studio/interface
+ */
+
+import { reactive } from "../reactivity";
+import { mountSurface, registerSurface } from "../ui/surface";
+import filesPanelDoc from "./files-panel.json";
+import type { JxDocument, JxElement } from "@jxsuite/schema/types";
+import type { JxScope } from "@jxsuite/runtime/types";
+import type { SurfaceHandle } from "../ui/surface";
+
+registerSurface("files-panel", filesPanelDoc as unknown as JxDocument);
+
+/**
+ * One row the tree draws, with every field already a string.
+ *
+ * A row states what it IS and never what is currently true OF it: whether it is selected, being
+ * dragged, under a drop or holding the caret are the four scope fields above, so this array only
+ * changes when the model or the window does.
+ */
+export interface FileRowView {
+  /** The reconcile key. A directory's own row and its "Loading…" placeholder name the same path. */
+  key: string;
+  /** The row's `value`: what every event it provokes reports, and what `currentPath` matches. */
+  path: string;
+  name: string;
+  /** `directory` or `file` — what the drag island asks the row about. */
+  type: string;
+  /** Which of the two row shapes to draw: a `jx-tree-item`, or the placeholder that is not one. */
+  kind: "item" | "loading";
+  /** The `--depth` custom property the PLACEHOLDER's indent is computed from. */
+  depth: string;
+  /** `level`: the depth, one-based. The element writes `aria-level` and the indent from it. */
+  level: string;
+  posInSet: string;
+  setSize: string;
+  /** `"true"` / `"false"` for a directory; `""` for a file, which is a leaf and gets no twisty. */
+  ariaExpanded: string;
+  /** The kit icon name for the row's own glyph. */
+  icon: string;
+  localeState: "hidden" | "shown";
+  /** The declared locale's name in its own language. */
+  locale: string;
+}
+
+/** Everything the document draws, as one value. */
+export interface FilesPanelValues {
+  /** Which of three things the panel is: no project, a monorepo root, or a tree. */
+  view: "none" | "welcome" | "tree";
+  headerState: "hidden" | "shown";
+  projectName: string;
+  query: string;
+  /** "Show ignored files" / "Hide ignored files" — the button's name AND its tooltip. */
+  ignoredLabel: string;
+  ignoredIcon: string;
+  ignoredSelected: boolean;
+  /** The two spacers, in pixels, reserving the scroll of the rows the window left out. */
+  padTop: number;
+  padBottom: number;
+  rows: FileRowView[];
+  /** The row the tree's cursor is on, or `""`. */
+  selectedPath: string;
+  /** The row the reader is dragging, or `""`. */
+  dragPath: string;
+  /** The row a drag is currently over, or `""`. */
+  dropPath: string;
+  /** `"true"` while a drag is over the tree background, which is the project root. */
+  rootDrop: string;
+  /**
+   * The row the caret is on.
+   *
+   * A row the window did not draw is allowed here, which is the difference from the tab stop this
+   * replaced: `jx-tree` falls back to the first DRAWN row for the tab stop and leaves `current`
+   * alone, so a caret that has scrolled away is remembered rather than clamped.
+   */
+  currentPath: string;
+}
+
+/** What a control can ask the tree to do. Every one of them is a decision the flow owns. */
+export interface FilesPanelActions {
+  /** The welcome state's one verb — the declared `project.open` command. */
+  openProject: () => void;
+  newFile: () => void;
+  refresh: () => void;
+  toggleIgnored: () => void;
+  search: (value: string) => void;
+  /** A click, Enter or a double click on a row: expand that directory, or open that file. */
+  activate: (path: string) => void;
+  /** Right-click on a row, at the pointer. */
+  contextMenu: (path: string, x: number, y: number) => void;
+  /** The reader meant that row. Single-select, so every intent the element resolves is a replace. */
+  select: (path: string) => void;
+  /** A directory should be put into `expanded` — the twisty, `ArrowRight` or `ArrowLeft`. */
+  expand: (path: string, expanded: boolean) => void;
+  /**
+   * The caret has to reach a row the window did not draw.
+   *
+   * The element knows only that the pad on that side is not zero; which row `key` means, and how
+   * far to scroll to bring it into view, is a question about the MODEL and so is answered here.
+   */
+  move: (from: string, key: string) => void;
+  /**
+   * A letter has to be resolved against a model the window did not draw.
+   *
+   * Dispatched for every printable character while the tree is windowed — not only when the drawn
+   * rows hold no match, because a search over a slice always answers and the answer is the wrong
+   * row. Which row the model's next `char` after `from` is, is a question about the MODEL.
+   */
+  typeahead: (from: string, char: string) => void;
+  /**
+   * The tree element exists. The flow measures it — it is the only source of the window's geometry
+   * — and hangs the project root's drop target off it.
+   */
+  treeHost: (element: HTMLElement) => void;
+  /** One row element exists: a drag source, and an external-file drop target. */
+  rowHost: (element: HTMLElement, path: string, type: string) => void;
+}
+
+export interface FilesPanelSurfaceHandle {
+  /**
+   * Settles once the document is in the container, or at once if it was disposed first.
+   *
+   * The window needs it. A document is APPENDED when its mount resolves, so the tree element
+   * announced through `onNodeCreated` is still detached — and a scroll watch armed against a
+   * detached element resolves no scroller at all and is never armed again, because the first mount
+   * is the one paint nothing else follows. The flow re-measures on this.
+   */
+  ready: Promise<void>;
+  /** Bring the mounted document up to date with a whole projection. */
+  update: (values: FilesPanelValues) => void;
+  /** Whether the document this mounted is still standing in the container it was given. */
+  connected: () => boolean;
+  /** Take the document down. Idempotent. */
+  dispose: () => void;
+}
+
+/** The scope the document reads: the projection, plus everything a control can ask for. */
+interface FilesPanelScope extends Record<string, unknown>, FilesPanelValues, FilesPanelActions {}
+
+/** Write a projection into the scope. Assignment by assignment, so an unchanged field is inert. */
+function project(scope: FilesPanelScope, values: FilesPanelValues): void {
+  scope.view = values.view;
+  scope.headerState = values.headerState;
+  scope.projectName = values.projectName;
+  scope.query = values.query;
+  scope.ignoredLabel = values.ignoredLabel;
+  scope.ignoredIcon = values.ignoredIcon;
+  scope.ignoredSelected = values.ignoredSelected;
+  scope.padTop = values.padTop;
+  scope.padBottom = values.padBottom;
+  scope.rows = values.rows;
+  scope.selectedPath = values.selectedPath;
+  scope.dragPath = values.dragPath;
+  scope.dropPath = values.dropPath;
+  scope.rootDrop = values.rootDrop;
+  scope.currentPath = values.currentPath;
+}
+
+/** The scope's starting shape, before the first projection lands on it. */
+export function emptyFilesPanelValues(): FilesPanelValues {
+  return {
+    currentPath: "",
+    dragPath: "",
+    dropPath: "",
+    headerState: "hidden",
+    ignoredIcon: "eye-slash",
+    ignoredLabel: "Show ignored files",
+    ignoredSelected: false,
+    padBottom: 0,
+    padTop: 0,
+    projectName: "",
+    query: "",
+    rootDrop: "",
+    rows: [],
+    selectedPath: "",
+    view: "none",
+  };
+}
+
+/** The `part` a node's definition carries, or `""` for a text node or an unmarked element. */
+function partOf(def: JxElement | string): string {
+  const part = typeof def === "string" ? undefined : def.attributes?.["part"];
+  return typeof part === "string" ? part : "";
+}
+
+/** The mapped row a node was rendered inside, or null when it was not in one. */
+function mappedRow(state: JxScope | undefined): FileRowView | null {
+  const map = state?.["$map"] as { item?: unknown } | undefined;
+  const item = map?.item as FileRowView | undefined;
+  return typeof item?.path === "string" ? item : null;
+}
+
+/**
+ * Mount the Files document into `container`, which is the `.panel-content` the Navigator painted.
+ *
+ * Nothing is called on the elements, so the mount is all this has to wait for: the two islands
+ * announce themselves through `onNodeCreated` as their nodes are created, which is one
+ * `connectedCallback` EARLIER than awaiting the element would be (guidelines §1.1).
+ */
+export function mountFilesPanelSurface(
+  container: HTMLElement,
+  values: FilesPanelValues,
+  actions: FilesPanelActions,
+): FilesPanelSurfaceHandle {
+  const scope = reactive<FilesPanelScope>({
+    ...emptyFilesPanelValues(),
+    ...actions,
+  }) as FilesPanelScope;
+  project(scope, values);
+
+  let mounted: SurfaceHandle | null = null;
+  let disposed = false;
+  const ready = mountSurface("files-panel", scope, container, {
+    onNodeCreated: (element, _path, def, state) => {
+      /* `disposed` FIRST, and it is not defensive. The mount is asynchronous and its nodes are
+         created while it runs, so a panel taken down inside the same turn — the Navigator painting
+         a second panel over this one — still walks this callback for every row. Without the guard
+         the flow adopts rows of a document that is about to be thrown away, and the registrations
+         it makes outlive it: `unmountFilesPanel` already ran, so nothing is left to take them
+         back. */
+      if (disposed || !(element instanceof HTMLElement)) {
+        return;
+      }
+      const part = partOf(def);
+      if (part === "tree") {
+        actions.treeHost(element);
+        return;
+      }
+      /* `"row"` is the `jx-tree-item`, and the placeholder is `"loading-row"` — which is how the
+         two are told apart now that they are different elements. A placeholder is not a drag source
+         and not a drop target: there is no file there yet, and a registration against a node that
+         is about to be replaced by the real listing would be one the flow could never take back. */
+      if (part !== "row") {
+        return;
+      }
+      const row = mappedRow(state);
+      if (row) {
+        actions.rowHost(element, row.path, row.type);
+      }
+    },
+  }).then((surface) => {
+    if (disposed) {
+      surface.dispose();
+      return;
+    }
+    mounted = surface;
+  });
+
+  return {
+    /* While the mount is still in flight there is nothing in the container to ask about, so the
+       answer is simply whether this handle is still wanted — answering no would start a second
+       mount racing the first. Once mounted, the question is whether the root is still where it was
+       put: a Navigator that painted another panel cleared this document out from under it. */
+    connected: () =>
+      !disposed && (mounted === null || (mounted.root as Node).parentNode === container),
+    dispose() {
+      disposed = true;
+      mounted?.dispose();
+      mounted = null;
+    },
+    ready,
+    update: (next) => {
+      project(scope, next);
+    },
+  };
+}

package/src/surfaces/formula-palette.json

@@ -0,0 +1,364 @@
+{
+  "$schema": "https://jxsuite.com/schema/v1",
+  "$id": "StudioFormulaPalette",
+  "$description": "The formula palette (spec §19.9): a search field over the formula catalog, its results grouped by the catalog's own group order, and one pick that hands an entry back to whoever opened it. The same shape as `palette.json` — a scrim, a framed panel, a borderless field, a listbox — because it is the same gesture over a different corpus, and the two used to share a stylesheet by sharing its class names. `groups` is the filtered catalog already grouped; `activeId` is the highlight, and it is ONE string — the id the field points `aria-activedescendant` at and the id the listbox is handed as `active` — kept apart from the rows so a key moves it without the list reconciling, which is why every row carries the FLAT index it would otherwise have to be asked for. Panel position is the caller's: centred under the top edge by default, and pinned under an anchor control when one was named, which is the only thing about this surface a document cannot decide for itself — it arrives as `anchorLeft`/`anchorTop`, two numbers the `style` object below binds, because a style declaration may read state like any other value (spec §9.1).",
+  "tagName": "div",
+  "attributes": {
+    "part": "palette"
+  },
+  "style": {
+    "$description": "The `.quick-search-*` rules the palette used to borrow from `styles/overlays.css`, brought here and re-valued. Every colour in the originals was a `--spectrum-*` name with a hex fallback, and a mounted document is outside `<sp-theme>` — so each of those resolved to its fallback and the palette had stopped following the chrome theme at all. The names now read from the kit's own layer, which is where a surface's colours come from.",
+    "display": "contents",
+    "--formula-palette-left": "${state.anchorLeft}px",
+    "--formula-palette-top": "${state.anchorTop}px",
+    "& [part=\"overlay\"]": {
+      "position": "fixed",
+      "inset": "0",
+      "zIndex": "1000",
+      "display": "flex",
+      "justifyContent": "center",
+      "paddingTop": "60px",
+      "background": "rgba(0, 0, 0, 0.4)"
+    },
+    "& [part=\"panel\"]": {
+      "width": "560px",
+      "maxWidth": "calc(100vw - 32px)",
+      "maxHeight": "420px",
+      "display": "flex",
+      "flexDirection": "column",
+      "alignSelf": "flex-start",
+      "background": "var(--jx-bg-overlay)",
+      "border": "1px solid var(--jx-border)",
+      "borderRadius": "var(--jx-radius-md)",
+      "boxShadow": "var(--jx-shadow-dialog)",
+      "color": "var(--jx-fg)",
+      "fontFamily": "var(--jx-font-sans)",
+      "overflow": "hidden"
+    },
+    "& [part=\"panel\"][data-anchored]": {
+      "$description": "Opened from a control rather than from a chord: the panel hangs under that control instead of sitting under the top edge. The two custom properties are the only measured numbers in the surface — a rect belongs to the moment it was taken, so the adapter measures it once per open and this document binds the result. They used to travel as a `style` ATTRIBUTE the adapter assembled into one string, on the belief that a document cannot bind a style declaration to state; it can, and always could. They are declared at the top of this object rather than here because a reactive custom property in a rule targeting the element ITSELF is written inline under the author's own name (spec §9.1), and the panel then reads them by inheritance — the root is `display: contents`, so nothing sits between the two.",
+      "position": "fixed",
+      "left": "var(--formula-palette-left)",
+      "top": "var(--formula-palette-top)",
+      "margin": "0"
+    },
+    "& [part=\"input\"]": {
+      "$description": "Borderless inside its own framed panel: the frame is the affordance and a second one around the field would only draw a box inside a box. The keyboard ring is given back explicitly, because the reader who arrives here by Tab has nothing else to go on.",
+      "flex": "0 0 auto",
+      "minWidth": "0",
+      "padding": "var(--jx-space-4) var(--jx-space-5)",
+      "font": "inherit",
+      "fontSize": "var(--jx-text-lg)",
+      "border": "none",
+      "borderBottom": "1px solid var(--jx-border)",
+      "outline": "none",
+      "background": "var(--jx-bg-input)",
+      "color": "var(--jx-fg)",
+      "::placeholder": {
+        "color": "var(--jx-fg-muted)"
+      },
+      ":focus-visible": {
+        "outline": "var(--jx-focus-ring)",
+        "outlineOffset": "-2px"
+      }
+    },
+    "& [part=\"results\"]": {
+      "$description": "The list is the kit's `jx-listbox`, its groups the `role=\"group\"` wrappers that element's own definition names as the shape it draws headings for, and its rows `jx-option`s. The kit's row pads itself by `--jx-space-3`; the other half of the panel's 16px optical margin sits here, on the list, so the heading, the rows and the empty sentence all line up on one edge.",
+      "flex": "1",
+      "paddingInline": "var(--jx-space-3)"
+    },
+    "& [part=\"empty-slot\"]": {
+      "display": "contents"
+    },
+    "& [part=\"option\"] [part=\"label\"]": {
+      "$description": "Monospaced because these are identifiers the reader will type: `??`, `?:`, `Math.max`. It is a rule rather than the kit's per-row `face`, because the whole catalogue draws this way — `face` is data a row carries, and every row carrying the same string would be this decision written once per entry.",
+      "fontFamily": "var(--jx-font-mono)",
+      "fontWeight": "500"
+    },
+    "& [part=\"option\"] [part=\"description\"]": {
+      "$description": "A `jx-select` row's note is a category at the END of the row, so the kit pushes it there with an auto margin. Here the note is what the identifier MEANS and reads as a definition beside it, while the far edge belongs to the kind badge. So the auto margin moves to the end slot.",
+      "marginInlineStart": "0"
+    },
+    "& [part=\"option\"] [part=\"end\"]": {
+      "marginInlineStart": "auto"
+    },
+    "& [part=\"badge\"]": {
+      "flexShrink": "0",
+      "fontSize": "var(--jx-text-xs)",
+      "padding": "1px var(--jx-space-2)",
+      "borderRadius": "var(--jx-radius-sm)",
+      "background": "var(--jx-border)",
+      "color": "var(--jx-fg-dim)"
+    },
+    "& [part=\"option\"][aria-selected=\"true\"] [part=\"badge\"]": {
+      "$description": "The highlight is keyed on `aria-selected`, which the listbox's sidecar is the single writer of — so the state a reader hears and the state a reader sees are one attribute rather than two that could disagree.",
+      "background": "transparent",
+      "border": "1px solid currentColor",
+      "color": "inherit"
+    }
+  },
+  "$switch": {
+    "$ref": "#/state/open"
+  },
+  "cases": {
+    "true": {
+      "tagName": "div",
+      "attributes": {
+        "part": "overlay"
+      },
+      "onclick": {
+        "$prototype": "Function",
+        "body": [
+          {
+            "operator": "call",
+            "target": {
+              "$ref": "#/state/close"
+            },
+            "value": []
+          }
+        ]
+      },
+      "children": [
+        {
+          "tagName": "div",
+          "attributes": {
+            "part": "panel",
+            "data-anchored": "${state.anchored ? '' : null}"
+          },
+          "onclick": {
+            "$prototype": "Function",
+            "body": [
+              {
+                "stopPropagation": true
+              }
+            ]
+          },
+          "children": [
+            {
+              "tagName": "input",
+              "attributes": {
+                "part": "input",
+                "type": "text",
+                "role": "combobox",
+                "aria-controls": "formula-palette-listbox",
+                "aria-expanded": "${state.expanded ? 'true' : 'false'}",
+                "aria-activedescendant": "${state.activeId || null}",
+                "aria-autocomplete": "list",
+                "aria-label": "Search formulas, operators and globals",
+                "placeholder": "Search formulas, operators, globals…"
+              },
+              "value": {
+                "$ref": "#/state/query"
+              },
+              "oninput": {
+                "$prototype": "Function",
+                "body": [
+                  {
+                    "operator": "call",
+                    "target": {
+                      "$ref": "#/state/input"
+                    },
+                    "value": [
+                      {
+                        "$ref": "event#/target/value"
+                      }
+                    ]
+                  }
+                ]
+              },
+              "onkeydown": {
+                "$prototype": "Function",
+                "body": [
+                  {
+                    "$switch": {
+                      "$ref": "event#/key"
+                    },
+                    "cases": {
+                      "ArrowDown": [
+                        {
+                          "preventDefault": true
+                        },
+                        {
+                          "operator": "call",
+                          "target": {
+                            "$ref": "#/state/move"
+                          },
+                          "value": [1]
+                        }
+                      ],
+                      "ArrowUp": [
+                        {
+                          "preventDefault": true
+                        },
+                        {
+                          "operator": "call",
+                          "target": {
+                            "$ref": "#/state/move"
+                          },
+                          "value": [-1]
+                        }
+                      ],
+                      "Enter": [
+                        {
+                          "preventDefault": true
+                        },
+                        {
+                          "operator": "call",
+                          "target": {
+                            "$ref": "#/state/activate"
+                          },
+                          "value": []
+                        }
+                      ],
+                      "Escape": [
+                        {
+                          "preventDefault": true
+                        },
+                        {
+                          "operator": "call",
+                          "target": {
+                            "$ref": "#/state/close"
+                          },
+                          "value": []
+                        }
+                      ]
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              "tagName": "jx-listbox",
+              "attributes": {
+                "part": "results",
+                "id": "formula-palette-listbox"
+              },
+              "$props": {
+                "label": "Formulas",
+                "active": "${state.activeId}"
+              },
+              "onselect": {
+                "$prototype": "Function",
+                "body": [
+                  {
+                    "operator": "call",
+                    "target": {
+                      "$ref": "#/state/activateRow"
+                    },
+                    "value": [
+                      {
+                        "$ref": "event#/detail"
+                      }
+                    ]
+                  }
+                ],
+                "description": "One handler for every row, because a row's `select` bubbles. The detail is the row's `value`, which is the FLAT index it occupies across all the groups — the number the nested map cannot count for itself, and the number the id is built from."
+              },
+              "children": [
+                {
+                  "tagName": "div",
+                  "attributes": {
+                    "part": "empty-slot",
+                    "role": "none"
+                  },
+                  "$switch": {
+                    "$ref": "#/state/isEmpty"
+                  },
+                  "cases": {
+                    "true": {
+                      "tagName": "div",
+                      "attributes": {
+                        "part": "empty"
+                      },
+                      "textContent": "${state.emptyHint}"
+                    }
+                  }
+                },
+                {
+                  "$prototype": "Array",
+                  "items": {
+                    "$ref": "#/state/groups"
+                  },
+                  "key": {
+                    "$ref": "$map/item/key"
+                  },
+                  "map": {
+                    "tagName": "div",
+                    "attributes": {
+                      "part": "group",
+                      "role": "group",
+                      "aria-label": "${$map.item.label}"
+                    },
+                    "children": [
+                      {
+                        "tagName": "div",
+                        "attributes": {
+                          "part": "group-heading",
+                          "aria-hidden": "true"
+                        },
+                        "textContent": "${$map.item.label}"
+                      },
+                      {
+                        "$prototype": "Array",
+                        "items": {
+                          "$ref": "$map/item/rows"
+                        },
+                        "key": {
+                          "$ref": "$map/item/key"
+                        },
+                        "map": {
+                          "tagName": "jx-option",
+                          "attributes": {
+                            "part": "option",
+                            "id": "formula-palette-option-${$map.item.index}",
+                            "title": "${$map.item.description}",
+                            "data-kind": "${$map.item.kind}"
+                          },
+                          "$props": {
+                            "value": "${$map.item.index}",
+                            "label": {
+                              "$ref": "$map/item/label"
+                            },
+                            "description": {
+                              "$ref": "$map/item/description"
+                            }
+                          },
+                          "onmouseenter": {
+                            "$prototype": "Function",
+                            "body": [
+                              {
+                                "operator": "call",
+                                "target": {
+                                  "$ref": "#/state/hover"
+                                },
+                                "value": [
+                                  {
+                                    "$ref": "$map/item/index"
+                                  }
+                                ]
+                              }
+                            ]
+                          },
+                          "children": [
+                            {
+                              "tagName": "span",
+                              "attributes": {
+                                "slot": "end",
+                                "part": "badge"
+                              },
+                              "textContent": "${$map.item.kind}"
+                            }
+                          ]
+                        }
+                      }
+                    ]
+                  }
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  }
+}