@lightworkai.official/debug-capture-vue 0.6.0

package/README.md

@@ -0,0 +1,52 @@
+# @lightworkai.official/debug-capture-vue
+
+Vue 3 bindings for [`@lightworkai.official/debug-capture`](../debug-capture/README.md).
+
+```ts
+// main.ts
+import { configureDebugCapture } from "@lightworkai.official/debug-capture-vue";
+
+configureDebugCapture({
+  host: "https://support.example.com",
+  realmKey: "pk_live_…",
+  app: { version: "1.4.2", environment: import.meta.env.MODE },
+  user: () => ({ id: auth.user?.id, email: auth.user?.email, fullName: auth.user?.name }),
+});
+```
+
+```vue
+<!-- App.vue — once, above <RouterView> -->
+<DebugCaptureInit />
+
+<!-- wherever the button belongs, styled by you -->
+<ReportProblemButton class="rounded-md border p-2 hover:bg-gray-50" />
+```
+
+## Notes
+
+**No `isCustomElement` config needed.** The reporter is a custom element, but it
+is created imperatively by `installDebugCapture` and never appears in a template,
+so Vue's compiler never sees an unknown tag. Absorbing that is most of why this
+wrapper exists.
+
+**`MyTicketsPanel` shows what this person has reported** — the list, the
+conversation, and "still a problem". It needs `identity` in the config: a token
+your *server* signs, because `realmKey` is public and can authorise filing a
+report but never reading one back. See
+[the core README](../debug-capture/README.md#it-needs-to-know-who-is-asking).
+
+```vue
+<!-- a route of your own -->
+<MyTicketsPanel />
+```
+
+Bind `:refresh-key` to make it re-read the list — after filing a report, say.
+
+**Components are `defineComponent` + `h`, not SFCs**, so the package ships as
+plain TypeScript with no build step of its own and nothing for a consumer to
+configure. There are two components and neither has a template worth the
+machinery.
+
+**Mount `DebugCaptureInit` above the router view** — the buffers must be
+recording before a user hits a problem, or the report arrives with no trail of
+how they got there.

package/dist/components/BugIcon.d.ts

@@ -0,0 +1,3 @@
+import { type FunctionalComponent } from "vue";
+/** The reporter's own glyph, drawn rather than depending on an icon set. */
+export declare const BugIcon: FunctionalComponent;

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

@@ -0,0 +1,13 @@
+import { type DebugCaptureConfig, type ErroredQuery } from "@lightworkai.official/debug-capture";
+type __VLS_Props = {
+    /** Mount the built-in reporter UI. Off if the host renders its own. */
+    ui?: boolean;
+    /** Failed queries from the app's data layer, if it has one. */
+    errorQueries?: () => ErroredQuery[];
+    /** The config, if you did not call configureDebugCapture at module scope. */
+    config?: DebugCaptureConfig;
+};
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    ui: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,19 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,12 @@
+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/ReportProblemButton.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    label?: string;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    label: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,16 @@
+/**
+ * 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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,28 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,25 @@
+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

@@ -0,0 +1,11 @@
+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/ToolbarButton.vue.d.ts

@@ -0,0 +1,21 @@
+type __VLS_Props = {
+    label: string;
+    active?: boolean;
+    disabled?: boolean;
+};
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    activate: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onActivate?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/icons.d.ts

@@ -0,0 +1,38 @@
+/**
+ * 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/dist/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Vue 3 bindings for @lightworkai.official/debug-capture.
+ *
+ * Real single-file components, not `h()` calls into a web component. The core
+ * package holds the logic every framework shares — the ingest client, the
+ * sanitiser, the status maps, the comparators, the capture buffers — and each
+ * framework package renders it the way that framework renders things. A table
+ * is a `<table>` in a template; a rich editor is TipTap.
+ *
+ * Import the stylesheet once, anywhere:
+ *
+ *   import "@lightworkai.official/debug-capture/style.css";
+ */
+export { default as DebugCaptureInit } from "./components/DebugCaptureInit.vue";
+export { default as ReportProblemButton } from "./components/ReportProblemButton.vue";
+export { default as MyTicketsPanel } from "./components/MyTicketsPanel.vue";
+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";
+export { configureDebugCapture, launch, onCrash } from "@lightworkai.official/debug-capture";
+export type { DebugCaptureConfig, DebugReason, ErroredQuery, MyTicketListItem, MyTicketDetail, } from "@lightworkai.official/debug-capture";