@lightworkai.official/debug-capture-angular 0.6.0

package/src/index.ts

@@ -0,0 +1,119 @@
+/**
+ * Angular bindings for @lightworkai.official/debug-capture.
+ *
+ * Standalone providers + one standalone component, so this works in an
+ * `app.config.ts` and in an NgModule without shipping two of everything.
+ *
+ * Note what a consumer does NOT have to do: no `CUSTOM_ELEMENTS_SCHEMA`. The
+ * reporter is a custom element, but it is created imperatively by
+ * `installDebugCapture` and never appears in a template, so Angular's compiler
+ * never sees an unknown tag to complain about. That awkwardness is the
+ * wrapper's to absorb, which is most of the reason the wrapper exists.
+ */
+import {
+  APP_INITIALIZER,
+  Component,
+  Input,
+  type EnvironmentProviders,
+  makeEnvironmentProviders,
+} from "@angular/core";
+import {
+  configureDebugCapture,
+  installDebugCapture,
+  launch,
+  setErroredQueriesSource,
+  type DebugCaptureConfig,
+  type ErroredQuery,
+} from "@lightworkai.official/debug-capture";
+
+export interface DebugCaptureProviderOptions extends DebugCaptureConfig {
+  /** Failed queries from the app's data layer, if it has one. */
+  errorQueries?: () => ErroredQuery[];
+  /** Mount the built-in reporter UI. Off if the host renders its own. */
+  ui?: boolean;
+}
+
+/**
+ * Configure and arm in one call, from `app.config.ts`:
+ *
+ *   providers: [provideDebugCapture({ host, realmKey, app: {...} })]
+ *
+ * Runs as an APP_INITIALIZER so the buffers are recording before the first
+ * route renders. Capture that starts late is capture that misses the navigation
+ * the user is about to complain about.
+ */
+export function provideDebugCapture(options: DebugCaptureProviderOptions): EnvironmentProviders {
+  const { errorQueries, ui, ...config } = options;
+  return makeEnvironmentProviders([
+    {
+      provide: APP_INITIALIZER,
+      multi: true,
+      useValue: () => {
+        configureDebugCapture(config);
+        if (errorQueries) setErroredQueriesSource(errorQueries);
+        installDebugCapture({ ui });
+      },
+    },
+  ]);
+}
+
+/**
+ * The button that opens the reporter.
+ *
+ * `launch` runs straight out of the click: screen capture is gated on a user
+ * gesture, and anything awaited in front of it loses the gesture. That rules
+ * out routing this through a service that returns a Promise.
+ */
+@Component({
+  selector: "lw-report-problem-button",
+  standalone: true,
+  template: `
+    <button type="button" [attr.aria-label]="label" [attr.title]="label" (click)="report()">
+      <ng-content>
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="M8 2l1.9 1.9M16 2l-1.9 1.9" />
+          <rect x="8" y="6" width="8" height="14" rx="4" />
+          <path d="M3 13h5M16 13h5M4 8l3 2M20 8l-3 2M4 18l3-2M20 18l-3-2" />
+        </svg>
+      </ng-content>
+    </button>
+  `,
+  styles: [":host { display: inline-flex; }"],
+})
+export class ReportProblemButtonComponent {
+  @Input() label = "รายงานปัญหา";
+
+  report(): void {
+    launch({ type: "manual" });
+  }
+}
+
+/**
+ * Real standalone components now, not a web element mounted from a wrapper.
+ * 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.
+ *
+ * Import the stylesheet once, in `angular.json` or a global stylesheet:
+ *
+ *   @import "@lightworkai.official/debug-capture/style.css";
+ */
+export { MyTicketsPanelComponent } from "./components/my-tickets-panel.component";
+export { TicketTableComponent } from "./components/ticket-table.component";
+export { TicketDetailComponent } from "./components/ticket-detail.component";
+export { RichReplyEditorComponent } from "./components/rich-reply-editor.component";
+export { TicketBodyComponent } from "./components/ticket-body.component";
+export { ImageAnnotatorDialogComponent } from "./components/image-annotator-dialog.component";
+
+export { configureDebugCapture, launch, onCrash } from "@lightworkai.official/debug-capture";
+export type { DebugCaptureConfig, DebugReason, ErroredQuery, MyTicketListItem, MyTicketDetail } from "@lightworkai.official/debug-capture";