@mushi-mushi/web 0.4.1 → 0.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CODE_OF_CONDUCT.md +1 -1
  2. package/README.md +25 -2
  3. package/SECURITY.md +1 -1
  4. package/dist/index.cjs +760 -229
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +47 -0
  7. package/dist/index.d.ts +47 -0
  8. package/dist/index.js +760 -229
  9. package/dist/index.js.map +1 -1
  10. package/package.json +3 -3
package/dist/index.d.cts CHANGED
@@ -8,6 +8,18 @@ declare class Mushi {
8
8
  static destroy(): void;
9
9
  }
10
10
 
11
+ /**
12
+ * FILE: packages/web/src/widget.ts
13
+ * PURPOSE: The bug-capture widget — floating trigger + multi-step report
14
+ * panel — that mounts into a customer's app via `Mushi.init()`.
15
+ *
16
+ * DESIGN: Visual styling lives in `./styles.ts` ("Mushi Mushi Editorial":
17
+ * paper + sumi ink + 朱 vermillion, serif display + monospace
18
+ * metadata, ledger-style step counter, hanko stamp animation on
19
+ * success). This file owns the DOM structure, state, and all
20
+ * user-facing ARIA / keyboard wiring.
21
+ */
22
+
11
23
  interface WidgetCallbacks {
12
24
  onSubmit(data: {
13
25
  category: MushiReportCategory;
@@ -32,8 +44,19 @@ declare class MushiWidget {
32
44
  private screenshotAttached;
33
45
  private elementSelected;
34
46
  private submitting;
47
+ /** Captured at the moment of submit so the success ledger metadata
48
+ * ("REPORT · 14:23:07 JST") doesn't drift while the success step
49
+ * is on screen. */
50
+ private submittedAt;
51
+ /** Pending success-state + auto-close timers. Tracked so destroy()
52
+ * can clear them — otherwise a host that unmounts mid-submit leaks
53
+ * this MushiWidget reference (and re-renders into a detached shadow
54
+ * root) for up to ~3.3s after destroy. */
55
+ private successTimer;
56
+ private autoCloseTimer;
35
57
  constructor(config: MushiWidgetConfig | undefined, callbacks: WidgetCallbacks);
36
58
  mount(): void;
59
+ updateConfig(config?: MushiWidgetConfig): void;
37
60
  open(options?: {
38
61
  category?: MushiReportCategory;
39
62
  }): void;
@@ -45,10 +68,34 @@ declare class MushiWidget {
45
68
  private getTheme;
46
69
  private render;
47
70
  private renderStep;
71
+ /**
72
+ * Editorial masthead. Always carries:
73
+ * • the brand mark (虫 kanji on vermillion, "MUSHI" in mono above)
74
+ * • the page title (serif display)
75
+ * • the close affordance
76
+ *
77
+ * On sub-steps it additionally renders a back button (replacing the
78
+ * "MUSHI" eyebrow with a "← BACK" mono link) and a step counter
79
+ * ledger ("02 / 03") on the far right.
80
+ */
48
81
  private renderHeader;
82
+ /**
83
+ * Numeral step indicator: "01 — 02 — 03", with the active step in
84
+ * vermillion serif and completed steps struck through in mono.
85
+ * Replaces the original three-dot indicator (a generic SaaS pattern).
86
+ */
87
+ private renderStepIndicator;
49
88
  private renderCategoryStep;
50
89
  private renderIntentStep;
51
90
  private renderDetailsStep;
91
+ /**
92
+ * Editorial success state: 朱印-style red stamp ring with the kanji
93
+ * 受 ("received") at its centre, the localised "thank you" string
94
+ * in serif below, and a mono ledger receipt ("REPORT · HH:MM:SS").
95
+ * The ring + label animations are defined in styles.ts so this stays
96
+ * pure markup and `prefers-reduced-motion` flips them to the final
97
+ * frame instantly.
98
+ */
52
99
  private renderSuccessStep;
53
100
  private attachHandlers;
54
101
  private trapFocus;
package/dist/index.d.ts CHANGED
@@ -8,6 +8,18 @@ declare class Mushi {
8
8
  static destroy(): void;
9
9
  }
10
10
 
11
+ /**
12
+ * FILE: packages/web/src/widget.ts
13
+ * PURPOSE: The bug-capture widget — floating trigger + multi-step report
14
+ * panel — that mounts into a customer's app via `Mushi.init()`.
15
+ *
16
+ * DESIGN: Visual styling lives in `./styles.ts` ("Mushi Mushi Editorial":
17
+ * paper + sumi ink + 朱 vermillion, serif display + monospace
18
+ * metadata, ledger-style step counter, hanko stamp animation on
19
+ * success). This file owns the DOM structure, state, and all
20
+ * user-facing ARIA / keyboard wiring.
21
+ */
22
+
11
23
  interface WidgetCallbacks {
12
24
  onSubmit(data: {
13
25
  category: MushiReportCategory;
@@ -32,8 +44,19 @@ declare class MushiWidget {
32
44
  private screenshotAttached;
33
45
  private elementSelected;
34
46
  private submitting;
47
+ /** Captured at the moment of submit so the success ledger metadata
48
+ * ("REPORT · 14:23:07 JST") doesn't drift while the success step
49
+ * is on screen. */
50
+ private submittedAt;
51
+ /** Pending success-state + auto-close timers. Tracked so destroy()
52
+ * can clear them — otherwise a host that unmounts mid-submit leaks
53
+ * this MushiWidget reference (and re-renders into a detached shadow
54
+ * root) for up to ~3.3s after destroy. */
55
+ private successTimer;
56
+ private autoCloseTimer;
35
57
  constructor(config: MushiWidgetConfig | undefined, callbacks: WidgetCallbacks);
36
58
  mount(): void;
59
+ updateConfig(config?: MushiWidgetConfig): void;
37
60
  open(options?: {
38
61
  category?: MushiReportCategory;
39
62
  }): void;
@@ -45,10 +68,34 @@ declare class MushiWidget {
45
68
  private getTheme;
46
69
  private render;
47
70
  private renderStep;
71
+ /**
72
+ * Editorial masthead. Always carries:
73
+ * • the brand mark (虫 kanji on vermillion, "MUSHI" in mono above)
74
+ * • the page title (serif display)
75
+ * • the close affordance
76
+ *
77
+ * On sub-steps it additionally renders a back button (replacing the
78
+ * "MUSHI" eyebrow with a "← BACK" mono link) and a step counter
79
+ * ledger ("02 / 03") on the far right.
80
+ */
48
81
  private renderHeader;
82
+ /**
83
+ * Numeral step indicator: "01 — 02 — 03", with the active step in
84
+ * vermillion serif and completed steps struck through in mono.
85
+ * Replaces the original three-dot indicator (a generic SaaS pattern).
86
+ */
87
+ private renderStepIndicator;
49
88
  private renderCategoryStep;
50
89
  private renderIntentStep;
51
90
  private renderDetailsStep;
91
+ /**
92
+ * Editorial success state: 朱印-style red stamp ring with the kanji
93
+ * 受 ("received") at its centre, the localised "thank you" string
94
+ * in serif below, and a mono ledger receipt ("REPORT · HH:MM:SS").
95
+ * The ring + label animations are defined in styles.ts so this stays
96
+ * pure markup and `prefers-reduced-motion` flips them to the final
97
+ * frame instantly.
98
+ */
52
99
  private renderSuccessStep;
53
100
  private attachHandlers;
54
101
  private trapFocus;