@domicile-desktop/component-library 0.0.0-alpha-e42226f4af44 → 0.0.0-alpha-fff3e247bb02

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-e42226f4af44",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-e42226f4af44",
+    "@domicile-desktop/sdk": "0.0.0-alpha-fff3e247bb02",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-fff3e247bb02",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -52,6 +52,7 @@
     "./folders": "./src/FilePicker/folders.ts",
     "./Input": "./src/Input/Input.tsx",
     "./Kbd": "./src/Kbd/Kbd.tsx",
+    "./LevelToast": "./src/LevelToast/LevelToast.tsx",
     "./list-walk": "./src/list-walk.ts",
     "./ModalDialog": "./src/ModalDialog/ModalDialog.tsx",
     "./media-theme-source": "./src/ThemeSwitch/media-theme-source.ts",
@@ -115,5 +116,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-e42226f4af44"
+  "version": "0.0.0-alpha-fff3e247bb02"
 }

package/src/LevelToast/LevelToast.tsx

@@ -0,0 +1,152 @@
+import type { CSSProperties, ReactNode } from "react";
+import { useState } from "react";
+import { css } from "../../styled-system/css";
+import { circle, hstack } from "../../styled-system/patterns";
+
+type Props = {
+  /**
+   * How many times the level changed. A new count keeps the toast up for
+   * another full hold, or shows it again once it has gone.
+   */
+  changes: number;
+  /** Drawn large before the label. */
+  icon: ReactNode;
+  /** What the level is of, such as "Volume". */
+  label: string;
+  /** From 0 to 1. */
+  level: number;
+  /** Says "Muted" and grays the meter, such as for muted audio. */
+  muted: boolean;
+};
+
+/**
+ * A large toast showing a level, such as volume or brightness, that fades out
+ * a moment after its last change.
+ *
+ * A change while it is up updates it in place and starts the hold over, so
+ * holding a key does not replay its entrance. It hides on its own
+ * `animationend`, not a timer, so the duration lives only in the stylesheet.
+ * The caller positions it; it ignores the pointer.
+ */
+export const LevelToast = ({ changes, icon, label, level, muted }: Props) => {
+  const [goneAfter, setGoneAfter] = useState<number | undefined>();
+
+  return goneAfter === changes ? undefined : (
+    <output
+      className={toastStyles}
+      // Alternates the fade-out between two copies of one keyframe, so the
+      // browser restarts it while the entrance, unchanged, does not replay.
+      data-again={changes % 2 === 0 ? "" : undefined}
+      data-muted={muted ? "" : undefined}
+      onAnimationEnd={(event) => {
+        if (event.target === event.currentTarget) {
+          setGoneAfter(changes);
+        }
+      }}
+    >
+      <span className={panelStyles}>
+        <span className={iconStyles}>{icon}</span>
+        <span className={readoutStyles}>
+          <span className={labelRowStyles}>
+            <span>{label}</span>
+            <span className={valueStyles}>
+              {muted ? "Muted" : `${String(Math.round(level * 100))}%`}
+            </span>
+          </span>
+          <span
+            aria-valuemax={100}
+            aria-valuemin={0}
+            aria-valuenow={Math.round(level * 100)}
+            className={meterStyles}
+            data-muted={muted ? "" : undefined}
+            role="meter"
+            // Inline because the level is a runtime value Panda cannot extract.
+            style={{ "--level-toast-level": level } as CSSProperties}
+          />
+        </span>
+      </span>
+    </output>
+  );
+};
+
+// Holds, then fades the whole toast out.
+const toastStyles = css({
+  "&[data-again]": {
+    animationName: "levelToastHoldAgain",
+  },
+  animation: "levelToastHold {durations.levelToast} {easings.linear} forwards",
+  display: "block",
+  pointerEvents: "none",
+});
+
+// Rises in once per showing. A frosted card like `Toaster`'s.
+const panelStyles = hstack({
+  animation: "levelToastEnter {durations.normal} {easings.outQuart}",
+  backdropFilter: "blur({spacing.4}) saturate(160%)",
+  backgroundColor: "color-mix(in oklab, {colors.card} 85%, transparent)",
+  border: "1px solid color-mix(in oklab, {colors.foreground} 12%, transparent)",
+  borderRadius: "3xl",
+  boxShadow: "lifted",
+  color: "foreground",
+  gap: 4,
+  inlineSize: 88,
+  paddingBlock: 4,
+  paddingInline: 5,
+});
+
+const iconStyles = circle({
+  "[data-muted] &": {
+    backgroundColor:
+      "color-mix(in oklab, {colors.foreground} 10%, transparent)",
+    color: "muted",
+  },
+  backgroundColor: "color-mix(in oklab, {colors.accent} 18%, transparent)",
+  color: "accent",
+  flexShrink: 0,
+  size: 12,
+  transition:
+    "color {durations.fast} {easings.out}, background-color {durations.fast} {easings.out}",
+});
+
+const readoutStyles = css({
+  display: "flex",
+  flex: 1,
+  flexDirection: "column",
+  gap: 2.5,
+  minInlineSize: 0,
+});
+
+const labelRowStyles = hstack({
+  fontSize: "md",
+  fontWeight: "medium",
+  justify: "space-between",
+});
+
+const valueStyles = css({
+  fontVariantNumeric: "tabular-nums",
+  fontWeight: "semibold",
+});
+
+// A track filled from the start edge. The fill eases to each new level, which
+// shows while a key is held.
+const meterStyles = css({
+  "&::after": {
+    backgroundColor: "accent",
+    borderRadius: "full",
+    content: '""',
+    inlineSize: "calc(var(--level-toast-level) * 100%)",
+    insetBlock: 0,
+    insetInlineStart: 0,
+    position: "absolute",
+    transition:
+      "inline-size {durations.fast} {easings.out}, background-color {durations.fast} {easings.out}",
+  },
+  "&[data-muted]::after": {
+    backgroundColor: "muted",
+  },
+  backgroundColor: "color-mix(in oklab, {colors.foreground} 14%, transparent)",
+  blockSize: 2,
+  borderRadius: "full",
+  overflow: "hidden",
+  position: "relative",
+});

