@mushi-mushi/web 0.4.0 → 0.5.0

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 +625 -217
  5. package/dist/index.cjs.map +1 -1
  6. package/dist/index.d.cts +46 -0
  7. package/dist/index.d.ts +46 -0
  8. package/dist/index.js +625 -217
  9. package/dist/index.js.map +1 -1
  10. package/package.json +10 -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,6 +44,16 @@ 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;
37
59
  open(options?: {
@@ -45,10 +67,34 @@ declare class MushiWidget {
45
67
  private getTheme;
46
68
  private render;
47
69
  private renderStep;
70
+ /**
71
+ * Editorial masthead. Always carries:
72
+ * • the brand mark (虫 kanji on vermillion, "MUSHI" in mono above)
73
+ * • the page title (serif display)
74
+ * • the close affordance
75
+ *
76
+ * On sub-steps it additionally renders a back button (replacing the
77
+ * "MUSHI" eyebrow with a "← BACK" mono link) and a step counter
78
+ * ledger ("02 / 03") on the far right.
79
+ */
48
80
  private renderHeader;
81
+ /**
82
+ * Numeral step indicator: "01 — 02 — 03", with the active step in
83
+ * vermillion serif and completed steps struck through in mono.
84
+ * Replaces the original three-dot indicator (a generic SaaS pattern).
85
+ */
86
+ private renderStepIndicator;
49
87
  private renderCategoryStep;
50
88
  private renderIntentStep;
51
89
  private renderDetailsStep;
90
+ /**
91
+ * Editorial success state: 朱印-style red stamp ring with the kanji
92
+ * 受 ("received") at its centre, the localised "thank you" string
93
+ * in serif below, and a mono ledger receipt ("REPORT · HH:MM:SS").
94
+ * The ring + label animations are defined in styles.ts so this stays
95
+ * pure markup and `prefers-reduced-motion` flips them to the final
96
+ * frame instantly.
97
+ */
52
98
  private renderSuccessStep;
53
99
  private attachHandlers;
54
100
  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,6 +44,16 @@ 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;
37
59
  open(options?: {
@@ -45,10 +67,34 @@ declare class MushiWidget {
45
67
  private getTheme;
46
68
  private render;
47
69
  private renderStep;
70
+ /**
71
+ * Editorial masthead. Always carries:
72
+ * • the brand mark (虫 kanji on vermillion, "MUSHI" in mono above)
73
+ * • the page title (serif display)
74
+ * • the close affordance
75
+ *
76
+ * On sub-steps it additionally renders a back button (replacing the
77
+ * "MUSHI" eyebrow with a "← BACK" mono link) and a step counter
78
+ * ledger ("02 / 03") on the far right.
79
+ */
48
80
  private renderHeader;
81
+ /**
82
+ * Numeral step indicator: "01 — 02 — 03", with the active step in
83
+ * vermillion serif and completed steps struck through in mono.
84
+ * Replaces the original three-dot indicator (a generic SaaS pattern).
85
+ */
86
+ private renderStepIndicator;
49
87
  private renderCategoryStep;
50
88
  private renderIntentStep;
51
89
  private renderDetailsStep;
90
+ /**
91
+ * Editorial success state: 朱印-style red stamp ring with the kanji
92
+ * 受 ("received") at its centre, the localised "thank you" string
93
+ * in serif below, and a mono ledger receipt ("REPORT · HH:MM:SS").
94
+ * The ring + label animations are defined in styles.ts so this stays
95
+ * pure markup and `prefers-reduced-motion` flips them to the final
96
+ * frame instantly.
97
+ */
52
98
  private renderSuccessStep;
53
99
  private attachHandlers;
54
100
  private trapFocus;