@domicile-desktop/manganese 0.0.0-alpha-e42226f4af44 → 0.0.0-alpha-cd02e0ec1fbc

package/package.json

@@ -1,30 +1,30 @@
 {
   "dependencies": {
-    "@domicile-desktop/component-library": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-battery": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-bluetooth": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-brightness": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-clock": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-gmail": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-google-messages": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-idle-inhibitor": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-launcher-button": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-network": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-notifications": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-sharing": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-theme-switch": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-tray": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-volume": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-bar-module-workspace-switcher": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-clipboard": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-host": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-launcher": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-lock": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-notifications": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-wallpaper": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/manganese-window-management": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/sdk": "0.0.0-alpha-e42226f4af44",
+    "@domicile-desktop/component-library": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-battery": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-bluetooth": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-brightness": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-clock": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-gmail": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-google-messages": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-idle-inhibitor": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-launcher-button": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-network": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-notifications": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-sharing": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-theme-switch": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-tray": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-volume": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-bar-module-workspace-switcher": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-clipboard": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-host": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-launcher": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-lock": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-notifications": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-wallpaper": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/manganese-window-management": "0.0.0-alpha-cd02e0ec1fbc",
+    "@domicile-desktop/sdk": "0.0.0-alpha-cd02e0ec1fbc",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10",
     "react": "^19.2.8",
@@ -95,5 +95,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-e42226f4af44"
+  "version": "0.0.0-alpha-cd02e0ec1fbc"
 }

package/src/Desktop.tsx

@@ -267,7 +267,6 @@ export const Desktop = ({
 
   const volumeKeys = useVolumeKeys(deskSound(domicile));
   const brightnessKeys = useBrightnessKeys(deskBacklight(domicile));
-  // The level the last media key set, counted so each press shows it again.
   // How many bar items' panels hold the keyboard; see `useKeepsKeyboard`.
   const [heldPanels, setHeldPanels] = useState(0);
   const holdKeyboard = useCallback(() => {
@@ -277,6 +276,7 @@ export const Desktop = ({
     };
   }, []);
 
+  // The level the last media key set, counted so each press keeps it up.
   const [levelPress, setLevelPress] = useState<LevelPress | undefined>();
   // Once for the desk, so a portal's sign-in page opens once, not per bar.
   const portal = useCaptivePortal(domicile);

package/src/LevelNotice.tsx

@@ -1,10 +1,10 @@
 import { useScreenRegion } from "@domicile-desktop/component-library/DisplayProvider";
-import { Notice } from "@domicile-desktop/component-library/Notice";
-import { LightbulbIcon } from "@phosphor-icons/react/dist/ssr/Lightbulb";
+import { LevelToast } from "@domicile-desktop/component-library/LevelToast";
 import { MicrophoneIcon } from "@phosphor-icons/react/dist/ssr/Microphone";
 import { MicrophoneSlashIcon } from "@phosphor-icons/react/dist/ssr/MicrophoneSlash";
 import { SpeakerHighIcon } from "@phosphor-icons/react/dist/ssr/SpeakerHigh";
 import { SpeakerSlashIcon } from "@phosphor-icons/react/dist/ssr/SpeakerSlash";
+import { SunIcon } from "@phosphor-icons/react/dist/ssr/Sun";
 import { css } from "../styled-system/css";
 import type { KeyLevel } from "./media-keys";
 import { LevelKind } from "./media-keys";
@@ -21,7 +21,7 @@ type Props = {
 
 /**
  * A notice at the bottom of `screen` with the level a volume, microphone or
- * brightness key set. Each press shows it again.
+ * brightness key set. Presses while it is up update it in place.
  */
 export const LevelNotice = ({ press, screen }: Props) =>
   press === undefined ? undefined : <Shown press={press} screen={screen} />;
@@ -33,16 +33,13 @@ const Shown = ({
   const region = useScreenRegion(screen);
   return (
     <div className={screenStyles} style={region}>
-      <Notice
+      <LevelToast
+        changes={count}
         icon={<Icon level={level} />}
-        key={count}
+        label={NAMES[level.kind]}
         level={level.level}
         muted={level.muted}
-      >
-        {level.muted
-          ? `${NAMES[level.kind]} muted`
-          : `${NAMES[level.kind]} ${String(Math.round(level.level * 100))}%`}
-      </Notice>
+      />
     </div>
   );
 };
@@ -57,29 +54,29 @@ const Icon = ({ level: { kind, muted } }: { level: KeyLevel }) => {
   switch (kind) {
     case LevelKind.Volume:
       return muted ? (
-        <SpeakerSlashIcon size={16} weight="bold" />
+        <SpeakerSlashIcon size={28} weight="fill" />
       ) : (
-        <SpeakerHighIcon size={16} weight="bold" />
+        <SpeakerHighIcon size={28} weight="fill" />
       );
     case LevelKind.Microphone:
       return muted ? (
-        <MicrophoneSlashIcon size={16} weight="bold" />
+        <MicrophoneSlashIcon size={28} weight="fill" />
       ) : (
-        <MicrophoneIcon size={16} weight="bold" />
+        <MicrophoneIcon size={28} weight="fill" />
       );
     case LevelKind.Brightness:
-      return <LightbulbIcon size={16} weight="bold" />;
+      return <SunIcon size={28} weight="fill" />;
   }
 };
 
 // The screen's box, over windows and under panels like the toasts. Ignores the
-// pointer so windows under it stay clickable. The notice sits centered near
+// pointer so windows under it stay clickable. The toast sits centered near
 // its bottom edge.
 const screenStyles = css({
   alignItems: "flex-end",
   display: "flex",
   justifyContent: "center",
-  paddingBlockEnd: 16,
+  paddingBlockEnd: 20,
   pointerEvents: "none",
   position: "fixed",
   zIndex: "toast",

package/styled-system/styles.css

@@ -645,6 +645,7 @@
     --goNNlj: 400ms;
     --bPXfWW: 500ms;
     --gXQUBH: 2s;
+    --gbbHhs: 2s;
     --infmmp: 1.5s;
     --YdYTw: 1.5s;
     --hmxuxv: 1s;
@@ -8758,6 +8759,46 @@
       transform: none;
       animation-timing-function: cubic-bezier(0,0,0.2,1);
 }
+}
+
+  @keyframes levelToastEnter {
+    0% {
+      opacity: 0;
+      transform: translateY(var(--bYDCFo)) scale(0.96);
+}
+
+    100% {
+      opacity: 1;
+      transform: none;
+}
+}
+
+  @keyframes levelToastHold {
+    0% {
+      opacity: 1;
+}
+
+    80% {
+      opacity: 1;
+}
+
+    100% {
+      opacity: 0;
+}
+}
+
+  @keyframes levelToastHoldAgain {
+    0% {
+      opacity: 1;
+}
+
+    80% {
+      opacity: 1;
+}
+
+    100% {
+      opacity: 0;
+}
 }
 
   @keyframes noticeShown {
@@ -9336,6 +9377,18 @@
     border: 1px solid var(--gpZwKP);
 }
 
+  .jhbvWn {
+    animation: levelToastHold var(--gbbHhs) var(--hgfxJf) forwards;
+}
+
+  .jnvoSv {
+    animation: levelToastEnter var(--cWTXGg) var(--epyuyH);
+}
+
+  .bHTUDa {
+    border: 1px solid color-mix(in oklab, var(--cekHuD) 12%, transparent);
+}
+
   .ehNXVq {
     animation: noticeShown var(--infmmp) var(--byCBno) forwards;
 }
@@ -9368,10 +9421,6 @@
     background: var(--edNtiq);
 }
 
-  .bHTUDa {
-    border: 1px solid color-mix(in oklab, var(--cekHuD) 12%, transparent);
-}
-
   .fGTDRl {
     grid-area: 1 / 1;
 }
@@ -9764,6 +9813,26 @@
     padding-block: 0.1em;
 }
 
+  .kdFIjO {
+    flex: 1 1 0%;
+}
+
+  .otyQb {
+    border-radius: var(--eougbK);
+}
+
+  .fzoqgp {
+    padding-block: var(--hIimNX);
+}
+
+  .jrIcfy {
+    gap: 8px;
+}
+
+  .cuEhAh {
+    transition: color var(--mUhz) var(--byCBno), background-color var(--mUhz) var(--byCBno);
+}
+
   .ekHZUr {
     padding-block: 4vh;
 }
@@ -9784,10 +9853,6 @@
     margin-inline: auto;
 }
 
-  .kdFIjO {
-    flex: 1 1 0%;
-}
-
   .kwxavi {
     border-color: var(--bfwRxC);
 }
@@ -9844,10 +9909,6 @@
     padding-block: var(--kYLwfq);
 }
 
-  .cuEhAh {
-    transition: color var(--mUhz) var(--byCBno), background-color var(--mUhz) var(--byCBno);
-}
-
   .DMPvD {
     transition: transform var(--cWTXGg) var(--brELmP), inline-size var(--cWTXGg) var(--brELmP);
 }
@@ -9968,10 +10029,6 @@
     padding-block: var(--dkVAHH);
 }
 
-  .jrIcfy {
-    gap: 8px;
-}
-
   .kKYCuT {
     flex: 1 1 0;
 }
@@ -10773,6 +10830,31 @@
     font-size: 0.8em;
 }
 
