@lightworkai.official/debug-capture-vue 0.6.0

package/src/components/icons.ts

@@ -0,0 +1,90 @@
+/**
+ * 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 { h, type FunctionalComponent } from "vue";
+
+function glyph(paths: string[], extra: Record<string, unknown> = {}): FunctionalComponent {
+  const component: FunctionalComponent = () =>
+    h(
+      "svg",
+      {
+        width: 15,
+        height: 15,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        "stroke-width": 2,
+        "stroke-linecap": "round",
+        "stroke-linejoin": "round",
+        "aria-hidden": "true",
+        ...extra,
+      },
+      paths.map((d) => h("path", { d })),
+    );
+  return component;
+}
+
+export const BoldIcon = glyph(["M6 4h8a4 4 0 0 1 0 8H6z", "M6 12h9a4 4 0 0 1 0 8H6z"]);
+export const ItalicIcon = glyph(["M19 4h-9", "M14 20H5", "M15 4L9 20"]);
+export const UnderlineIcon = glyph(["M6 4v6a6 6 0 0 0 12 0V4", "M4 20h16"]);
+export const BulletListIcon = glyph([
+  "M8 6h13", "M8 12h13", "M8 18h13", "M3 6h.01", "M3 12h.01", "M3 18h.01",
+]);
+export const OrderedListIcon = glyph([
+  "M10 6h11", "M10 12h11", "M10 18h11", "M4 6h1v4", "M4 10h2", "M6 18H4c0-1 2-2 2-3s-1-1.5-2-1",
+]);
+export const LinkIcon = glyph([
+  "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71",
+  "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71",
+]);
+export const ImageIcon = glyph([
+  "M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z",
+  "M8.5 10a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z",
+  "M21 15l-5-5L5 21",
+]);
+export const SendIcon = glyph(["M22 2L11 13", "M22 2l-7 20-4-9-9-4 20-7z"]);
+export const SearchIcon = glyph(["M21 21l-4.34-4.34", "M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16z"]);
+export const ArrowLeftIcon = glyph(["M19 12H5", "M12 19l-7-7 7-7"]);
+export const CheckIcon = glyph(["M20 6L9 17l-5-5"]);
+export const MessageIcon = glyph(["M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"]);
+export const RotateIcon = glyph(["M3 12a9 9 0 1 0 3-6.7L3 8", "M3 3v5h5"]);
+export const AlertIcon = glyph(["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 8v4", "M12 16h.01"]);
+export const InboxIcon = glyph([
+  "M22 12h-6l-2 3h-4l-2-3H2",
+  "M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z",
+]);
+export const ClockIcon = glyph(["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M12 6v6l4 2"]);
+export const CheckCircleIcon = glyph(["M22 11.08V12a10 10 0 1 1-5.93-9.14", "M22 4L12 14.01l-3-3"]);
+export const BanIcon = glyph(["M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z", "M4.93 4.93l14.14 14.14"]);
+export const WrenchIcon = glyph([
+  "M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z",
+]);
+
+/* The annotator toolbar — the same four tools the app's dialog offers. */
+export const SquareIcon = glyph(["M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2z"], { width: 14, height: 14 });
+export const ArrowUpRightIcon = glyph(["M7 17L17 7", "M7 7h10v10"], { width: 14, height: 14 });
+export const HighlighterIcon = glyph([
+  "M9 11l-6 6v3h9l3-3", "M22 12l-4.6 4.6a2 2 0 0 1-2.8 0l-5.2-5.2a2 2 0 0 1 0-2.8L14 4",
+], { width: 14, height: 14 });
+export const TypeIcon = glyph(["M4 7V4h16v3", "M9 20h6", "M12 4v16"], { width: 14, height: 14 });
+export const TrashIcon = glyph([
+  "M3 6h18", "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2",
+], { width: 14, height: 14 });
+
+/* The three the admin composer had grown beyond the original's NOTE_TOOLBAR. */
+export const StrikeIcon = glyph(["M16 4H9a3 3 0 0 0-2.83 4", "M14 12a4 4 0 0 1 0 8H6", "M4 12h16"]);
+export const CodeIcon = glyph(["M16 18l6-6-6-6", "M8 6l-6 6 6 6"]);
+export const QuoteIcon = glyph([
+  "M3 21c3 0 7-1 7-8V5a2 2 0 0 0-2-2H4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h3",
+  "M14 21c3 0 7-1 7-8V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h3",
+]);
+
+export const PencilIcon = glyph([
+  "M12 20h9", "M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z",
+], { width: 11, height: 11 });
+export const CheckIcon2 = glyph(["M20 6L9 17l-5-5"], { width: 12, height: 12 });
+export const XIcon = glyph(["M18 6L6 18", "M6 6l12 12"], { width: 12, height: 12 });

package/src/index.ts

@@ -0,0 +1,34 @@
+/**
+ * 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";
+
+// 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";
+
+// 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";