@domicile-desktop/manganese-notifications 1.0.0 → 2.0.0

package/package.json

@@ -1,20 +1,21 @@
 {
   "dependencies": {
-    "@domicile-desktop/component-library": "1.0.0",
-    "@domicile-desktop/manganese-bar": "1.0.0",
-    "@domicile-desktop/manganese-host": "1.0.0",
-    "@domicile-desktop/react": "0.0.0",
-    "@domicile-desktop/sdk": "1.0.0",
+    "@domicile-desktop/component-library": "2.1.0",
+    "@domicile-desktop/manganese-bar": "1.1.2",
+    "@domicile-desktop/manganese-host": "2.0.2",
+    "@domicile-desktop/react": "0.1.2",
+    "@domicile-desktop/sdk": "2.2.0",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "zod": "^4.5.4"
   },
   "description": "Manganese's notification toasts and drawer.",
   "devDependencies": {
     "@cprussin/tsconfig": "^5.0.0",
-    "@domicile-desktop/manganese-window-management": "1.0.0",
-    "@domicile-desktop/test-support": "0.0.1",
+    "@domicile-desktop/manganese-window-management": "1.3.0",
+    "@domicile-desktop/test-support": "0.0.2",
     "@pandacss/preset-panda": "^1.12.1",
     "@testing-library/react": "^16.3.3",
     "@testing-library/user-event": "^14.6.7",
@@ -25,8 +26,7 @@
     "typescript": "^7.0.2"
   },
   "engines": {
-    "bun": ">=1.4.2",
-    "node": ">=24"
+    "bun": ">=1.4.2"
   },
   "exports": {
     "./ago": "./src/ago.ts",
@@ -60,5 +60,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "1.0.0"
+  "version": "2.0.0"
 }

package/src/NotificationDrawer.tsx

@@ -3,15 +3,17 @@ import { EmptyState } from "@domicile-desktop/component-library/EmptyState";
 import { LeavingRow } from "@domicile-desktop/component-library/LeavingRow";
 import { List } from "@domicile-desktop/component-library/ListRow";
 import type { Row } from "@domicile-desktop/component-library/leaving-rows";
-import { PanelFooter } from "@domicile-desktop/component-library/PanelFooter";
+import { Menu } from "@domicile-desktop/component-library/Menu";
 import { PanelHeader } from "@domicile-desktop/component-library/PanelHeader";
 import { PanelSection } from "@domicile-desktop/component-library/PanelSection";
 import { Popover } from "@domicile-desktop/component-library/Popover";
-import { Switch } from "@domicile-desktop/component-library/Switch";
 import { useLeavingRows } from "@domicile-desktop/component-library/useLeavingRows";
 import type { Notification } from "@domicile-desktop/sdk/notification";
 import { BellSimpleIcon } from "@phosphor-icons/react/dist/ssr/BellSimple";
 import { BroomIcon } from "@phosphor-icons/react/dist/ssr/Broom";
+import { CaretDownIcon } from "@phosphor-icons/react/dist/ssr/CaretDown";
+import { PauseIcon } from "@phosphor-icons/react/dist/ssr/Pause";
+import { PlayIcon } from "@phosphor-icons/react/dist/ssr/Play";
 import { memo } from "react";
 
 import { css } from "../styled-system/css";
@@ -21,6 +23,8 @@ import type { Inbox, InboxReading } from "./inbox";
 import { NotificationCard } from "./NotificationCard";
 import type { NotificationsHandle } from "./notifications-context";
 import { bellId, screenOfBell } from "./notifications-context";
+import { PauseLength, pausedFor } from "./pause";
+import type { Pause } from "./stored-pause";
 
 /** The inboxes listed in the drawer, and what the shell knows of them. */
 export type DrawerInboxes = {
@@ -32,8 +36,6 @@ export type DrawerInboxes = {
 };
 
 type Props = {
-  /** Toasts are held back, but for critical ones. */
-  doNotDisturb: boolean;
   /** Opens it under the bell pressed. */
   handle: NotificationsHandle;
   /** The inboxes, listed above the notifications. */
@@ -43,6 +45,8 @@ type Props = {
   /** The current time, for the relative timestamps. */
   now: number;
   open: boolean;
+  /** Toasts are held back, but for critical ones, until it ends. */
+  pause: Pause | undefined;
   /** The monitor whose bell it opens under. */
   screen: string | undefined;
   /** The bell on monitor `screen` was pressed. */
@@ -50,8 +54,10 @@ type Props = {
   onClose: () => void;
   /** Clear `ids`. */
   onDismiss: (ids: readonly number[]) => void;
-  /** Turn do not disturb on or off. */
-  onDoNotDisturb: (on: boolean) => void;
+  /** Pause toasts for `length`. */
+  onPause: (length: PauseLength) => void;
+  /** End the pause. */
+  onResume: () => void;
   /** Press `key` on `id`. */
   onAction: (id: number, key: string) => void;
   /** Send `text` from `id`'s reply field. */
@@ -61,8 +67,8 @@ type Props = {
 /**
  * The notification drawer, a panel under the bell. Each notification can be
  * pressed or cleared, or all cleared at once. A press closes the drawer,
- * which would cover the window it raises. Do not disturb is switched in its
- * footer.
+ * which would cover the window it raises. Its header pauses notifications from
+ * a menu of lengths, and says until when while paused.
  *
  * A notification stays here after its toast is gone, until it is cleared or its
  * application withdraws it. See docs/architecture/NOTIFICATIONS.md.
@@ -75,7 +81,6 @@ type Props = {
  */
 export const NotificationDrawer = memo(
   ({
-    doNotDisturb,
     handle,
     inboxes,
     items,
@@ -83,10 +88,12 @@ export const NotificationDrawer = memo(
     onAction,
     onClose,
     onDismiss,
-    onDoNotDisturb,
     onOpen,
+    onPause,
     onReply,
+    onResume,
     open,
+    pause,
     screen,
   }: Props) => {
     const { onLeft, rows } = useLeavingRows(items, idOf, open);
@@ -117,7 +124,26 @@ export const NotificationDrawer = memo(
         triggerId={screen === undefined ? null : bellId(screen)}
       >
         <section aria-labelledby={TITLE_ID} className={drawerStyles}>
-          <PanelHeader title="Notifications" titleId={TITLE_ID} />
+          <PanelHeader
+            action={
+              pause === undefined ? (
+                <PauseMenu onPause={onPause} />
+              ) : (
+                <Button
+                  beforeIcon={<PlayIcon aria-hidden size={12} weight="fill" />}
+                  onClick={onResume}
+                  rounded
+                  size="xs"
+                  variant="accent"
+                >
+                  Resume
+                </Button>
+              )
+            }
+            status={pause === undefined ? undefined : pausedFor(pause, now)}
+            title="Notifications"
+            titleId={TITLE_ID}
+          />
           <div className={paneStyles}>
             {inboxes !== undefined && (
               <PanelSection label="Inboxes">
@@ -130,41 +156,70 @@ export const NotificationDrawer = memo(
                 </List>
               </PanelSection>
             )}
-            {inboxes === undefined ? (
-              notifications
-            ) : (
-              <PanelSection label="Recent">{notifications}</PanelSection>
-            )}
+            <PanelSection
+              action={
+                items.length > 0 && (
+                  <Button
+                    beforeIcon={<BroomIcon aria-hidden size={14} />}
+                    onClick={() => {
+                      onDismiss(items.map(({ id }) => id));
+                    }}
+                    rounded
+                    size="xs"
+                    variant="ghost"
+                  >
+                    Clear all
+                  </Button>
+                )
+              }
+              label="Recent"
+            >
+              {notifications}
+            </PanelSection>
           </div>
-          <PanelFooter
-            action={
-              items.length > 0 && (
-                <Button
-                  beforeIcon={<BroomIcon aria-hidden size={14} />}
-                  onClick={() => {
-                    onDismiss(items.map(({ id }) => id));
-                  }}
-                  rounded
-                  size="xs"
-                  variant="ghost"
-                >
-                  Clear all
-                </Button>
-              )
-            }
-          >
-            <Switch
-              checked={doNotDisturb}
-              label="Do not disturb"
-              onCheckedChange={onDoNotDisturb}
-            />
-          </PanelFooter>
         </section>
       </Popover>
     );
   },
 );
 
+type PauseMenuProps = Pick<Props, "onPause">;
+
+/** The header's Pause button, and the lengths it offers. */
+const PauseMenu = ({ onPause }: PauseMenuProps) => (
+  <Menu
+    trigger={
+      <Button
+        afterIcon={<CaretDownIcon aria-hidden size={10} weight="fill" />}
+        beforeIcon={<PauseIcon aria-hidden size={12} weight="fill" />}
+        rounded
+        size="xs"
+        variant="ghost"
+      >
+        Pause
+      </Button>
+    }
+  >
+    {PAUSE_LENGTHS.map(({ label, length }) => (
+      <Menu.Item
+        key={label}
+        onClick={() => {
+          onPause(length);
+        }}
+      >
+        {label}
+      </Menu.Item>
+    ))}
+  </Menu>
+);
+
+/** The Pause menu's items, shortest first. */
+const PAUSE_LENGTHS = [
+  { label: "For 1 hour", length: PauseLength.Hour },
+  { label: "Until tomorrow", length: PauseLength.Tomorrow },
+  { label: "Until I resume", length: PauseLength.UntilResumed },
+];
+
 /** Tells one notification from another. */
 const idOf = ({ id }: Notification): number => id;
 

package/src/fixture.ts

@@ -5,6 +5,7 @@ export const notification = (fields: Partial<Notification>): Notification => ({
   actions: [],
   appName: "Firefox",
   body: "",
+  browserWindow: undefined,
   clickable: false,
   icon: undefined,
   id: 1,

package/src/inbox.ts

@@ -107,9 +107,10 @@ export const Inbox = {
       open: (domicile: Domicile, reading: InboxReading | undefined) => void;
       /**
        * The app window it opens in, if any, which the launcher lists: app
-       * `appId`'s, at `url`.
+       * `appId`'s, at `url`. With `pageNotifies`, its page notifies what the
+       * inbox notifies already, so the page's are cleared as they arrive.
        */
-      app?: { appId: string; url: string };
+      app?: { appId: string; url: string; pageNotifies?: boolean };
     },
   ) => ({ ...inbox, kind: InboxKind.Watched as const }),
   /**

package/src/notifications-context.ts

@@ -7,10 +7,10 @@ export type NotificationsHandle = ReturnType<typeof createHandle>;
 
 /** The notification drawer, for the bell that opens it. */
 export type NotificationsDrawer = {
-  /** Toasts are held back, but for critical ones. */
-  doNotDisturb: boolean;
   /** Opens the drawer under the bell pressed. */
   handle: NotificationsHandle;
+  /** Toasts are held back, but for critical ones. */
+  paused: boolean;
   /** How many notifications arrived since the drawer was last opened. */
   unread: number;
 };

package/src/pause.ts

@@ -0,0 +1,54 @@
+import type { Pause } from "./stored-pause";
+
+/** How long a pause lasts, as picked from the drawer's Pause menu. */
+export enum PauseLength {
+  Hour,
+  Tomorrow,
+  UntilResumed,
+}
+
+const HOUR_MS = 3_600_000;
+
+/** The hour of the morning a pause until tomorrow ends. */
+const MORNING_HOUR = 8;
+
+/**
+ * When a pause of `length` started at `now` ends, in ms since the epoch, or
+ * `undefined` for one that lasts until resumed.
+ */
+export const pauseEnd = (
+  length: PauseLength,
+  now: number,
+): number | undefined => {
+  switch (length) {
+    case PauseLength.Hour: {
+      return now + HOUR_MS;
+    }
+    case PauseLength.Tomorrow: {
+      return nextMorning(new Date(now)).getTime();
+    }
+    case PauseLength.UntilResumed: {
+      return undefined;
+    }
+  }
+};
+
+/** What the drawer says under its title while `pause` holds at `now`. */
+export const pausedFor = ({ until }: Pause, now: number): string =>
+  until === undefined ? "Paused" : `Paused until ${endsAt(until, now)}`;
+
+/** 8 AM the day after `now`'s date, local time. */
+const nextMorning = (now: Date): Date =>
+  new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, MORNING_HOUR);
+
+/** `until`'s time, after "tomorrow" when that is not `now`'s date. */
+const endsAt = (until: number, now: number): string => {
+  const end = new Date(until);
+  const time = end.toLocaleTimeString(undefined, {
+    hour: "numeric",
+    minute: "2-digit",
+  });
+  return end.toDateString() === new Date(now).toDateString()
+    ? time
+    : `tomorrow, ${time}`;
+};

package/src/stored-pause.ts

@@ -0,0 +1,57 @@
+import { z } from "zod";
+
+// The notifications pause, stored locally so a reload keeps it. Every page of
+// the desktop shares one origin, so they read the same pause.
+
+/** The storage key, versioned per the persisted-state rule. */
+const KEY = "notifications-paused:v1";
+
+/** The key do not disturb was stored under; on means paused until resumed. */
+const DO_NOT_DISTURB_KEY = "do-not-disturb:v1";
+
+const pauseSchema = z.object({ until: z.number().optional() });
+
+/** Notifications paused until `until` (ms since the epoch) or until resumed. */
+export type Pause = z.infer<typeof pauseSchema>;
+
+/**
+ * The stored pause, or none. Do not disturb left on reads as a pause until
+ * resumed.
+ *
+ * Parsed rather than cast: an unreadable value counts as none, and
+ * notifications toast.
+ */
+export const storedPause = (): Pause | undefined => {
+  const stored = globalThis.localStorage.getItem(KEY);
+  if (stored === null) {
+    return globalThis.localStorage.getItem(DO_NOT_DISTURB_KEY) === "on"
+      ? {}
+      : undefined;
+  } else {
+    return storedPauseSchema.safeParse(stored).data;
+  }
+};
+
+/** Store `pause` for other pages and future loads, or clear it. */
+export const storePause = (pause: Pause | undefined): void => {
+  globalThis.localStorage.removeItem(DO_NOT_DISTURB_KEY);
+  if (pause === undefined) {
+    globalThis.localStorage.removeItem(KEY);
+  } else {
+    globalThis.localStorage.setItem(KEY, JSON.stringify(pause));
+  }
+};
+
+// Invalid JSON is a parse issue, not a throw, so it is handled like any other
+// invalid value.
+const storedPauseSchema = z
+  .string()
+  .transform((text, context): unknown => {
+    try {
+      return JSON.parse(text);
+    } catch {
+      context.addIssue({ code: "custom", message: "not JSON" });
+      return z.NEVER;
+    }
+  })
+  .pipe(pauseSchema);

package/src/useNotifications.ts

@@ -4,7 +4,10 @@ import type { Domicile } from "@domicile-desktop/sdk/desktop/desktop";
 import type { Notification } from "@domicile-desktop/sdk/notification";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { arrivals } from "./arrivals";
-import { storeDoNotDisturb, storedDoNotDisturb } from "./do-not-disturb";
+import type { PauseLength } from "./pause";
+import { pauseEnd } from "./pause";
+import type { Pause } from "./stored-pause";
+import { storedPause, storePause } from "./stored-pause";
 import { toastTimeout } from "./toast-timeout";
 
 export type NotificationCenter = {
@@ -23,9 +26,13 @@ export type NotificationCenter = {
   invoke: (id: number, action: string) => void;
   /** Send `text` from `id`'s reply field. */
   reply: (id: number, text: string) => void;
-  /** Holds back every toast but a critical one. Kept through a reload. */
-  doNotDisturb: boolean;
-  setDoNotDisturb: (on: boolean) => void;
+  /**
+   * Holds back every toast but a critical one, or `undefined` while not
+   * paused. Kept through a reload.
+   */
+  pause: Pause | undefined;
+  pauseFor: (length: PauseLength) => void;
+  resume: () => void;
 };
 
 /** The notifications and how far the user has read. */
@@ -49,14 +56,22 @@ type Desk = {
  *
  * A toast only interrupts. Closing it or timing out leaves the notification in
  * place. Clearing the notification (on any page) or its application closing it
- * removes the toast too. Do not disturb holds back every toast but a critical
- * one; the notifications still collect. See docs/architecture/NOTIFICATIONS.md.
+ * removes the toast too. A pause holds back every toast but a critical one;
+ * the notifications still collect. A timed pause ends by itself. See
+ * docs/architecture/NOTIFICATIONS.md.
  */
 export const useNotifications = (
   domicile: Pick<Domicile, "notifications">,
   toasts: ToastManager,
   /** The senders `unread` leaves out, by `appName`, such as the inboxes'. */
   uncounted: readonly string[],
+  /**
+   * The browser windows whose pages' notifications are cleared as they
+   * arrive, unshown, because another sends the same news: an inbox's window,
+   * when the inbox notifies its mail itself.
+   */
+  replaced: readonly string[],
+  clock: typeof wallClock = wallClock,
 ): NotificationCenter => {
   const [desk, setDesk] = useState<Desk>({
     items: [],
@@ -65,12 +80,22 @@ export const useNotifications = (
   // The last list received, for `arrivals`. A ref because it is only used in
   // the handler, not for rendering.
   const told = useRef<readonly Notification[] | undefined>(undefined);
-  const [doNotDisturb, setQuiet] = useState(storedDoNotDisturb);
+  const [pause, setPause] = useState(() => unended(storedPause(), clock()));
   // Read by the handler, which subscribes once.
-  const quiet = useRef(doNotDisturb);
+  const quiet = useRef(pause !== undefined);
 
   useEffect(() => {
-    const heard = (items: readonly Notification[]) => {
+    const heard = (sent: readonly Notification[]) => {
+      const duplicates = sent
+        .filter(
+          ({ browserWindow }) =>
+            browserWindow !== undefined && replaced.includes(browserWindow),
+        )
+        .map(({ id }) => id);
+      if (duplicates.length > 0) {
+        domicile.notifications.dismiss(duplicates);
+      }
+      const items = sent.filter(({ id }) => !duplicates.includes(id));
       for (const arrived of arrivals(told.current, items).filter(
         ({ urgency }) => !quiet.current || urgency === "critical",
       )) {
@@ -100,18 +125,42 @@ export const useNotifications = (
       () => notifications.list,
       heard,
     );
-  }, [domicile, toasts]);
+  }, [domicile, replaced, toasts]);
 
   const read = useCallback(() => {
     setDesk((previous) => ({ ...previous, readUpTo: latest(previous.items) }));
   }, []);
 
-  const setDoNotDisturb = useCallback((on: boolean) => {
-    quiet.current = on;
-    storeDoNotDisturb(on);
-    setQuiet(on);
+  const pauseAs = useCallback((next: Pause | undefined) => {
+    quiet.current = next !== undefined;
+    storePause(next);
+    setPause(next);
   }, []);
 
+  const pauseFor = useCallback(
+    (length: PauseLength) => {
+      const until = pauseEnd(length, clock());
+      pauseAs(until === undefined ? {} : { until });
+    },
+    [clock, pauseAs],
+  );
+
+  const resume = useCallback(() => {
+    pauseAs(undefined);
+  }, [pauseAs]);
+
+  const until = pause?.until;
+  useEffect(() => {
+    if (until === undefined) {
+      return undefined;
+    } else {
+      const timer = setTimeout(resume, until - clock());
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [clock, resume, until]);
+
   const dismiss = useCallback(
     (ids: readonly number[]) => {
       domicile.notifications.dismiss(ids);
@@ -135,12 +184,13 @@ export const useNotifications = (
 
   return {
     dismiss,
-    doNotDisturb,
     invoke,
     items: desk.items.toReversed(),
+    pause,
+    pauseFor,
     read,
     reply,
-    setDoNotDisturb,
+    resume,
     unread: desk.items.filter(
       ({ appName, time }) =>
         time > (desk.readUpTo ?? 0) && !uncounted.includes(appName),
@@ -148,6 +198,13 @@ export const useNotifications = (
   };
 };
 
+/** The wall clock in ms since the epoch; injected so tests can control it. */
+const wallClock = (): number => Date.now();
+
+/** `pause`, unless it ended by `now`. */
+const unended = (pause: Pause | undefined, now: number): Pause | undefined =>
+  pause?.until !== undefined && pause.until <= now ? undefined : pause;
+
 /** The newest `time` in `items`, or `0` for none. */
 const latest = (items: readonly Notification[]): number =>
   Math.max(0, ...items.map(({ time }) => time));

package/styled-system/patterns/aspect-ratio.mjs

@@ -3,11 +3,11 @@ import { css } from '../css/index.mjs';
 
 const aspectRatioConfig = {
 transform(props, { map }) {
-  const { ratio = 4 / 3, ...rest } = props;
+  const { ratio = 1.3333333333333333, ...rest } = props;
   return {
     position: "relative",
     _before: {
-      content: `""`,
+      content: '""',
       display: "block",
       height: "0",
       paddingBottom: map(ratio, (r) => `${1 / r * 100}%`)

package/styled-system/patterns/bleed.mjs

@@ -3,8 +3,7 @@ import { css } from '../css/index.mjs';
 
 const bleedConfig = {
 transform(props, { map, isCssUnit, isCssVar }) {
-  const { inline, block, ...rest } = props;
-  const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
+  const { inline, block, ...rest } = props, valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
   return {
     "--bleed-x": map(inline, valueFn),
     "--bleed-y": map(block, valueFn),

package/styled-system/patterns/float.mjs

@@ -11,28 +11,22 @@ transform(props, { map }) {
     position: "absolute",
     insetBlockStart: map(placement, (v) => {
       const [side] = v.split("-");
-      const map2 = { top: offsetY, middle: "50%", bottom: "auto" };
-      return map2[side];
+      return { top: offsetY, middle: "50%", bottom: "auto" }[side];
     }),
     insetBlockEnd: map(placement, (v) => {
       const [side] = v.split("-");
-      const map2 = { top: "auto", middle: "50%", bottom: offsetY };
-      return map2[side];
+      return { top: "auto", middle: "50%", bottom: offsetY }[side];
     }),
     insetInlineStart: map(placement, (v) => {
       const [, align] = v.split("-");
-      const map2 = { start: offsetX, center: "50%", end: "auto" };
-      return map2[align];
+      return { start: offsetX, center: "50%", end: "auto" }[align];
     }),
     insetInlineEnd: map(placement, (v) => {
       const [, align] = v.split("-");
-      const map2 = { start: "auto", center: "50%", end: offsetX };
-      return map2[align];
+      return { start: "auto", center: "50%", end: offsetX }[align];
     }),
     translate: map(placement, (v) => {
-      const [side, align] = v.split("-");
-      const mapX = { start: "-50%", center: "-50%", end: "50%" };
-      const mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
+      const [side, align] = v.split("-"), mapX = { start: "-50%", center: "-50%", end: "50%" }, mapY = { top: "-50%", middle: "-50%", bottom: "50%" };
       return `${mapX[align]} ${mapY[side]}`;
     }),
     ...rest

package/styled-system/patterns/grid-item.mjs

@@ -3,8 +3,7 @@ import { css } from '../css/index.mjs';
 
 const gridItemConfig = {
 transform(props, { map }) {
-  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props;
-  const spanFn = (v) => v === "auto" ? v : `span ${v}`;
+  const { colSpan, rowSpan, colStart, rowStart, colEnd, rowEnd, ...rest } = props, spanFn = (v) => v === "auto" ? v : `span ${v}`;
   return {
     gridColumn: colSpan != null ? map(colSpan, spanFn) : void 0,
     gridRow: rowSpan != null ? map(rowSpan, spanFn) : void 0,

package/styled-system/patterns/grid.mjs

@@ -3,8 +3,7 @@ import { css } from '../css/index.mjs';
 
 const gridConfig = {
 transform(props, { map, isCssUnit }) {
-  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props;
-  const getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
+  const { columnGap, rowGap, gap, columns, minChildWidth, ...rest } = props, getValue = (v) => isCssUnit(v) ? v : `token(sizes.${v}, ${v})`;
   return {
     display: "grid",
     gridTemplateColumns: columns != null ? map(columns, (v) => `repeat(${v}, minmax(0, 1fr))`) : minChildWidth != null ? map(minChildWidth, (v) => `repeat(auto-fit, minmax(${getValue(v)}, 1fr))`) : void 0,

package/styled-system/patterns/link-overlay.mjs

@@ -9,7 +9,7 @@ transform(props) {
       position: "absolute",
       inset: "0",
       zIndex: "0",
-      ...props["_before"]
+      ...props._before
     },
     ...props
   };

package/styled-system/patterns/spacer.mjs

@@ -8,9 +8,9 @@ transform(props, { map, isCssUnit, isCssVar }) {
     alignSelf: "stretch",
     justifySelf: "stretch",
     flex: map(size, (v) => {
-      if (v == null) return "1";
-      const val = isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
-      return `0 0 ${val}`;
+      if (v == null)
+        return "1";
+      return `0 0 ${isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`}`;
     }),
     ...rest
   };