package/src/pandacss-preset.ts

@@ -25,6 +25,13 @@ const quarterStepSpacing = Object.fromEntries(
   ),
 );
 
+// `LevelToast` holds, then fades out over the last fifth.
+const levelToastHold = {
+  "0%": { opacity: "1" },
+  "80%": { opacity: "1" },
+  "100%": { opacity: "0" },
+};
+
 export const domicilePreset = definePreset({
   conditions: {
     extend: {
@@ -153,6 +160,18 @@ export const domicilePreset = definePreset({
   theme: {
     extend: {
       keyframes: {
+        // `LevelToast`'s entrance, once per showing.
+        levelToastEnter: {
+          "0%": {
+            opacity: "0",
+            transform: "translateY({spacing.3}) scale(0.96)",
+          },
+          "100%": { opacity: "1", transform: "none" },
+        },
+        // `LevelToast`'s hold and fade-out. Two copies so a change can
+        // restart it by switching names.
+        levelToastHold,
+        levelToastHoldAgain: levelToastHold,
         // `Notice`: appears quickly, holds long enough to read, then fades
         // out on its own.
         noticeShown: {
@@ -405,6 +424,8 @@ export const domicilePreset = definePreset({
         durations: {
           // Wallpaper crossfade. Long because nothing waits on it.
           crossfade: { value: "2s" },
+          // How long a `LevelToast` stays up after its last change.
+          levelToast: { value: "2s" },
           // How long a `Notice` stays up. Longer than the scale above, which
           // is for control feedback, not reading.
           notice: { value: "1.5s" },

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";
+	animationName: "ping" | "bounce" | "levelToastEnter" | "levelToastHold" | "levelToastHoldAgain" | "noticeShown" | "pulse" | "spin" | "themeSwipeFromBottom" | "themeSwipeFromTop" | "toastCountdown";
 	animationTimingFunction: Tokens["easings"];
 	animationDuration: Tokens["durations"];
 	animationDelay: Tokens["durations"];