@mushi-mushi/web 0.4.1 → 0.5.0

package/dist/index.d.cts

@@ -8,6 +8,18 @@ declare class Mushi {
     static destroy(): void;
 }
 
+/**
+ * FILE: packages/web/src/widget.ts
+ * PURPOSE: The bug-capture widget — floating trigger + multi-step report
+ *          panel — that mounts into a customer's app via `Mushi.init()`.
+ *
+ * DESIGN: Visual styling lives in `./styles.ts` ("Mushi Mushi Editorial":
+ *         paper + sumi ink + 朱 vermillion, serif display + monospace
+ *         metadata, ledger-style step counter, hanko stamp animation on
+ *         success). This file owns the DOM structure, state, and all
+ *         user-facing ARIA / keyboard wiring.
+ */
+
 interface WidgetCallbacks {
     onSubmit(data: {
         category: MushiReportCategory;
@@ -32,6 +44,16 @@ declare class MushiWidget {
     private screenshotAttached;
     private elementSelected;
     private submitting;
+    /** Captured at the moment of submit so the success ledger metadata
+     *  ("REPORT · 14:23:07 JST") doesn't drift while the success step
+     *  is on screen. */
+    private submittedAt;
+    /** Pending success-state + auto-close timers. Tracked so destroy()
+     *  can clear them — otherwise a host that unmounts mid-submit leaks
+     *  this MushiWidget reference (and re-renders into a detached shadow
+     *  root) for up to ~3.3s after destroy. */
+    private successTimer;
+    private autoCloseTimer;
     constructor(config: MushiWidgetConfig | undefined, callbacks: WidgetCallbacks);
     mount(): void;
     open(options?: {
@@ -45,10 +67,34 @@ declare class MushiWidget {
     private getTheme;
     private render;
     private renderStep;
+    /**
+     * Editorial masthead. Always carries:
+     *   • the brand mark (虫 kanji on vermillion, "MUSHI" in mono above)
+     *   • the page title (serif display)
+     *   • the close affordance
+     *
+     * On sub-steps it additionally renders a back button (replacing the
+     * "MUSHI" eyebrow with a "← BACK" mono link) and a step counter
+     * ledger ("02 / 03") on the far right.
+     */
     private renderHeader;
+    /**
+     * Numeral step indicator: "01 — 02 — 03", with the active step in
+     * vermillion serif and completed steps struck through in mono.
+     * Replaces the original three-dot indicator (a generic SaaS pattern).
+     */
+    private renderStepIndicator;
     private renderCategoryStep;
     private renderIntentStep;
     private renderDetailsStep;
+    /**
+     * Editorial success state: 朱印-style red stamp ring with the kanji
+     * 受 ("received") at its centre, the localised "thank you" string
+     * in serif below, and a mono ledger receipt ("REPORT · HH:MM:SS").
+     * The ring + label animations are defined in styles.ts so this stays
+     * pure markup and `prefers-reduced-motion` flips them to the final
+     * frame instantly.
+     */
     private renderSuccessStep;
     private attachHandlers;
     private trapFocus;

package/dist/index.d.ts

@@ -8,6 +8,18 @@ declare class Mushi {
     static destroy(): void;
 }
 
+/**
+ * FILE: packages/web/src/widget.ts
+ * PURPOSE: The bug-capture widget — floating trigger + multi-step report
+ *          panel — that mounts into a customer's app via `Mushi.init()`.
+ *
+ * DESIGN: Visual styling lives in `./styles.ts` ("Mushi Mushi Editorial":
+ *         paper + sumi ink + 朱 vermillion, serif display + monospace
+ *         metadata, ledger-style step counter, hanko stamp animation on
+ *         success). This file owns the DOM structure, state, and all
+ *         user-facing ARIA / keyboard wiring.
+ */
+
 interface WidgetCallbacks {
     onSubmit(data: {
         category: MushiReportCategory;
@@ -32,6 +44,16 @@ declare class MushiWidget {
     private screenshotAttached;
     private elementSelected;
     private submitting;
+    /** Captured at the moment of submit so the success ledger metadata
+     *  ("REPORT · 14:23:07 JST") doesn't drift while the success step
+     *  is on screen. */
+    private submittedAt;
+    /** Pending success-state + auto-close timers. Tracked so destroy()
+     *  can clear them — otherwise a host that unmounts mid-submit leaks
+     *  this MushiWidget reference (and re-renders into a detached shadow
+     *  root) for up to ~3.3s after destroy. */
+    private successTimer;
+    private autoCloseTimer;
     constructor(config: MushiWidgetConfig | undefined, callbacks: WidgetCallbacks);
     mount(): void;
     open(options?: {
@@ -45,10 +67,34 @@ declare class MushiWidget {
     private getTheme;
     private render;
     private renderStep;
+    /**
+     * Editorial masthead. Always carries:
+     *   • the brand mark (虫 kanji on vermillion, "MUSHI" in mono above)
+     *   • the page title (serif display)
+     *   • the close affordance
+     *
+     * On sub-steps it additionally renders a back button (replacing the
+     * "MUSHI" eyebrow with a "← BACK" mono link) and a step counter
+     * ledger ("02 / 03") on the far right.
+     */
     private renderHeader;
+    /**
+     * Numeral step indicator: "01 — 02 — 03", with the active step in
+     * vermillion serif and completed steps struck through in mono.
+     * Replaces the original three-dot indicator (a generic SaaS pattern).
+     */
+    private renderStepIndicator;
     private renderCategoryStep;
     private renderIntentStep;
     private renderDetailsStep;
+    /**
+     * Editorial success state: 朱印-style red stamp ring with the kanji
+     * 受 ("received") at its centre, the localised "thank you" string
+     * in serif below, and a mono ledger receipt ("REPORT · HH:MM:SS").
+     * The ring + label animations are defined in styles.ts so this stays
+     * pure markup and `prefers-reduced-motion` flips them to the final
+     * frame instantly.
+     */
     private renderSuccessStep;
     private attachHandlers;
     private trapFocus;