+  .gNzjdF {
+    background-color: color-mix(in oklab, var(--cekHuD) 14%, transparent);
+}
+
+  .jXZkta {
+    block-size: var(--gsUKim);
+}
+
+  .huLuch {
+    -webkit-backdrop-filter: blur(var(--hIimNX)) saturate(160%);
+    backdrop-filter: blur(var(--hIimNX)) saturate(160%);
+}
+
+  .kSxudW {
+    background-color: color-mix(in oklab, var(--gMwXUQ) 85%, transparent);
+}
+
+  .btULPw {
+    inline-size: var(--qOWrk);
+}
+
+  .hfxbWY {
+    background-color: color-mix(in oklab, var(--bfwRxC) 18%, transparent);
+}
+
   .hdAwi {
     position: fixed;
 }
@@ -11991,10 +12073,6 @@
     border-block-start-width: 0;
 }
 
-  .btULPw {
-    inline-size: var(--qOWrk);
-}
-
   .fdPsHT {
     inset-inline-start: 50%;
 }
@@ -12251,8 +12329,8 @@
     padding-inline-start: calc(var(--eDRUVY) + var(--cqwGG));
 }
 
-  .jHGhKk {
-    padding-block-end: var(--mYCWo);
+  .jShSSF {
+    padding-block-end: var(--jgejxp);
 }
 
   .BENyO {
@@ -12513,14 +12591,22 @@
     gap: var(--cqwGG);
 }
 
-  .jWwyOj[data-surface=glass] {
-    border-color: color-mix(in oklab, var(--cekHuD) 16%, transparent);
-}
-
   .hkQQDF::after {
     border-radius: var(--kkkBVq);
 }
 
+  .iAkYQD::after {
+    inset-block: var(--fcTUxn);
+}
+
+  .kWNXtX::after {
+    transition: inline-size var(--mUhz) var(--byCBno), background-color var(--mUhz) var(--byCBno);
+}
+
+  .jWwyOj[data-surface=glass] {
+    border-color: color-mix(in oklab, var(--cekHuD) 16%, transparent);
+}
+
   .jJeVzO[data-flush] {
     overflow: hidden;
 }
@@ -12821,6 +12907,42 @@
     font-weight: var(--hmvyHR);
 }
 
