@useinsider/guido 3.18.0-beta.1eb210f → 3.18.0-beta.206bb3f

package/dist/src/stores/onboarding.d.ts

@@ -128,6 +128,27 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                     backButtonText?: string | undefined;
                 }[];
             };
+            editorTabBarOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
         };
         userModalState: {
             Guido?: {
@@ -137,6 +158,7 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                 versionHistoryOnboarding?: boolean | undefined;
                 ampOnboarding?: boolean | undefined;
                 itemsOnboarding?: boolean | undefined;
+                editorTabBarOnboarding?: boolean | undefined;
             } | undefined;
         };
         isFetched: boolean;
@@ -289,6 +311,27 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                     backButtonText?: string | undefined;
                 }[];
             };
+            editorTabBarOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
         };
         userModalState: {
             Guido?: {
@@ -298,6 +341,7 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                 versionHistoryOnboarding?: boolean | undefined;
                 ampOnboarding?: boolean | undefined;
                 itemsOnboarding?: boolean | undefined;
+                editorTabBarOnboarding?: boolean | undefined;
             } | undefined;
         };
         isFetched: boolean;
@@ -430,6 +474,27 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                     backButtonText?: string | undefined;
                 }[];
             };
+            editorTabBarOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
         };
         userModalState: {
             Guido?: {
@@ -439,6 +504,7 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                 versionHistoryOnboarding?: boolean | undefined;
                 ampOnboarding?: boolean | undefined;
                 itemsOnboarding?: boolean | undefined;
+                editorTabBarOnboarding?: boolean | undefined;
             } | undefined;
         };
         isFetched: boolean;
@@ -587,6 +653,27 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                     backButtonText?: string | undefined;
                 }[];
             };
+            editorTabBarOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
         };
         userModalState: {
             Guido?: {
@@ -596,6 +683,7 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                 versionHistoryOnboarding?: boolean | undefined;
                 ampOnboarding?: boolean | undefined;
                 itemsOnboarding?: boolean | undefined;
+                editorTabBarOnboarding?: boolean | undefined;
             } | undefined;
         };
         isFetched: boolean;
@@ -744,6 +832,27 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                     backButtonText?: string | undefined;
                 }[];
             };
+            editorTabBarOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
         };
         userModalState: {
             Guido?: {
@@ -753,6 +862,7 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                 versionHistoryOnboarding?: boolean | undefined;
                 ampOnboarding?: boolean | undefined;
                 itemsOnboarding?: boolean | undefined;
+                editorTabBarOnboarding?: boolean | undefined;
             } | undefined;
         };
         isFetched: boolean;
@@ -901,6 +1011,27 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                     backButtonText?: string | undefined;
                 }[];
             };
+            editorTabBarOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
         };
         userModalState: {
             Guido?: {
@@ -910,6 +1041,7 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                 versionHistoryOnboarding?: boolean | undefined;
                 ampOnboarding?: boolean | undefined;
                 itemsOnboarding?: boolean | undefined;
+                editorTabBarOnboarding?: boolean | undefined;
             } | undefined;
         };
         isFetched: boolean;
@@ -1058,6 +1190,27 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                     backButtonText?: string | undefined;
                 }[];
             };
+            editorTabBarOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
         };
         userModalState: {
             Guido?: {
@@ -1067,6 +1220,7 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                 versionHistoryOnboarding?: boolean | undefined;
                 ampOnboarding?: boolean | undefined;
                 itemsOnboarding?: boolean | undefined;
+                editorTabBarOnboarding?: boolean | undefined;
             } | undefined;
         };
         isFetched: boolean;
@@ -1215,6 +1369,206 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                     backButtonText?: string | undefined;
                 }[];
             };
+            editorTabBarOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
+        };
+        userModalState: {
+            Guido?: {
+                newVersionPopup?: boolean | undefined;
+                genericOnboarding?: boolean | undefined;
+                textBlockOnboarding?: boolean | undefined;
+                versionHistoryOnboarding?: boolean | undefined;
+                ampOnboarding?: boolean | undefined;
+                itemsOnboarding?: boolean | undefined;
+                editorTabBarOnboarding?: boolean | undefined;
+            } | undefined;
+        };
+        isFetched: boolean;
+    } & import("pinia").PiniaCustomStateProperties<OnboardingStoreState>) => {
+        classes: string;
+        position: string;
+        left?: string | undefined;
+        right?: string | undefined;
+        top?: string | undefined;
+        bottom?: string | undefined;
+        title: string;
+        description: string;
+        imageSource: string;
+        backButtonClick: () => void;
+        nextButtonType: string;
+        nextButtonText: string;
+        nextButtonClick: () => void;
+        backButtonType?: string | undefined;
+        backButtonText?: string | undefined;
+    };
+    getEditorTabBarCurrentCard: (state: {
+        onboardings: {
+            newVersionPopup: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
+            genericOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
+            textBlockOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
+            versionHistoryOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
+            ampOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
+            itemsOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
+            editorTabBarOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
         };
         userModalState: {
             Guido?: {
@@ -1224,6 +1578,7 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                 versionHistoryOnboarding?: boolean | undefined;
                 ampOnboarding?: boolean | undefined;
                 itemsOnboarding?: boolean | undefined;
+                editorTabBarOnboarding?: boolean | undefined;
             } | undefined;
         };
         isFetched: boolean;
@@ -1372,6 +1727,27 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                     backButtonText?: string | undefined;
                 }[];
             };
