@useinsider/guido 3.18.2-beta.8ef3138 → 3.18.2-beta.9be830c

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/liquidDynamicContent.d.ts

@@ -0,0 +1,20 @@
+import type { BaseDynamicContent } from '@@/Types/generic';
+export type DynamicContentFormat = NonNullable<BaseDynamicContent['format']>;
+/** Format key the dynamic-content picker sends for a custom date/time format. */
+export declare const TIME_FORMAT_KEY = "time-format";
+/** Wraps a Liquid filter argument in whichever quote style the value itself does not use. */
+export declare const quoteArgument: (value: string) => string | null;
+/**
+ * `{ key: 'time-format', value: '%Y-%m-%d' }` -> `date: "%Y-%m-%d"`.
+ *
+ * Only a custom date/time strftime pattern has a Liquid equivalent. Anything else returns null so
+ * the caller emits a plain tag rather than one that silently lost — or literally printed — its
+ * format.
+ * @example formatToLiquidFilter({ key: 'time-format', value: '%b %-d, %Y' }) -> date: "%b %-d, %Y"
+ */
+export declare const formatToLiquidFilter: (format: DynamicContentFormat) => string | null;
+/**
+ * Inverse of `formatToLiquidFilter` — reads the picker format back out of one filter segment, so a
+ * reopened tag restores its selection in the host's format dropdown.
+ */
+export declare const liquidFilterToFormat: (segment: string) => DynamicContentFormat | null;

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,282 @@
+const e = `/* 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. */
+
+/* Stripo sizes the panel to its content (max-height: 100%), so short tabs (Ignored, empty
+   states) end mid-page; the design keeps it full height in every state. */
+ue-ui-simple-panel.accessibility-panel,
+ue-accessibility-panel {
+    height: 100%;
+}
+
+/* The refresh button only renders once results land; reserve its 50x50 slot so the
+   header keeps the same height and title width while the check is loading. */
+ue-accessibility-panel .header-control-panel-right {
+    min-width: 50px;
+    min-height: 50px;
+}
+
+/* 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);
+}
+
+/* Passed tab is read-only. Stripo already blocks pointer events on these controls but only
+   styles the alt-text input as disabled; give the selects and color inputs the same look. */
+ue-accessibility-passed-tab input,
+ue-accessibility-passed-tab ue-select .toggle-select-button {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+/* Contrast card rows (Figma 4522:11243): a 10px section inset holding 50px rows with 16px
+   side padding, so labels and swatches sit 26px in while the action buttons stay at 10px. */
+ue-accessibility-panel .controls-separator-line:has(.fit-to-color) {
+    padding: 10px;
+}
+
+/* Passed cards pin a 24px instance-count badge 8px off the bottom-right corner, where the
+   right-aligned ratio now ends; keep the last row clear of it. */
+ue-accessibility-passed-tab .controls-separator-line:has(.fit-to-color) {
+    padding-bottom: 34px;
+}
+
+ue-accessibility-panel .controls-separator-line:has(.fit-to-color) .sub-container.two-columns {
+    box-sizing: border-box;
+    min-height: 50px;
+    padding: 5px 16px;
+    align-items: center;
+}
+
+/* Ratio value: Stripo left-aligns it in a swatch-wide box; the design ends it at the
+   swatches' right edge, behind a 16px glyph in a 24px icon box. */
+ue-accessibility-panel .controls-list.fit-to-color {
+    justify-content: flex-end;
+    align-items: center;
+    gap: 0;
+    font-size: 13px;
+    line-height: 16px;
+}
+
+ue-accessibility-panel .controls-list.fit-to-color ue-icon-component {
+    align-items: center;
+    justify-content: center;
+    width: 24px;
+    height: 24px;
+    margin: 0;
+}
+
+ue-accessibility-panel .controls-list.fit-to-color ue-icon-component svg {
+    width: 16px;
+    height: 16px;
+}
+
+ue-accessibility-panel .controls-list.fit-to-color ue-icon-component.warning {
+    color: var(--guido-color-warning-500);
+}
+
+/* Empty states (Figma 5122:17577, DS InNoData): the DS "no-personalization" art above a
+   title and description, centered in the tab. Failed/Ignored text comes from localePatch as
+   "Title\\nDescription" and ::first-line styles the title; Passed renders nothing when empty,
+   so it gets the same box from generated content. */
+ue-accessibility-panel {
+    --ue-accessibility-image-width: 240px;
+    --ue-accessibility-image-height: 240px;
+}
+
+/* The scroll area only grows to its content (max-height: 100%); stretch it to the panel
+   bottom so the empty state can center in the space below the tabs. */
+ue-accessibility-panel ue-scrollable-container:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) {
+    flex-grow: 1;
+}
+
+ue-accessibility-panel ue-scrollable-container:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) .ue-scrollable {
+    height: 100%;
+}
+
+ue-accessibility-panel .ue-scrollable-content:has(.accessibility-list-empty, ue-accessibility-passed-tab:empty) {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    min-height: 100%;
+}
+
+ue-accessibility-panel .accessibility-list-empty.light-theme.failed-list,
+ue-accessibility-panel .accessibility-list-empty.light-theme.ignored-list,
+ue-accessibility-passed-tab:empty::before {
+    display: block;
+    height: auto;
+    margin: 0;
+    padding: 248px 16px 0;
+    background: url("https://image.useinsider.com/insider-design-system/img/speacial/no-personalization.svg") no-repeat center top / 240px 240px;
+    color: var(--guido-color-neutral-500);
+    font-size: 15px;
+    line-height: 24px;
+    text-align: center;
+    white-space: pre-line;
+}
+
+/* Stripo renders nothing at all for an empty Passed tab, so this copy cannot come from the
+   localePatch like its Failed/Ignored siblings in src/config/i18n/en/labels.json — keep the
+   three wordings in step by hand. \`display: block\` makes the host a block container so
+   ::first-line below can reach the title inside the generated content. */
+ue-accessibility-passed-tab:empty {
+    display: block;
+}
+
+ue-accessibility-passed-tab:empty::before {
+    content: "No Passed Items\\A You have no passed items.";
+}
+
+/* Title is 18/24 with InNoData's 8px gap below it; a 40px line box gives both, and its
+   extra 8px on top is why the padding above is 248px, not 240 + 16. */
+ue-accessibility-panel .accessibility-list-empty::first-line,
+ue-accessibility-passed-tab:empty::first-line {
+    color: var(--guido-color-neutral-700);
+    font-size: 18px;
+    line-height: 40px;
+}
+
+/* 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.
+   The ue-description forms match Stripo's own \`.ue-popover.dark-tiny ue-description a\`
+   specificity; this file is appended last, so the tie goes to Figma's white link. */
+.ue-popover.dark a,
+.ue-popover.dark-tiny a,
+.ue-popover.dark ue-description a,
+.ue-popover.dark-tiny ue-description a {
+    color: var(--guido-color-white);
+    text-decoration: underline;
+}
+
+/* Stripo ships \`ue-description a { display: none }\`, which hides the per-rule "Read more"
+   link even though it already carries the right ACT/Deque URL. Re-show only those links,
+   keyed by host, so no other editor hint starts showing links Stripo meant to hide. */
+.ue-popover ue-description a[href^="https://act-rules.github.io/"],
+.ue-popover ue-description a[href^="https://dequeuniversity.com/"] {
+    display: inline;
+}
+`;
+export {
+  e as default
+};

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

