@lightworkai.official/debug-capture-vue 0.6.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightworkai.official/debug-capture-vue",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Vue 3 bindings for @lightworkai.official/debug-capture",
   "type": "module",
   "module": "./dist/index.mjs",
@@ -25,7 +25,7 @@
   },
   "peerDependencies": {
     "vue": ">=3.3",
-    "@lightworkai.official/debug-capture": "^0.6.0",
+    "@lightworkai.official/debug-capture": "^0.7.0",
     "@tiptap/vue-3": "^3",
     "@tiptap/starter-kit": "^3",
     "@tiptap/extension-image": "^3",

package/src/components/SupportPortalButton.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * "ดูปัญหาที่แจ้ง" — hands the current user to their tickets on the support host,
+ * already signed in.
+ *
+ * Unlike the reporter button, this one awaits: the token is fetched from the
+ * host's own server at click time, because it lives about two minutes and is
+ * spent on arrival. So it can be pending, and it can fail — most often because
+ * nobody is signed in, which is the host's question to answer, not ours.
+ *
+ * Unstyled by default, like its sibling: it lands in the host's own header.
+ */
+import { ref } from "vue";
+import { openSupportPortal, showToast } from "@lightworkai.official/debug-capture";
+
+const props = withDefaults(
+  defineProps<{
+    label?: string;
+    /** Open in a new tab instead of navigating away. */
+    newTab?: boolean;
+  }>(),
+  { label: "ดูปัญหาที่แจ้ง", newTab: false },
+);
+
+const emit = defineEmits<{ (e: "error", err: unknown): void }>();
+const pending = ref(false);
+
+async function open(event: MouseEvent): Promise<void> {
+  if (event.defaultPrevented || pending.value) return;
+  pending.value = true;
+  try {
+    await openSupportPortal(props.newTab ? { target: "_blank" } : {});
+  } catch (err) {
+    // A host that listens gets to say it its own way; one that does not still
+    // gets told, rather than a button that looks broken.
+    if (emit) emit("error", err);
+    showToast("เปิดรายการปัญหาไม่สำเร็จ", "error");
+  } finally {
+    // Only reached when navigation did not happen — on success the page is
+    // already leaving.
+    pending.value = false;
+  }
+}
+</script>
+
+<template>
+  <button type="button" :aria-label="label" :title="label" :disabled="pending" @click="open">
+    <slot :pending="pending">{{ label }}</slot>
+  </button>
+</template>

package/src/index.ts

@@ -13,22 +13,17 @@
  */
 export { default as DebugCaptureInit } from "./components/DebugCaptureInit.vue";
 export { default as ReportProblemButton } from "./components/ReportProblemButton.vue";
-export { default as MyTicketsPanel } from "./components/MyTicketsPanel.vue";
-
-// Composable pieces, for a host that wants to arrange them itself.
-export { default as TicketTable } from "./components/TicketTable.vue";
-export { default as TicketDetail } from "./components/TicketDetail.vue";
-export { default as TicketConversation } from "./components/TicketConversation.vue";
-export { default as RichReplyEditor } from "./components/RichReplyEditor.vue";
-export { default as TicketBody } from "./components/TicketBody.vue";
-export { default as ImageAnnotatorDialog } from "./components/ImageAnnotatorDialog.vue";
+/*
+ * The reporter's own tickets are no longer components this package ships.
+ *
+ * They were: a list, a thread, a reply editor and an annotator dialog, in three
+ * frameworks, over a read API. It worked, and it meant every change to the way
+ * a ticket looks had to land in four repositories. The support host already
+ * renders that screen, so the library hands people to it instead — one button.
+ * See SupportPortalButton, and the core's `openSupportPortal`.
+ */
+export { default as SupportPortalButton } from "./components/SupportPortalButton.vue";
 
 // One import for a host, not two.
 export { configureDebugCapture, launch, onCrash } from "@lightworkai.official/debug-capture";
-export type {
-  DebugCaptureConfig,
-  DebugReason,
-  ErroredQuery,
-  MyTicketListItem,
-  MyTicketDetail,
-} from "@lightworkai.official/debug-capture";
+export type { DebugCaptureConfig, DebugReason, ErroredQuery } from "@lightworkai.official/debug-capture";

package/dist/components/ImageAnnotatorDialog.vue.d.ts

@@ -1,19 +0,0 @@
-type __VLS_Props = {
-    /**
-     * The picked image, as a same-origin data URI. Null closes the dialog, so a
-     * caller can keep it mounted and drive it from one nullable ref.
-     */
-    src: string | null;
-    /** Shown in the description, as the app's dialog does. */
-    filename?: string;
-    /** Falls back to the configured locale — a caller inside the app need not pass it. */
-    locale?: "th" | "en";
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    cancel: () => any;
-    confirm: (dataUri: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onCancel?: (() => any) | undefined;
-    onConfirm?: ((dataUri: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/MyTicketsPanel.vue.d.ts

@@ -1,17 +0,0 @@
-import { type MyTicketDetail } from "@lightworkai.official/debug-capture";
-type __VLS_Props = {
-    /** Change it to re-read the list — after filing a report, say. */
-    refreshKey?: string | number;
-    /** Hide the panel's own heading when the host page already has one. */
-    hideTitle?: boolean;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    error: (message: string) => any;
-    reopened: (ticket: MyTicketDetail) => any;
-    replied: (ticket: MyTicketDetail) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onError?: ((message: string) => any) | undefined;
-    onReopened?: ((ticket: MyTicketDetail) => any) | undefined;
-    onReplied?: ((ticket: MyTicketDetail) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/ReopenPanel.vue.d.ts

@@ -1,12 +0,0 @@
-import type { TicketStrings } from "@lightworkai.official/debug-capture";
-type __VLS_Props = {
-    t: TicketStrings;
-    locale: "th" | "en";
-    busy?: boolean;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    reopen: (note: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onReopen?: ((note: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/RichReplyEditor.vue.d.ts

@@ -1,59 +0,0 @@
-import { type EditorTool } from "@lightworkai.official/debug-capture";
-type __VLS_Props = {
-    placeholder: string;
-    /** Support host origin — the sanitiser resolves inline image URLs against it. */
-    host: string;
-    disabled?: boolean;
-    /** Which controls to show. Defaults to the original's NOTE_TOOLBAR. */
-    tools?: EditorTool[];
-    /** Hide the toolbar until focused or non-empty. */
-    compact?: boolean;
-    labels: Record<string, string>;
-    /**
-     * Store an image and return the URL to reference it by.
-     *
-     * Optional, and the fallback is not "no images" — it is the annotated data
-     * URI carried in the body for the server to store on arrival. A composer on
-     * a ticket that does not exist yet has nowhere to upload to, and that is a
-     * reason to move the work, not to take the feature away.
-     */
-    uploadImage?: (file: File) => Promise<string>;
-    /** UI language, for the annotator's own labels. */
-    locale?: "th" | "en";
-    /** Content to start from — editing an existing message rather than writing one. */
-    initial?: string;
-};
-/**
- * Sanitised HTML, or "" when there is nothing worth sending.
- *
- * `cleanHtml` is not belt-and-braces over TipTap's schema. The schema drops an
- * `onclick`, but the Image extension takes any `src` it is given — so a
- * screenshot pasted from a web page arrives with that page's remote image
- * intact, and posting it would store a tracking pixel in the thread aimed at
- * every future reader. The allowlist is what narrows an image to our own.
- */
-declare function value(): string;
-declare function clear(): void;
-type __VLS_PublicProps = __VLS_Props & {
-    /**
-     * Two-way binding, for a host that would rather drive this from a ref than call
-     * `value()`. Optional: the panel uses the imperative API, the app uses v-model.
-     */
-    modelValue?: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {
-    value: typeof value;
-    clear: typeof clear;
-    focus: () => boolean | undefined;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
-} & {
-    error: (message: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
-    onError?: ((message: string) => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
-}>, {
-    tools: EditorTool[];
-    compact: boolean;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/StatusHero.vue.d.ts

@@ -1,10 +0,0 @@
-import type { MyTicketDetail, StatusMaps, TicketStrings } from "@lightworkai.official/debug-capture";
-type __VLS_Props = {
-    ticket: MyTicketDetail;
-    maps: StatusMaps;
-    t: TicketStrings;
-    locale: "th" | "en";
-    host: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/StatusPill.vue.d.ts

@@ -1,16 +0,0 @@
-/**
- * A status as the realm coloured it.
- *
- * The tone arrives as DATA — a realm adds lanes whenever it likes — so it is an
- * inline style rather than a class. There is no stylesheet that could know the
- * names in advance.
- */
-type __VLS_Props = {
-    label: string;
-    tone: {
-        fg: string;
-        bg: string;
-    };
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/TicketBody.vue.d.ts

@@ -1,6 +0,0 @@
-type __VLS_Props = {
-    html: string;
-    host: string;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/TicketConversation.vue.d.ts

@@ -1,22 +0,0 @@
-import { type MyTicketDetail, type TicketStrings } from "@lightworkai.official/debug-capture";
-type __VLS_Props = {
-    ticket: MyTicketDetail;
-    t: TicketStrings;
-    host: string;
-    timezone: string;
-    locale: "th" | "en" | undefined;
-    sending?: boolean;
-    uploadImage: (file: File) => Promise<string>;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {
-    clear: () => void | undefined;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    error: (message: string) => any;
-    edited: () => any;
-    send: (body: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onError?: ((message: string) => any) | undefined;
-    onEdited?: (() => any) | undefined;
-    onSend?: ((body: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/TicketDetail.vue.d.ts

@@ -1,28 +0,0 @@
-import { type MyTicketDetail, type RealmConfig, type StatusEvent, type StatusMaps, type TicketStrings } from "@lightworkai.official/debug-capture";
-type __VLS_Props = {
-    ticket: MyTicketDetail;
-    history: StatusEvent[];
-    config: RealmConfig;
-    maps: StatusMaps;
-    t: TicketStrings;
-    host: string;
-    locale: "th" | "en" | undefined;
-    sending?: boolean;
-    reopening?: boolean;
-    uploadImage: (file: File) => Promise<string>;
-    attachmentUrl: (id: string) => Promise<string>;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    error: (message: string) => any;
-    back: () => any;
-    edited: () => any;
-    send: (body: string) => any;
-    reopen: (note: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onError?: ((message: string) => any) | undefined;
-    onBack?: (() => any) | undefined;
-    onEdited?: (() => any) | undefined;
-    onSend?: ((body: string) => any) | undefined;
-    onReopen?: ((note: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/TicketScreenshots.vue.d.ts

@@ -1,8 +0,0 @@
-import type { TicketAttachment } from "@lightworkai.official/debug-capture";
-type __VLS_Props = {
-    images: TicketAttachment[];
-    title: string;
-    attachmentUrl: (id: string) => Promise<string>;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/TicketTable.vue.d.ts

@@ -1,25 +0,0 @@
-import { type MyTicketListItem, type Sort, type SortKey, type StatusMaps, type TicketStrings } from "@lightworkai.official/debug-capture";
-type __VLS_Props = {
-    items: MyTicketListItem[];
-    maps: StatusMaps;
-    t: TicketStrings;
-    slug: string | undefined;
-    timezone: string;
-    locale: "th" | "en" | undefined;
-    keyword: string;
-    statusFilter: string;
-    sort: Sort;
-    page: number;
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {
-    count: import("vue").ComputedRef<number>;
-}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
-    sort: (key: SortKey) => any;
-    page: (page: number) => any;
-    open: (id: string) => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
-    onSort?: ((key: SortKey) => any) | undefined;
-    onPage?: ((page: number) => any) | undefined;
-    onOpen?: ((id: string) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/TicketTimeline.vue.d.ts

@@ -1,11 +0,0 @@
-import { type StatusEvent, type StatusMaps } from "@lightworkai.official/debug-capture";
-type __VLS_Props = {
-    history: StatusEvent[];
-    status: string;
-    createdAt: string;
-    maps: StatusMaps;
-    timezone: string;
-    locale: "th" | "en";
-};
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-export default _default;

package/dist/components/icons.d.ts

@@ -1,38 +0,0 @@
-/**
- * The toolbar's icons, as tiny functional components.
- *
- * Drawn rather than imported: the original uses lucide, and a package that
- * pulled an icon set in so a reply box could show a B would cost every consumer
- * that dependency. These are the same lucide paths at the same 24-unit scale.
- */
-import { type FunctionalComponent } from "vue";
-export declare const BoldIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const ItalicIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const UnderlineIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const BulletListIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const OrderedListIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const LinkIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const ImageIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const SendIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const SearchIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const ArrowLeftIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const CheckIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const MessageIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const RotateIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const AlertIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const InboxIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const ClockIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const CheckCircleIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const BanIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const WrenchIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const SquareIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const ArrowUpRightIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const HighlighterIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const TypeIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const TrashIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const StrikeIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const CodeIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const QuoteIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const PencilIcon: FunctionalComponent<{}, {}, any, {}>;
-export declare const CheckIcon2: FunctionalComponent<{}, {}, any, {}>;
-export declare const XIcon: FunctionalComponent<{}, {}, any, {}>;

package/src/components/ImageAnnotatorDialog.vue

@@ -1,160 +0,0 @@
-<script setup lang="ts">
-/**
- * Draw on an image before it is sent.
- *
- * The original opens this the moment you pick a picture, and the reason is in
- * its own comment: annotating BEFORE upload keeps the canvas same-origin, so
- * `toDataURL` is not tainted by a cross-origin presigned URL. Pointing at the
- * problem is also most of what a screenshot is for.
- *
- * The drawing itself is `createAnnotator` from the core — one canvas engine,
- * shared by all three framework packages, because there is no declarative way
- * to draw on a canvas. What is here is only the chrome: a dialog, a toolbar and
- * two buttons.
- */
-import { onBeforeUnmount, ref, shallowRef, watch } from "vue";
-import {
-  createAnnotator,
-  getConfig,
-  reporterStrings,
-  type Annotator,
-  type AnnotatorTool,
-  type ReporterStrings,
-} from "@lightworkai.official/debug-capture";
-import { ArrowUpRightIcon, HighlighterIcon, SquareIcon, TrashIcon, TypeIcon } from "./icons";
-
-const props = defineProps<{
-  /**
-   * The picked image, as a same-origin data URI. Null closes the dialog, so a
-   * caller can keep it mounted and drive it from one nullable ref.
-   */
-  src: string | null;
-  /** Shown in the description, as the app's dialog does. */
-  filename?: string;
-  /** Falls back to the configured locale — a caller inside the app need not pass it. */
-  locale?: "th" | "en";
-}>();
-
-const emit = defineEmits<{
-  /** The annotated image, at full resolution. */
-  (e: "confirm", dataUri: string): void;
-  (e: "cancel"): void;
-}>();
-
-const t = reporterStrings(props.locale ?? safeLocale());
-
-/** `getConfig()` throws when nothing is configured; the dialog still has words. */
-function safeLocale(): "th" | "en" | undefined {
-  try {
-    return getConfig().locale;
-  } catch {
-    return undefined;
-  }
-}
-const TOOLS: { tool: AnnotatorTool; key: keyof ReporterStrings; icon: unknown }[] = [
-  { tool: "rect", key: "toolRect", icon: SquareIcon },
-  { tool: "arrow", key: "toolArrow", icon: ArrowUpRightIcon },
-  { tool: "highlight", key: "toolHighlight", icon: HighlighterIcon },
-  { tool: "text", key: "toolText", icon: TypeIcon },
-];
-
-const canvas = ref<HTMLCanvasElement | null>(null);
-// shallowRef: the annotator holds a canvas and its own mutable state, and Vue
-// has no business making any of that reactive.
-const annotator = shallowRef<Annotator | null>(null);
-const active = ref<AnnotatorTool | null>(null);
-const loading = ref(true);
-
-watch(
-  () => [props.src, canvas.value] as const,
-  ([src, node]) => {
-    if (!src || !node) return;
-    annotator.value?.destroy();
-    const image = new Image();
-    image.addEventListener("load", () => {
-      // A backing store at the image's own size, BEFORE the annotator draws
-      // into it. Without this the canvas keeps its default 300x150, the image
-      // is squashed into that, and CSS then stretches the result — blurry, and
-      // the wrong shape.
-      node.width = image.naturalWidth;
-      node.height = image.naturalHeight;
-      annotator.value = createAnnotator(node, image, () => {
-        // The toolbar mirrors the engine, so it has to hear about a tool being
-        // CONSUMED as well as a shape being added.
-        active.value = null;
-      });
-      loading.value = false;
-    });
-    image.src = src;
-  },
-  { immediate: true },
-);
-
-onBeforeUnmount(() => annotator.value?.destroy());
-
-function pick(tool: AnnotatorTool): void {
-  active.value = active.value === tool ? null : tool;
-  annotator.value?.setTool(active.value);
-}
-
-function clearAll(): void {
-  annotator.value?.clear();
-  active.value = null;
-}
-
-function confirm(): void {
-  // Full resolution, never the on-screen scale.
-  emit("confirm", annotator.value?.toDataUrl() ?? props.src ?? "");
-}
-</script>
-
-<template>
-  <div v-if="src" class="lw-annotator" role="dialog" aria-modal="true" @click.self="emit('cancel')">
-    <div class="lw-annotator__panel">
-      <!-- Header, toolbar, canvas, help, footer — the same shape and the same
-           words as the app's own dialog, so the two are one thing in two
-           places rather than two things that resemble each other. -->
-      <div class="lw-annotator__head">
-        <div class="lw-grow">
-          <h2 class="lw-annotator__title">{{ t.annotateTitle }}</h2>
-          <p class="lw-annotator__desc">
-            {{ t.annotateHint }}<template v-if="filename"> · {{ filename }}</template>
-          </p>
-        </div>
-        <button type="button" class="lw-annotator__close" :aria-label="t.cancel" @click="emit('cancel')">✕</button>
-      </div>
-
-      <div class="lw-annotator__tools">
-        <button
-          v-for="tool in TOOLS"
-          :key="tool.tool"
-          type="button"
-          class="lw-atool"
-          :aria-pressed="active === tool.tool"
-          :disabled="loading"
-          @click="pick(tool.tool)"
-        >
-          <component :is="tool.icon" /> {{ t[tool.key] }}
-        </button>
-        <span class="lw-grow" />
-        <!-- Right-aligned and on its own, like the app's. Deleting ONE shape is
-             the ✕ on the shape, which is what the help line below explains. -->
-        <button type="button" class="lw-atool lw-atool--plain" :disabled="loading" @click="clearAll">
-          <TrashIcon /> {{ t.clearAll }}
-        </button>
-      </div>
-
-      <div class="lw-annotator__canvas">
-        <div class="lw-annotator__canvasbox"><canvas ref="canvas" /></div>
-      </div>
-
-      <p class="lw-annotator__hint">{{ t.annotateHelp }}</p>
-
-      <div class="lw-annotator__actions">
-        <span class="lw-grow" />
-        <button type="button" class="lw-btn" @click="emit('cancel')">{{ t.cancel }}</button>
-        <button type="button" class="lw-send" :disabled="loading" @click="confirm">{{ t.annotateApply }}</button>
-      </div>
-    </div>
-  </div>
-</template>