+            editorTabBarOnboarding: {
+                cardIndex: number;
+                isActive: boolean;
+                config: {
+                    classes: string;
+                    position: string;
+                    left?: string | undefined;
+                    right?: string | undefined;
+                    top?: string | undefined;
+                    bottom?: string | undefined;
+                    title: string;
+                    description: string;
+                    imageSource: string;
+                    backButtonClick: () => void;
+                    nextButtonType: string;
+                    nextButtonText: string;
+                    nextButtonClick: () => void;
+                    backButtonType?: string | undefined;
+                    backButtonText?: string | undefined;
+                }[];
+            };
         };
         userModalState: {
             Guido?: {
@@ -1381,6 +1757,7 @@ export declare const useOnboardingStore: import("pinia").StoreDefinition<"guidoO
                 versionHistoryOnboarding?: boolean | undefined;
                 ampOnboarding?: boolean | undefined;
                 itemsOnboarding?: boolean | undefined;
+                editorTabBarOnboarding?: boolean | undefined;
             } | undefined;
         };
         isFetched: boolean;

package/dist/src/stores/version-history.d.ts

@@ -1,4 +1,4 @@
-import type { VersionHistoryState } from '@@/Types/version-history-api';
+import type { VersionHistoryState } from '@@/Types/api/version-history-api';
 export interface StoreState extends VersionHistoryState {
     editorVisualMode: 'desktop' | 'mobile';
 }

package/dist/src/utils/timeUtil.d.ts

@@ -6,3 +6,13 @@
  * @example formatLocalTime(date, true)        -> 12:20:02 (UTC+3 Istanbul)
  */
 export declare const formatLocalTime: (date: Date, useTimezone?: boolean) => string;
+/**
+ * Auto-save timestamp parts for the header status label. The component picks the
+ * copy: same day -> "Autosaved at {time}, Today"; earlier -> "Autosaved at {date}".
+ * @example autoSaveTimestamp(date) -> { isToday: true, time: '20:01', date: '16.07.2026' }
+ */
+export declare const autoSaveTimestamp: (date: Date, now?: Date) => {
+    isToday: boolean;
+    time: string;
+    date: string;
+};

package/dist/static/styles/components/accessibility.css.js