@@ -14,8 +14,10 @@ const o = `:host {
     --guido-color-gray-0: #F9F9F9;
     --guido-color-neutral-800: #222938;
     --guido-color-neutral-700: #2C3546;
+    --guido-color-neutral-500: #5D6980;
     --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,20 +20,26 @@ 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,
     isPreviewButtonDisabled: (i) => i.loadingStatus,
     isViewOptionsDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     // Right Slot
+    // Normal editing: neither the version-history nor the accessibility-testing
+    // takeover, both of which swap the right slot — kebab included — for their own
+    // controls, so anything anchored to it has nothing to point at.
+    isNormalMode: (i) => !i.isVersionHistoryOpen && !i.isAccessibilityTestingOpen,
     isVersionHistoryButtonDisabled: (i) => i.loadingStatus || i.isPreviewModeOpen,
     isExportButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
     isSaveAsButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
     isTestButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen,
-    isSaveButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen || i.isPreviewModeOpen,
-    // Autosave
-    isInSaveableState: (i) => !i.loadingStatus && !i.isVersionHistoryOpen && !i.isPreviewModeOpen && !i.isCodeEditorOpen
+    isSaveButtonDisabled: (i) => i.loadingStatus || i.isVersionHistoryOpen || i.isPreviewModeOpen || i.isAccessibilityTestingOpen,
+    // Autosave. Accessibility testing belongs with the other takeovers: the mode drives
+    // Stripo through simulations (hidden images, color-vision filters) that a save
+    // landing mid-simulation would capture.
+    isInSaveableState: (i) => !i.loadingStatus && !i.isVersionHistoryOpen && !i.isPreviewModeOpen && !i.isCodeEditorOpen && !i.isAccessibilityTestingOpen
   }
 });
 export {

package/dist/stores/onboarding.js

@@ -1,21 +1,27 @@
-import { useOnboardingApi as s } from "../services/onboardingApi.js";
+import { useOnboardingApi as t } from "../services/onboardingApi.js";
 import { defineStore as e } from "pinia";
-const t = () => ({
+const r = () => ({
   cardIndex: 0,
   isActive: !1,
   config: []
 }), a = () => ({
   onboardings: {
-    newVersionPopup: t(),
-    genericOnboarding: t(),
-    textBlockOnboarding: t(),
-    versionHistoryOnboarding: t(),
-    ampOnboarding: t(),
-    itemsOnboarding: t()
+    newVersionPopup: r(),
+    genericOnboarding: r(),
+    textBlockOnboarding: r(),
+    versionHistoryOnboarding: r(),
+    ampOnboarding: r(),
+    itemsOnboarding: r(),
+    editorTabBarOnboarding: r()
   },
   userModalState: {},
-  isFetched: !1
-}), c = e("guidoOnboarding", {
+  isFetched: !1,
+  // Onboardings the user closed in this page session. The saved state cannot stand in
+  // for it: close() fills it even when the save fails, and a test stub can keep
+  // reporting "unseen". Being wiped by another onboarding is deliberately not in here,
+  // so an interrupted tour can come back once that other one is done.
+  closedThisSession: []
+}), g = e("guidoOnboarding", {
   state: () => a(),
   getters: {
     getOnboarding: (n) => (i) => n.onboardings[i],
@@ -44,6 +50,16 @@ const t = () => ({
       const { itemsOnboarding: i } = n.onboardings;
       return i.config[i.cardIndex];
     },
+    getEditorTabBarCurrentCard: (n) => {
+      const { editorTabBarOnboarding: i } = n.onboardings;
+      return i.config[i.cardIndex];
+    },
+    // Every tab-bar tour card after the first points at a row inside the kebab menu,
+    // so the menu has to stay open under them.
+    isEditorActionsMenuPinned: (n) => {
+      const { editorTabBarOnboarding: i } = n.onboardings;
+      return i.isActive && i.cardIndex > 0;
+    },
     shouldShowOnboarding: (n) => (i) => {
       const o = n.userModalState.Guido;
       return i === "newVersionPopup" && (o != null && o.genericOnboarding) ? !1 : o ? !o[i] : !0;
@@ -63,7 +79,12 @@ const t = () => ({
       this.shouldShowOnboarding(n) && !this.isActive(n) && this.start(n);
     },
     async close(n) {
-      await this.setUserModalState(n, "true", "Guido"), this.onboardings[n].isActive = !1, this.onboardings[n].cardIndex = 0, this.onboardings[n].config = [];
+      this.closedThisSession.includes(n) || this.closedThisSession.push(n), this.onboardings[n].isActive = !1, this.onboardings[n].cardIndex = 0, this.onboardings[n].config = [];
+      try {
+        await this.setUserModalState(n, "true", "Guido");
+      } catch (i) {
+        console.warn("guido:onboarding:close-not-persisted", n, i);
+      }
     },
     next(n) {
       this.onboardings[n].cardIndex < this.onboardings[n].config.length - 1 && this.onboardings[n].cardIndex++;
@@ -72,14 +93,14 @@ const t = () => ({
       this.onboardings[n].cardIndex > 0 && this.onboardings[n].cardIndex--;
     },
     updateCardPosition(n, i, o) {
-      const r = this.onboardings[n].config[i];
-      r && (r.top = o.top, r.position = o.position);
+      const s = this.onboardings[n].config[i];
+      s && (s.top = o.top, s.position = o.position);
     },
     setConfig(n, i) {
       this.onboardings[n].config = i ?? [], this.onboardings[n].cardIndex >= this.onboardings[n].config.length && (this.onboardings[n].cardIndex = 0);
     },
     async onDiscoverNowClicked() {
-      await this.setUserModalState("newVersionPopup", "true", "Guido"), await this.setUserModalState("genericOnboarding", "true", "Guido"), this.start("genericOnboarding");
+      this.start("genericOnboarding"), await this.setUserModalState("newVersionPopup", "true", "Guido"), await this.setUserModalState("genericOnboarding", "true", "Guido");
     },
     onRemindMeLater() {
       sessionStorage.setItem("newVersionPopupDismissed", "true");
@@ -93,7 +114,7 @@ const t = () => ({
     async fetchUserModalState() {
       if (this.isFetched)
         return;
-      const { fetchUserModalState: n } = s();
+      const { fetchUserModalState: n } = t();
       try {
         const i = await n();
         this.userModalState = i, this.isFetched = !0;
@@ -101,11 +122,11 @@ const t = () => ({
       }
     },
     async setUserModalState(n, i, o) {
-      const { setUserModalState: r } = s();
-      await r(n, i, o), this.isFetched = !1, await this.fetchUserModalState();
+      const { setUserModalState: s } = t();
+      await s(n, i, o), this.isFetched = !1, await this.fetchUserModalState();
     }
   }
 });
 export {
-  c as useOnboardingStore
+  g as useOnboardingStore
 };

package/dist/utils/genericUtil.js

@@ -1,75 +1,78 @@
-const o = (a) => {
-  const t = a.value.match(/\{\{([^}]+)\}\}/)[1].split("|").map((e) => e.trim()), [s] = t, r = {
-    text: a.label,
-    value: s || ""
+import { formatToLiquidFilter as b, quoteArgument as y, liquidFilterToFormat as h } from "./liquidDynamicContent.js";
+const g = (t) => {
+  if (!t.includes("="))
+    return null;
+  const [r, e] = t.split("=");
+  return { key: r.trim(), value: e.trim() };
+}, c = "default:", f = (t) => {
+  if (!t.startsWith(c))
+    return t;
+  const r = t.slice(c.length).trim(), e = (l) => r.length >= 2 && r.startsWith(l) && r.endsWith(l);
+  return e('"') || e("'") ? r.slice(1, -1) : r;
+}, k = (t) => {
+  const e = t.value.match(/\{\{([^}]+)\}\}/)[1].split("|").map((a) => a.trim()), [l] = e, s = {
+    text: t.label,
+    value: l || ""
   };
-  if (t.length >= 2) {
-    const [, e, l] = t;
-    if (e.startsWith("default:")) {
-      let n = e.slice(8).trim();
-      n.startsWith('"') && n.endsWith('"') && (n = n.slice(1, -1)), r.fallback = n;
-    } else {
-      const n = e.includes("=") ? { key: e.split("=")[0].trim(), value: e.split("=")[1].trim() } : null;
-      n ? r.format = n : l || (r.fallback = e), l && (r.fallback = l);
+  if (e.length >= 2) {
+    const [, a, n] = e;
+    if (a.startsWith(c))
+      s.fallback = f(a);
+    else {
+      const o = h(a) ?? g(a);
+      o ? s.format = o : n || (s.fallback = a), n && (s.fallback = f(n));
     }
   }
-  return r;
-}, u = (a, c = !1) => a.map((t) => {
-  if (t.format)
-    return {
-      label: `${t.text} | ${t.format.key}=${t.format.value}`,
-      value: `{{${t.value}|${t.format.key}=${t.format.value}}}`
-    };
-  if (c) {
-    if (!t.fallback)
-      return {
-        label: t.text,
-        value: `{{ ${t.value} }}`
-      };
-    const r = !Number.isNaN(Number(t.fallback)) && t.fallback.trim() !== "" ? t.fallback : `"${t.fallback}"`;
-    return {
-      label: `${t.text} | ${t.fallback}`,
-      value: `{{ ${t.value} | default: ${r} }}`
-    };
-  }
+  return s;
+}, p = (t) => {
+  const e = !Number.isNaN(Number(t)) && t.trim() !== "" ? t : y(t);
+  return e === null ? null : `${c} ${e}`;
+}, v = (t) => {
+  const r = t.format ? b(t.format) : null, e = t.fallback ? p(t.fallback) : null, l = [t.value, r, e].filter(Boolean);
   return {
-    label: t.fallback ? `${t.text} | ${t.fallback}` : t.text,
-    value: t.fallback ? `{{${t.value}|${t.fallback}}}` : `{{${t.value}}}`
+    label: [t.text, r, e && t.fallback].filter(Boolean).join(" | "),
+    value: `{{ ${l.join(" | ")} }}`
   };
-}), b = (a) => {
-  const c = [], t = /* @__PURE__ */ new Set(), s = (e) => {
-    Array.isArray(e) && e.forEach((l) => {
-      const n = [...l.children ?? [], ...l.select_items ?? []];
-      if (n.length > 0) {
-        s(n);
+}, i = (t, r = !1) => t.map((e) => r ? v(e) : e.format ? {
+  label: `${e.text} | ${e.format.key}=${e.format.value}`,
+  value: `{{${e.value}|${e.format.key}=${e.format.value}}}`
+} : {
+  label: e.fallback ? `${e.text} | ${e.fallback}` : e.text,
+  value: e.fallback ? `{{${e.value}|${e.fallback}}}` : `{{${e.value}}}`
+}), $ = (t) => {
+  const r = [], e = /* @__PURE__ */ new Set(), l = (a) => {
+    Array.isArray(a) && a.forEach((n) => {
+      const o = [...n.children ?? [], ...n.select_items ?? []];
+      if (o.length > 0) {
+        l(o);
         return;
       }
-      const f = l.text || l.tag_text;
-      f && l.value && !t.has(l.value) && (t.add(l.value), c.push({ text: f, value: l.value }));
+      const u = n.text || n.tag_text;
+      u && n.value && !e.has(n.value) && (e.add(n.value), r.push({ text: u, value: n.value }));
     });
-  }, [r] = Object.values(a ?? {});
-  return s(r), c;
-}, i = (a, c, t = !1) => {
-  const s = new Set(a.map((e) => e.value)), r = c.filter((e) => s.has(e.value) ? !1 : (s.add(e.value), !0));
+  }, [s] = Object.values(t ?? {});
+  return l(s), r;
+}, d = (t, r, e = !1) => {
+  const l = new Set(t.map((a) => a.value)), s = r.filter((a) => l.has(a.value) ? !1 : (l.add(a.value), !0));
   return [
-    ...u(a, t),
-    ...u(r, t)
+    ...i(t, e),
+    ...i(s, e)
   ];
-}, k = () => {
-  var a;
-  return ((a = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : a.getAttribute("content")) ?? "";
-}, v = (a) => typeof a == "string" ? a : typeof a == "number" ? String(a) : "", y = (a) => {
-  if (a === null || typeof a != "object" || Array.isArray(a))
+}, F = () => {
+  var t;
+  return ((t = document.head.querySelector('meta[name="csrf-token"]')) == null ? void 0 : t.getAttribute("content")) ?? "";
+}, T = (t) => typeof t == "string" ? t : typeof t == "number" ? String(t) : "", x = (t) => {
+  if (t === null || typeof t != "object" || Array.isArray(t))
     return !1;
-  const c = Object.getPrototypeOf(a);
-  return c === Object.prototype || c === null;
+  const r = Object.getPrototypeOf(t);
+  return r === Object.prototype || r === null;
 };
 export {
-  v as asText,
-  i as buildMergeTagEntries,
-  u as dynamicContentToMergeTags,
-  b as flattenDynamicContentList,
-  k as getCsrfToken,
-  y as isPlainObject,
-  o as mergeTagToDynamicContent
+  T as asText,
+  d as buildMergeTagEntries,
+  i as dynamicContentToMergeTags,
+  $ as flattenDynamicContentList,
+  F as getCsrfToken,
+  x as isPlainObject,
+  k as mergeTagToDynamicContent
 };

package/dist/utils/liquidDynamicContent.js

@@ -0,0 +1,15 @@
+const E = "time-format", r = "date", u = new RegExp(`^${r}\\s*:\\s*(?:"([^"]*)"|'([^']*)')$`), s = /%[-_0^#]?\d*[a-zA-Z%]/, c = new RegExp(s, "g"), l = /\b(?:Y{2,4}|M{2,4}|D{1,4}|d{3,4}|H{2}|h{2}|m{2}|s{2}|S{1,3}|A|a)\b/, T = (t) => t.includes('"') ? t.includes("'") ? null : `'${t}'` : `"${t}"`, i = (t) => s.test(t) && !l.test(t.replace(c, "")), R = (t) => {
+  if (t.key !== E || !i(t.value ?? ""))
+    return null;
+  const n = T(t.value);
+  return n === null ? null : `${r}: ${n}`;
+}, _ = (t) => {
+  const [, n, o] = t.match(u) ?? [], e = n ?? o;
+  return e ? { key: E, value: e } : null;
+};
+export {
+  E as TIME_FORMAT_KEY,
+  R as formatToLiquidFilter,
+  _ as liquidFilterToFormat,
+  T as quoteArgument
+};