+  .bLxDOh[data-again] {
+    animation-name: levelToastHoldAgain;
+}
+
+  .gWXEbD::after {
+    background-color: var(--bfwRxC);
+}
+
+  .dMOWAL::after {
+    content: "";
+}
+
+  .ewKbQx::after {
+    inline-size: calc(var(--level-toast-level) * 100%);
+}
+
+  .jPTAfR::after {
+    inset-inline-start: var(--fcTUxn);
+}
+
+  .khtefB::after {
+    position: absolute;
+}
+
+  .fOpHBO[data-muted]::after {
+    background-color: var(--dIlxIZ);
+}
+
+  [data-muted] .UjswK {
+    background-color: color-mix(in oklab, var(--cekHuD) 10%, transparent);
+}
+
+  [data-muted] .eCzaXt {
+    color: var(--dIlxIZ);
+}
+
   .grRles[data-ending-style] {
     transform: translateY(var(--ebuyxV)) scale(0.98);
 }
@@ -12854,18 +12976,6 @@
     background-color: color-mix(in oklab, var(--jEjhje) 45%, transparent);
 }
 
-  .gWXEbD::after {
-    background-color: var(--bfwRxC);
-}
-
-  .dMOWAL::after {
-    content: "";
-}
-
-  .khtefB::after {
-    position: absolute;
-}
-
   .bULiuq::after {
     transform: scaleX(var(--notice-level));
 }
