From da81683750f52bab6ea1ea03da2bd4fd81ea0db2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Christian=20Schr=C3=B6ter?= <dev@grizzly.codes>
Date: Fri, 28 Jul 2023 11:43:00 +0200
Subject: [PATCH] feat(date-picker): add positioner (#770)

Co-authored-by: Segun Adebayo <joseshegs@gmail.com>
---
 .changeset/breezy-peaches-jam.md              |   5 +
 .xstate/date-picker.js                        |   2 +-
 examples/next-ts/pages/date-picker.tsx        | 189 +++++++++---------
 packages/machines/date-picker/package.json    |   1 +
 .../date-picker/src/date-picker.anatomy.ts    |  19 +-
 .../date-picker/src/date-picker.connect.ts    |  13 ++
 .../date-picker/src/date-picker.dom.ts        |   3 +
 .../date-picker/src/date-picker.machine.ts    |  22 +-
 .../date-picker/src/date-picker.types.ts      |  13 ++
 pnpm-lock.yaml                                | 103 ++++------
 10 files changed, 205 insertions(+), 165 deletions(-)
 create mode 100644 .changeset/breezy-peaches-jam.md

diff --git a/.changeset/breezy-peaches-jam.md b/.changeset/breezy-peaches-jam.md
new file mode 100644
index 0000000000..86afc572c4
--- /dev/null
+++ b/.changeset/breezy-peaches-jam.md
@@ -0,0 +1,5 @@
+---
+"@zag-js/date-picker": minor
+---
+
+Add positioner part to date picker machine to allow dynamic positioning.
diff --git a/.xstate/date-picker.js b/.xstate/date-picker.js
index fd02886e6e..86bd912e79 100644
--- a/.xstate/date-picker.js
+++ b/.xstate/date-picker.js
@@ -130,7 +130,7 @@ const fetchMachine = createMachine({
     },
     open: {
       tags: "open",
-      activities: ["trackDismissableElement"],
+      activities: ["trackDismissableElement", "trackPositioning"],
       entry: ctx.inline ? undefined : ["focusActiveCell"],
       exit: ["clearHoveredDate", "resetView"],
       on: {
diff --git a/examples/next-ts/pages/date-picker.tsx b/examples/next-ts/pages/date-picker.tsx
index 7f99e6896f..8d55e75647 100644
--- a/examples/next-ts/pages/date-picker.tsx
+++ b/examples/next-ts/pages/date-picker.tsx
@@ -40,63 +40,27 @@ export default function Page() {
           <button {...api.clearTriggerProps}>❌</button>
           <button {...api.triggerProps}>🗓</button>
         </div>
+        <div {...api.positionerProps}>
+          <div {...api.contentProps}>
+            <div style={{ marginBlock: "20px" }}>
+              <select {...api.monthSelectProps}>
+                {api.getMonths().map((month, i) => (
+                  <option key={i} value={month.value}>
+                    {month.label}
+                  </option>
+                ))}
+              </select>
 
-        <div {...api.contentProps}>
-          <div style={{ marginBlock: "20px" }}>
-            <select {...api.monthSelectProps}>
-              {api.getMonths().map((month, i) => (
-                <option key={i} value={month.value}>
-                  {month.label}
-                </option>
-              ))}
-            </select>
-
-            <select {...api.yearSelectProps}>
-              {getYearsRange({ from: 1_000, to: 4_000 }).map((year, i) => (
-                <option key={i} value={year}>
-                  {year}
-                </option>
-              ))}
-            </select>
-          </div>
-
-          <div hidden={api.view !== "day"} style={{ maxWidth: "230px" }}>
-            <div
-              style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBlock: "10px" }}
-            >
-              <button {...api.getPrevTriggerProps()}>Prev</button>
-              <button {...api.getViewTriggerProps()} style={{ border: "0", padding: "4px 20px", borderRadius: "4px" }}>
-                {api.visibleRangeText.start}
-              </button>
-              <button {...api.getNextTriggerProps()}>Next</button>
-            </div>
-
-            <table {...api.getGridProps()}>
-              <thead {...api.getHeaderProps()}>
-                <tr>
-                  {api.weekDays.map((day, i) => (
-                    <th scope="col" key={i} aria-label={day.long}>
-                      {day.narrow}
-                    </th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {api.weeks.map((week, i) => (
-                  <tr key={i}>
-                    {week.map((value, i) => (
-                      <td key={i} {...api.getDayCellProps({ value })}>
-                        <div {...api.getDayCellTriggerProps({ value })}>{value.day}</div>
-                      </td>
-                    ))}
-                  </tr>
+              <select {...api.yearSelectProps}>
+                {getYearsRange({ from: 1_000, to: 4_000 }).map((year, i) => (
+                  <option key={i} value={year}>
+                    {year}
+                  </option>
                 ))}
-              </tbody>
-            </table>
-          </div>
+              </select>
+            </div>
 
-          <div style={{ display: "flex", gap: "40px", marginTop: "24px" }}>
-            <div hidden={api.view !== "month"}>
+            <div hidden={api.view !== "day"} style={{ maxWidth: "230px" }}>
               <div
                 style={{
                   display: "flex",
@@ -105,18 +69,32 @@ export default function Page() {
                   marginBlock: "10px",
                 }}
               >
-                <button {...api.getPrevTriggerProps({ view: "month" })}>Prev</button>
-                <span {...api.getViewTriggerProps({ view: "month" })}>{api.visibleRange.start.year}</span>
-                <button {...api.getNextTriggerProps({ view: "month" })}>Next</button>
+                <button {...api.getPrevTriggerProps()}>Prev</button>
+                <button
+                  {...api.getViewTriggerProps()}
+                  style={{ border: "0", padding: "4px 20px", borderRadius: "4px" }}
+                >
+                  {api.visibleRangeText.start}
+                </button>
+                <button {...api.getNextTriggerProps()}>Next</button>
               </div>
 
-              <table {...api.getGridProps({ view: "month", columns: 4 })}>
+              <table {...api.getGridProps()}>
+                <thead {...api.getHeaderProps()}>
+                  <tr>
+                    {api.weekDays.map((day, i) => (
+                      <th scope="col" key={i} aria-label={day.long}>
+                        {day.narrow}
+                      </th>
+                    ))}
+                  </tr>
+                </thead>
                 <tbody>
-                  {api.getMonthsGrid({ columns: 4, format: "short" }).map((months, row) => (
-                    <tr key={row}>
-                      {months.map((month, index) => (
-                        <td key={index} {...api.getMonthCellProps(month)}>
-                          <div {...api.getMonthCellTriggerProps(month)}>{month.label}</div>
+                  {api.weeks.map((week, i) => (
+                    <tr key={i}>
+                      {week.map((value, i) => (
+                        <td key={i} {...api.getDayCellProps({ value })}>
+                          <div {...api.getDayCellTriggerProps({ value })}>{value.day}</div>
                         </td>
                       ))}
                     </tr>
@@ -125,35 +103,66 @@ export default function Page() {
               </table>
             </div>
 
-            <div hidden={api.view !== "year"}>
-              <div
-                style={{
-                  display: "flex",
-                  justifyContent: "space-between",
-                  alignItems: "center",
-                  marginBlock: "10px",
-                }}
-              >
-                <button {...api.getPrevTriggerProps({ view: "year" })}>Prev</button>
-                <span>
-                  {api.getDecade().start} - {api.getDecade().end}
-                </span>
-                <button {...api.getNextTriggerProps({ view: "year" })}>Next</button>
+            <div style={{ display: "flex", gap: "40px", marginTop: "24px" }}>
+              <div hidden={api.view !== "month"}>
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginBlock: "10px",
+                  }}
+                >
+                  <button {...api.getPrevTriggerProps({ view: "month" })}>Prev</button>
+                  <span {...api.getViewTriggerProps({ view: "month" })}>{api.visibleRange.start.year}</span>
+                  <button {...api.getNextTriggerProps({ view: "month" })}>Next</button>
+                </div>
+
+                <table {...api.getGridProps({ view: "month", columns: 4 })}>
+                  <tbody>
+                    {api.getMonthsGrid({ columns: 4, format: "short" }).map((months, row) => (
+                      <tr key={row}>
+                        {months.map((month, index) => (
+                          <td key={index} {...api.getMonthCellProps(month)}>
+                            <div {...api.getMonthCellTriggerProps(month)}>{month.label}</div>
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
               </div>
 
-              <table {...api.getGridProps({ view: "year", columns: 4 })}>
-                <tbody>
-                  {api.getYearsGrid({ columns: 4 }).map((years, row) => (
-                    <tr key={row}>
-                      {years.map((year, index) => (
-                        <td colSpan={4} key={index} {...api.getYearCellProps(year)}>
-                          <div {...api.getYearCellTriggerProps(year)}>{year.label}</div>
-                        </td>
-                      ))}
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+              <div hidden={api.view !== "year"}>
+                <div
+                  style={{
+                    display: "flex",
+                    justifyContent: "space-between",
+                    alignItems: "center",
+                    marginBlock: "10px",
+                  }}
+                >
+                  <button {...api.getPrevTriggerProps({ view: "year" })}>Prev</button>
+                  <span>
+                    {api.getDecade().start} - {api.getDecade().end}
+                  </span>
+                  <button {...api.getNextTriggerProps({ view: "year" })}>Next</button>
+                </div>
+
+                <table {...api.getGridProps({ view: "year", columns: 4 })}>
+                  <tbody>
+                    {api.getYearsGrid({ columns: 4 }).map((years, row) => (
+                      <tr key={row}>
+                        {years.map((year, index) => (
+                          <td colSpan={4} key={index} {...api.getYearCellProps(year)}>
+                            <div {...api.getYearCellTriggerProps(year)}>{year.label}</div>
+                          </td>
+                        ))}
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
             </div>
           </div>
         </div>
diff --git a/packages/machines/date-picker/package.json b/packages/machines/date-picker/package.json
index 2881ab5761..e8c854efa6 100644
--- a/packages/machines/date-picker/package.json
+++ b/packages/machines/date-picker/package.json
@@ -46,6 +46,7 @@
     "@zag-js/dom-query": "workspace:*",
     "@zag-js/dom-event": "workspace:*",
     "@zag-js/form-utils": "workspace:*",
+    "@zag-js/popper": "workspace:*",
     "@zag-js/utils": "workspace:*"
   },
   "devDependencies": {
diff --git a/packages/machines/date-picker/src/date-picker.anatomy.ts b/packages/machines/date-picker/src/date-picker.anatomy.ts
index 27537bf9e5..7469cf521f 100644
--- a/packages/machines/date-picker/src/date-picker.anatomy.ts
+++ b/packages/machines/date-picker/src/date-picker.anatomy.ts
@@ -1,19 +1,20 @@
 import { createAnatomy } from "@zag-js/anatomy"
 
 export const anatomy = createAnatomy("date-picker").parts(
-  "label",
-  "control",
-  "trigger",
-  "content",
-  "input",
-  "header",
-  "viewTrigger",
   "cellTrigger",
-  "nextTrigger",
-  "prevTrigger",
   "clearTrigger",
+  "content",
+  "control",
   "grid",
+  "header",
+  "input",
+  "label",
   "monthSelect",
+  "nextTrigger",
+  "positioner",
+  "prevTrigger",
+  "trigger",
+  "viewTrigger",
   "yearSelect",
 )
 
diff --git a/packages/machines/date-picker/src/date-picker.connect.ts b/packages/machines/date-picker/src/date-picker.connect.ts
index 79f85fbb28..a9b4bc81b8 100644
--- a/packages/machines/date-picker/src/date-picker.connect.ts
+++ b/packages/machines/date-picker/src/date-picker.connect.ts
@@ -21,6 +21,7 @@ import {
 } from "@zag-js/date-utils"
 import { getEventKey, getNativeEvent, type EventKeyMap } from "@zag-js/dom-event"
 import { ariaAttr, dataAttr } from "@zag-js/dom-query"
+import { getPlacementStyles } from "@zag-js/popper"
 import type { NormalizeProps, PropTypes } from "@zag-js/types"
 import { chunk } from "@zag-js/utils"
 import { parts } from "./date-picker.anatomy"
@@ -75,6 +76,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
   const isRangePicker = state.context.selectionMode === "range"
   const isDateUnavailableFn = state.context.isDateUnavailable
 
+  const currentPlacement = state.context.currentPlacement
+  const popperStyles = getPlacementStyles({
+    ...state.context.positioning,
+    placement: currentPlacement,
+  })
+
   const defaultOffset: Offset = {
     amount: 0,
     visibleRange: state.context.visibleRange,
@@ -621,6 +628,12 @@ export function connect<T extends PropTypes>(state: State, send: Send, normalize
         api.focusYear(Number(event.currentTarget.value))
       },
     }),
+
+    positionerProps: normalize.element({
+      id: dom.getPositionerId(state.context),
+      ...parts.positioner.attrs,
+      style: popperStyles.floating,
+    }),
   }
 
   return api
diff --git a/packages/machines/date-picker/src/date-picker.dom.ts b/packages/machines/date-picker/src/date-picker.dom.ts
index 548058f51b..2be38b7d77 100644
--- a/packages/machines/date-picker/src/date-picker.dom.ts
+++ b/packages/machines/date-picker/src/date-picker.dom.ts
@@ -13,6 +13,7 @@ export const dom = createScope({
   getControlId: (ctx: Ctx) => ctx.ids?.control ?? `datepicker:${ctx.id}:control`,
   getInputId: (ctx: Ctx) => ctx.ids?.input ?? `datepicker:${ctx.id}:input`,
   getTriggerId: (ctx: Ctx) => ctx.ids?.trigger ?? `datepicker:${ctx.id}:trigger`,
+  getPositionerId: (ctx: Ctx) => ctx.ids?.positioner ?? `datepicker:${ctx.id}:positioner`,
   getMonthSelectId: (ctx: Ctx) => ctx.ids?.monthSelect ?? `datepicker:${ctx.id}:month-select`,
   getYearSelectId: (ctx: Ctx) => ctx.ids?.yearSelect ?? `datepicker:${ctx.id}:year-select`,
 
@@ -24,4 +25,6 @@ export const dom = createScope({
   getYearSelectEl: (ctx: Ctx) => dom.getById<HTMLSelectElement>(ctx, dom.getYearSelectId(ctx)),
   getMonthSelectEl: (ctx: Ctx) => dom.getById<HTMLSelectElement>(ctx, dom.getMonthSelectId(ctx)),
   getClearTriggerEl: (ctx: Ctx) => dom.getById<HTMLButtonElement>(ctx, dom.getClearTriggerId(ctx)),
+  getPositionerEl: (ctx: Ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
+  getControlEl: (ctx: Ctx) => dom.getById(ctx, dom.getControlId(ctx)),
 })
diff --git a/packages/machines/date-picker/src/date-picker.machine.ts b/packages/machines/date-picker/src/date-picker.machine.ts
index 9e6ec3c100..3b3129b9da 100644
--- a/packages/machines/date-picker/src/date-picker.machine.ts
+++ b/packages/machines/date-picker/src/date-picker.machine.ts
@@ -20,6 +20,7 @@ import {
 import { trackDismissableElement } from "@zag-js/dismissable"
 import { raf } from "@zag-js/dom-query"
 import { createLiveRegion } from "@zag-js/live-region"
+import { getPlacement } from "@zag-js/popper"
 import { disableTextSelection, restoreTextSelection } from "@zag-js/text-selection"
 import { compact } from "@zag-js/utils"
 import { dom } from "./date-picker.dom"
@@ -62,6 +63,10 @@ const getInitialContext = (ctx: Partial<MachineContext>): MachineContext => {
     valueText: "",
     hoveredValue: null,
     ...ctx,
+    positioning: {
+      placement: "bottom",
+      ...ctx.positioning,
+    },
   } as MachineContext
 }
 
@@ -170,7 +175,7 @@ export function machine(userContext: UserDefinedContext) {
 
         open: {
           tags: "open",
-          activities: ["trackDismissableElement"],
+          activities: ["trackDismissableElement", "trackPositioning"],
           entry: ctx.inline ? undefined : ["focusActiveCell"],
           exit: ["clearHoveredDate", "resetView"],
           on: {
@@ -367,6 +372,21 @@ export function machine(userContext: UserDefinedContext) {
         isInline: (ctx) => !!ctx.inline,
       },
       activities: {
+        trackPositioning(ctx) {
+          ctx.currentPlacement = ctx.positioning.placement
+          const anchorEl = dom.getControlEl(ctx)
+          const getPositionerEl = () => dom.getPositionerEl(ctx)
+          return getPlacement(anchorEl, getPositionerEl, {
+            ...ctx.positioning,
+            defer: true,
+            onComplete(data) {
+              ctx.currentPlacement = data.placement
+            },
+            onCleanup() {
+              ctx.currentPlacement = undefined
+            },
+          })
+        },
         setupLiveRegion(ctx) {
           const doc = dom.getDoc(ctx)
           ctx.announcer = createLiveRegion({ level: "assertive", document: doc })
diff --git a/packages/machines/date-picker/src/date-picker.types.ts b/packages/machines/date-picker/src/date-picker.types.ts
index cd0079b765..464d8fa89e 100644
--- a/packages/machines/date-picker/src/date-picker.types.ts
+++ b/packages/machines/date-picker/src/date-picker.types.ts
@@ -7,6 +7,7 @@ import type {
   DateValue,
   ZonedDateTime,
 } from "@internationalized/date"
+import type { Placement, PositioningOptions } from "@zag-js/popper"
 import * as _internationalized_date from "@internationalized/date"
 import type { StateMachine as S } from "@zag-js/core"
 import type { LiveRegion } from "@zag-js/live-region"
@@ -35,6 +36,7 @@ type ElementIds = Partial<{
   trigger: string
   monthSelect: string
   yearSelect: string
+  positioner: string
 }>
 
 export type SelectionMode = "single" | "multiple" | "range"
@@ -177,6 +179,10 @@ type PublicContext = DirectionProperty &
      * block interaction with the rest of the page, and trap focus within it.
      */
     modal?: boolean
+    /**
+     * The user provided options used to position the date picker content
+     */
+    positioning: PositioningOptions
   }
 
 export type PublicApi<T extends PropTypes = PropTypes> = {
@@ -358,6 +364,8 @@ export type PublicApi<T extends PropTypes = PropTypes> = {
   goToPrev(): void
   controlProps: T["element"]
   contentProps: T["element"]
+  positionerProps: T["element"]
+
   getGridProps(props?: GridProps): T["element"]
   /**
    * Returns the state details for a given cell.
@@ -427,6 +435,11 @@ type PrivateContext = Context<{
    * Used in range selection mode.
    */
   activeIndex: number
+  /**
+   * @internal
+   * The computed placement (maybe different from initial placement)
+   */
+  currentPlacement?: Placement
 }>
 
 type ComputedContext = Readonly<{
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 78bbd31fcd..394a9edd00 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -564,7 +564,7 @@ importers:
     devDependencies:
       '@nuxt/devtools':
         specifier: latest
-        version: 0.6.7(nuxt@3.6.5)(vite@4.4.7)
+        version: 0.7.1(nuxt@3.6.5)(vite@4.4.7)
       '@types/node':
         specifier: ^20.4.4
         version: 20.4.4
@@ -1569,6 +1569,9 @@ importers:
       '@zag-js/live-region':
         specifier: workspace:*
         version: link:../../utilities/live-region
+      '@zag-js/popper':
+        specifier: workspace:*
+        version: link:../../utilities/popper
       '@zag-js/text-selection':
         specifier: workspace:*
         version: link:../../utilities/text-selection
@@ -2927,25 +2930,6 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/helper-create-class-features-plugin@7.21.0(@babel/core@7.22.5):
-    resolution: {integrity: sha512-Q8wNiMIdwsv5la5SPxNYzzkPnjgC0Sy0i7jLkVOCdllu/xcVNkr3TeZzbHBJrj+XXRqzX5uCyCoV9eu6xUG7KQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0
-    dependencies:
-      '@babel/core': 7.22.5
-      '@babel/helper-annotate-as-pure': 7.18.6
-      '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-function-name': 7.22.5
-      '@babel/helper-member-expression-to-functions': 7.21.0
-      '@babel/helper-optimise-call-expression': 7.18.6
-      '@babel/helper-replace-supers': 7.20.7
-      '@babel/helper-skip-transparent-expression-wrappers': 7.20.0
-      '@babel/helper-split-export-declaration': 7.22.6
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/helper-create-class-features-plugin@7.22.6(@babel/core@7.22.5):
     resolution: {integrity: sha512-iwdzgtSiBxF6ni6mzVnZCF3xt5qE6cEA0J7nFt8QOAWZ0zjCFceEgpn3vtb2V7WFR6QzP2jmIFOHMTRo7eNJjQ==}
     engines: {node: '>=6.9.0'}
@@ -3070,8 +3054,8 @@ packages:
     engines: {node: '>=6.9.0'}
     dependencies:
       '@babel/helper-environment-visitor': 7.22.5
-      '@babel/helper-member-expression-to-functions': 7.21.0
-      '@babel/helper-optimise-call-expression': 7.18.6
+      '@babel/helper-member-expression-to-functions': 7.22.5
+      '@babel/helper-optimise-call-expression': 7.22.5
       '@babel/template': 7.22.5
       '@babel/traverse': 7.22.8
       '@babel/types': 7.22.5
@@ -3218,16 +3202,6 @@ packages:
       '@babel/helper-plugin-utils': 7.20.2
     dev: true
 
-  /@babel/plugin-syntax-typescript@7.20.0(@babel/core@7.22.5):
-    resolution: {integrity: sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.5
-      '@babel/helper-plugin-utils': 7.20.2
-    dev: true
-
   /@babel/plugin-syntax-typescript@7.22.5(@babel/core@7.22.5):
     resolution: {integrity: sha512-1mS2o03i7t1c6VzH6fdQ3OA8tcEIxwG18zIPRp+UY1Ihv6W+XZzBCVxExF9upussPXJ0xE9XRHwMoNs1ep/nRQ==}
     engines: {node: '>=6.9.0'}
@@ -3272,20 +3246,6 @@ packages:
       - supports-color
     dev: true
 
-  /@babel/plugin-transform-typescript@7.21.0(@babel/core@7.22.5):
-    resolution: {integrity: sha512-xo///XTPp3mDzTtrqXoBlK9eiAYW3wv9JXglcn/u1bi60RW11dEUxIgA8cbnDhutS1zacjMRmAwxE0gMklLnZg==}
-    engines: {node: '>=6.9.0'}
-    peerDependencies:
-      '@babel/core': ^7.0.0-0
-    dependencies:
-      '@babel/core': 7.22.5
-      '@babel/helper-create-class-features-plugin': 7.21.0(@babel/core@7.22.5)
-      '@babel/helper-plugin-utils': 7.20.2
-      '@babel/plugin-syntax-typescript': 7.20.0(@babel/core@7.22.5)
-    transitivePeerDependencies:
-      - supports-color
-    dev: true
-
   /@babel/plugin-transform-typescript@7.22.5(@babel/core@7.22.5):
     resolution: {integrity: sha512-SMubA9S7Cb5sGSFFUlqxyClTA9zWJ8qGQrppNUm05LtFuN1ELRFNndkix4zUJrC9F+YivWwa1dHMSyo0e0N9dA==}
     engines: {node: '>=6.9.0'}
@@ -5343,8 +5303,8 @@ packages:
     resolution: {integrity: sha512-GBzP8zOc7CGWyFQS6dv1lQz8VVpz5C2yRszbXufwG/9zhStTIH50EtD87NmWbTMwXDvZLNg8GIpb1UFdH93JCA==}
     dev: true
 
-  /@nuxt/devtools-kit@0.6.7(nuxt@3.6.5)(vite@4.4.7):
-    resolution: {integrity: sha512-DEJBLspLRr3zFu/DAHs8Q1o9tgzELt24qDqsuqTEKqcw/2j1iu1TefvUdmXkJo6s8Qk3GI6e3QxrvtEE3mwKqA==}
+  /@nuxt/devtools-kit@0.7.1(nuxt@3.6.5)(vite@4.4.7):
+    resolution: {integrity: sha512-g7OgrU0VlW9fibLdHmhad4tEQzkS4g8yxaqDD/Kri/i3mEOeS7w9E8x7kkA/56FmmnXe6F6lCcLqG6u3FYW6WA==}
     peerDependencies:
       nuxt: ^3.6.1
       vite: '*'
@@ -5359,8 +5319,8 @@ packages:
       - supports-color
     dev: true
 
-  /@nuxt/devtools-wizard@0.6.7:
-    resolution: {integrity: sha512-dN+3UVxsGk3Vx0T6tN+UQ1b7FjWHk3N4WWmnKOACa4pHt77RYHFzndk60KDlKq9I/bn905pghsqwvXmPfbSpJA==}
+  /@nuxt/devtools-wizard@0.7.1:
+    resolution: {integrity: sha512-WZ8kdb9yfqgXn77ors9ojykb0wh0/+OdvgLEQt1xmwZxbWP5PPMqS/mcCUtKEuoYF2SM5aMBSPoXz90TJ/DfHQ==}
     hasBin: true
     dependencies:
       consola: 3.2.3
@@ -5376,22 +5336,23 @@ packages:
       semver: 7.5.4
     dev: true
 
-  /@nuxt/devtools@0.6.7(nuxt@3.6.5)(vite@4.4.7):
-    resolution: {integrity: sha512-ATjkNfceG+8DQ8kR6O3UC9MjFfUd39aeFgKA+Z6pjG8Z7e3vwK92oZCSeQ8DQRi4/2kwa/UPjN8pNclyc6FlbQ==}
+  /@nuxt/devtools@0.7.1(nuxt@3.6.5)(vite@4.4.7):
+    resolution: {integrity: sha512-fwtsfv6vezD8AAKZO2rCwMc+jBsylP1AWF7WncCjr6KeOLoTjS38aOelO03XvrR61B1t4Vt44S/3afUPkmIEFQ==}
     hasBin: true
     peerDependencies:
       nuxt: ^3.6.1
       vite: '*'
     dependencies:
-      '@nuxt/devtools-kit': 0.6.7(nuxt@3.6.5)(vite@4.4.7)
-      '@nuxt/devtools-wizard': 0.6.7
+      '@nuxt/devtools-kit': 0.7.1(nuxt@3.6.5)(vite@4.4.7)
+      '@nuxt/devtools-wizard': 0.7.1
       '@nuxt/kit': 3.6.5
       birpc: 0.2.12
       boxen: 7.1.1
       consola: 3.2.3
+      error-stack-parser-es: 0.1.0
       execa: 7.1.1
       fast-folder-size: 2.1.0
-      fast-glob: 3.3.0
+      fast-glob: 3.3.1
       get-port-please: 3.0.1
       global-dirs: 3.0.1
       h3: 1.7.1
@@ -5413,7 +5374,7 @@ packages:
       sirv: 2.0.3
       unimport: 3.1.0(rollup@3.26.2)
       vite: 4.4.7(@types/node@20.4.4)
-      vite-plugin-inspect: 0.7.32(vite@4.4.7)
+      vite-plugin-inspect: 0.7.33(vite@4.4.7)
       vite-plugin-vue-inspector: 3.4.2(vite@4.4.7)
       wait-on: 7.0.1
       which: 3.0.1
@@ -7076,9 +7037,9 @@ packages:
       vite: ^4.0.0
       vue: ^3.0.0
     dependencies:
-      '@babel/core': 7.22.5
-      '@babel/plugin-transform-typescript': 7.21.0(@babel/core@7.22.5)
-      '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.22.5)
+      '@babel/core': 7.21.0
+      '@babel/plugin-transform-typescript': 7.21.0(@babel/core@7.21.0)
+      '@vue/babel-plugin-jsx': 1.1.1(@babel/core@7.21.0)
       vite: 4.3.9(@types/node@20.4.4)
       vue: 3.3.4
     transitivePeerDependencies:
@@ -9289,6 +9250,10 @@ packages:
       is-arrayish: 0.2.1
     dev: false
 
+  /error-stack-parser-es@0.1.0:
+    resolution: {integrity: sha512-K5/Oncl6ZizGM7tqGUc3Sd82zVKGsZ+l8FqhhnF8+10QujC/xT2VKwdaM/8rAR5F1BouVqgemMrhHG23vhOpMw==}
+    dev: true
+
   /es-abstract@1.21.1:
     resolution: {integrity: sha512-QudMsPOz86xYz/1dG1OuGBKOELjCh99IIWHLzy5znUB6j8xG2yMA7bfTV86VSqKF+Y/H08vQPR+9jyXpuC6hfg==}
     engines: {node: '>= 0.4'}
@@ -10007,6 +9972,16 @@ packages:
       merge2: 1.4.1
       micromatch: 4.0.5
 
+  /fast-glob@3.3.1:
+    resolution: {integrity: sha512-kNFPyjhh5cKjrUltxs+wFx+ZkbRaxxmZ+X0ZU31SOsxCEtP9VPgtq2teZw1DebupL5GmDaNQ6yKMMVcM41iqDg==}
+    engines: {node: '>=8.6.0'}
+    dependencies:
+      '@nodelib/fs.stat': 2.0.5
+      '@nodelib/fs.walk': 1.2.8
+      glob-parent: 5.1.2
+      merge2: 1.4.1
+      micromatch: 4.0.5
+
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
 
@@ -10591,7 +10566,7 @@ packages:
     engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
     dependencies:
       dir-glob: 3.0.1
-      fast-glob: 3.3.0
+      fast-glob: 3.3.1
       ignore: 5.2.4
       merge2: 1.4.1
       slash: 4.0.0
@@ -13812,7 +13787,7 @@ packages:
     hasBin: true
     dependencies:
       ansi-colors: 4.1.3
-      fast-glob: 3.3.0
+      fast-glob: 3.3.1
       js-yaml: 4.1.0
       supports-color: 9.4.0
       undici: 5.22.1
@@ -16903,7 +16878,7 @@ packages:
       chokidar: 3.5.3
       commander: 8.3.0
       eslint: 8.45.0
-      fast-glob: 3.3.0
+      fast-glob: 3.3.1
       fs-extra: 11.1.1
       lodash.debounce: 4.0.8
       lodash.pick: 4.4.0
@@ -16943,8 +16918,8 @@ packages:
       - supports-color
     dev: false
 
-  /vite-plugin-inspect@0.7.32(vite@4.4.7):
-    resolution: {integrity: sha512-TqRLHwOM3FTJPOGCCHJmub4SVVogSjZ9LSDo1Q6WeN2Zvc7HB7tr7cqYlAyStXCI90KvVnb1BRwI22+HXlghXQ==}
+  /vite-plugin-inspect@0.7.33(vite@4.4.7):
+    resolution: {integrity: sha512-cQRLQKa/+Ua++5hN0IZfqNn1JYXBg2eCQOSUatPTwhXMO7nwfSvhhSc45E1nXfBBEhzLLOxgr1OdbDu55PiDDA==}
     engines: {node: '>=14'}
     peerDependencies:
       vite: ^3.1.0 || ^4.0.0