@@ -0,0 +1,140 @@
+const n = `/* Stripo Accessibility Checker panel (ue-accessibility-panel).
+   Stripo's defaults derive icon/button/outline colors from --ue-primary-color,
+   whose stock hue is green (129) — Figma DT-33912 wants Insider blue. */
+
+/* Failed / Passed / Ignored count chips. Stripo paints them as filled
+   red/green/blue pills via .accent.error / .accent.success. */
+ue-accessibility-panel .tabs-header .accent {
+    min-width: 21px;
+    margin-left: 8px;
+    padding: 3px 5px;
+    border: 1px solid var(--guido-color-gray-300);
+    border-radius: 4px;
+    background-color: var(--guido-color-white);
+    color: var(--guido-color-gray-800);
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 16px;
+}
+
+ue-accessibility-panel .tabs-header button.checked .accent {
+    border-color: var(--guido-color-primary-500);
+    color: var(--guido-color-primary-500);
+}
+
+/* Issue card */
+ue-accessibility-panel .issue-card-surface {
+    border-radius: 8px;
+    outline: 1px solid var(--guido-color-gray-300);
+    outline-offset: -1px;
+}
+
+ue-accessibility-panel .issue-card-surface--active {
+    outline-color: var(--guido-color-primary-500);
+}
+
+ue-accessibility-panel .issue-card-title {
+    color: var(--guido-color-gray-800);
+}
+
+/* Per-issue help "?" icon: 14x14 glyph centered in a 24x24 hit area. Stripo
+   renders the ue-icon svg at width/height 100%, so it fills the whole box —
+   pin the svg to 14px and center it. */
+ue-accessibility-panel .issue-card-header-row .icon-help {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    color: var(--guido-color-gray-600);
+}
+
+ue-accessibility-panel .issue-card-header-row .icon-help svg {
+    width: 14px;
+    height: 14px;
+}
+
+/* Severity icons: Critical (cross-circle), Serious (warning), Moderate (info) */
+ue-accessibility-panel .issue-card-header-row ue-icon-component.danger {
+    color: var(--guido-color-danger-500);
+}
+
+ue-accessibility-panel .issue-card-header-row ue-icon-component.warning {
+    color: var(--guido-color-warning-500);
+}
+
+ue-accessibility-panel .issue-card-header-row ue-icon-component.info {
+    color: var(--guido-color-primary-500);
+}
+
+/* Card actions: Ignore / Un-ignore / Auto-tune are neutral, Apply is primary */
+ue-accessibility-panel .e2e-ignore-button > .button,
+ue-accessibility-panel .e2e-unignore-button > .button,
+ue-accessibility-panel .e2e-auto-tune-button > .button {
+    border: none;
+    background-color: var(--guido-color-neutral-200);
+    color: var(--guido-color-neutral-800);
+}
+
+ue-accessibility-panel .e2e-ignore-button > .button .icon-button,
+ue-accessibility-panel .e2e-unignore-button > .button .icon-button,
+ue-accessibility-panel .e2e-auto-tune-button > .button .icon-button {
+    color: var(--guido-color-neutral-800);
+}
+
+ue-accessibility-panel .e2e-ignore-button > .button:hover:not(:disabled,.disabled),
+ue-accessibility-panel .e2e-unignore-button > .button:hover:not(:disabled,.disabled),
+ue-accessibility-panel .e2e-auto-tune-button > .button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-neutral-100);
+}
+
+ue-accessibility-panel .e2e-apply-button > .button {
+    border: none;
+    background-color: var(--guido-color-primary-100);
+    color: var(--guido-color-primary-500);
+}
+
+ue-accessibility-panel .e2e-apply-button > .button .icon-button {
+    color: var(--guido-color-primary-500);
+}
+
+ue-accessibility-panel .e2e-apply-button > .button:hover:not(:disabled,.disabled) {
+    background-color: var(--guido-color-primary-0);
+}
+
+/* Re-run check button (header control). Stripo tints the rotate icon with
+   --ue-primary-color; Figma DT-33912 wants Insider primary. Not inside
+   ue-accessibility-panel, so scoped by its own e2e class. */
+.e2e-accessibility-refresh .icon-button {
+    color: var(--guido-color-primary-500);
+}
+
+/* Help-icon hint. The popover is portalled outside the panel, so it cannot be
+   scoped to ue-accessibility-panel. Stripo tints the link with --ue-primary-color. */
+.ue-popover.dark,
+.ue-popover.dark-tiny {
+    border-radius: 4px;
+    background: var(--guido-color-gray-800);
+    box-shadow: 0 15px 17.5px rgb(0 0 0 / 10%), 0 8px 5px rgb(0 0 0 / 10%);
+    color: var(--guido-color-white);
+    font-size: 13px;
+    line-height: 16px;
+}
+
+.ue-popover.dark .popup-pointer ue-icon-component svg,
+.ue-popover.dark-tiny .popup-pointer ue-icon-component svg {
+    fill: var(--guido-color-gray-800);
+}
+
+/* Any anchor in the hint, not just the ue-description wrapper: the accessibility
+   checker's "Read more … ACT Rules Community Group forum." link renders outside it
+   and would otherwise keep Stripo's primary tint, unreadable on the dark surface. */
+.ue-popover.dark a,
+.ue-popover.dark-tiny a {
+    color: var(--guido-color-white);
+    text-decoration: underline;
+}
+`;
+export {
+  n as default
+};

package/dist/static/styles/variables.css.js

@@ -16,6 +16,7 @@ const o = `:host {
     --guido-color-neutral-700: #2C3546;
     --guido-color-neutral-200: #DCDFE6;
     --guido-color-neutral-100: #EFF2F4;
+    --guido-color-warning-500: #FFBF00;
     --guido-color-danger-300: #e84342;
     --guido-color-danger-500: #DC2A2A; 
     --guido-box-shadow: 0 4px 12px 0 rgba(44,53,70,0.15);

package/dist/stores/editor.js

@@ -6,6 +6,9 @@ const o = e("guidoEditor", {
     isSaveAsTemplateDrawerOpen: !1,
     isVersionHistoryOpen: !1,
     isPreviewModeOpen: !1,
+    isAccessibilityTestingOpen: !1,
+    imagesHidden: !1,
+    colorVisionDeficiency: "",
     editorVisualMode: "desktop",
     hasChanges: !1,
     isStripoInitialized: !1,
@@ -17,7 +20,7 @@ const o = e("guidoEditor", {
   }),
   getters: {
     // Middle Slot
-    isEditorToolbarVisible: (i) => !i.isVersionHistoryOpen && !i.isPreviewModeOpen,
+    isEditorToolbarVisible: (i) => !i.isVersionHistoryOpen && !i.isPreviewModeOpen && !i.isAccessibilityTestingOpen,
     isUndoButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     isRedoButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     isCodeEditorButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,