@@ -12874,10 +12984,6 @@
     transform-origin: left;
 }
 
-  .fOpHBO[data-muted]::after {
-    background-color: var(--dIlxIZ);
-}
-
   .eNpcyM[data-ending-style] {
     transform: scale(0.96);
 }

package/styled-system/tokens/index.mjs

@@ -1307,6 +1307,10 @@ const tokens = {
     "value": "2s",
     "variable": "var(--gXQUBH)"
   },
+  "durations.levelToast": {
+    "value": "2s",
+    "variable": "var(--gbbHhs)"
+  },
   "durations.notice": {
     "value": "1.5s",
     "variable": "var(--infmmp)"

package/styled-system/tokens/tokens.d.ts

@@ -27,7 +27,7 @@ export type AnimationToken = "spin" | "ping" | "pulse" | "bounce"
 
 export type BorderWidthToken = "fauxBold"
 
-export type DurationToken = "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest" | "crossfade" | "notice" | "pulse" | "spin" | "wipe"
+export type DurationToken = "fastest" | "faster" | "fast" | "normal" | "slow" | "slower" | "slowest" | "crossfade" | "levelToast" | "notice" | "pulse" | "spin" | "wipe"
 
 export type EasingToken = "default" | "linear" | "in" | "out" | "in-out" | "emphasized" | "outBack" | "outQuart"
 

package/styled-system/types/prop-type.d.ts

@@ -169,7 +169,7 @@ export interface UtilityValues {
 	transitionProperty: "common" | "colors" | "size" | "position" | "background";
 	transition: "all" | "common" | "size" | "position" | "background" | "colors" | "opacity" | "shadow" | "transform";
 	animation: Tokens["animations"];
-	animationName: "ping" | "bounce" | "noticeShown" | "pulse" | "spin" | "themeSwipeFromBottom" | "themeSwipeFromTop" | "toastCountdown" | "backdropHiding" | "backdropShowing" | "windowArrivingFromEnd" | "windowArrivingFromStart" | "windowClosing" | "windowClosingTab" | "windowConcealing" | "windowDropping" | "windowHeldTiled" | "windowLeavingToEnd" | "windowLeavingToStart" | "windowOpening" | "windowOpeningTab" | "windowRestacking" | "windowRestackingAgain" | "windowRestackingDepth" | "windowRestackingDepthAgain" | "windowRevealing" | "windowSending" | "windowStowing" | "equalizer" | "lockRefused" | "lockRefusedAgain" | "chargeFlashing" | "bellRing";
+	animationName: "ping" | "bounce" | "levelToastEnter" | "levelToastHold" | "levelToastHoldAgain" | "noticeShown" | "pulse" | "spin" | "themeSwipeFromBottom" | "themeSwipeFromTop" | "toastCountdown" | "backdropHiding" | "backdropShowing" | "windowArrivingFromEnd" | "windowArrivingFromStart" | "windowClosing" | "windowClosingTab" | "windowConcealing" | "windowDropping" | "windowHeldTiled" | "windowLeavingToEnd" | "windowLeavingToStart" | "windowOpening" | "windowOpeningTab" | "windowRestacking" | "windowRestackingAgain" | "windowRestackingDepth" | "windowRestackingDepthAgain" | "windowRevealing" | "windowSending" | "windowStowing" | "equalizer" | "lockRefused" | "lockRefusedAgain" | "chargeFlashing" | "bellRing";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];