@domicile-desktop/component-library 0.0.0-alpha-dba9bdbd1f1d → 0.0.0-alpha-44d0983a58ce

package/README.md

@@ -22,6 +22,7 @@ Each export is `@domicile-desktop/component-library/<name>`.
 | `Avatar` | Avatar with an initials or gradient fallback. |
 | `Button` | Button or link, with variants and sizes. |
 | `Card` | Raised surface with optional title and footer. |
+| `ChoiceRow` | Rows of a pick list, with icon, name and detail, framed while picked: `RadioRow` in `ChoiceList` for one, `CheckboxRow` for several. Take the panel's white text in an `overPhoto` popover. |
 | `Drilldown` | View that slides a second panel in from the side, with a back button. |
 | `Field` | Label, control and validation message. |
 | `FilePicker` | Keyboard-first file picker over its positioned parent. |

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-dba9bdbd1f1d",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-dba9bdbd1f1d",
+    "@domicile-desktop/sdk": "0.0.0-alpha-44d0983a58ce",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-44d0983a58ce",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -41,6 +41,7 @@
     "./appearance": "./src/ThemeSwitch/appearance.ts",
     "./Button": "./src/Button/Button.tsx",
     "./Card": "./src/Card/Card.tsx",
+    "./ChoiceRow": "./src/ChoiceRow/ChoiceRow.tsx",
     "./ContextMenu": "./src/ContextMenu/ContextMenu.tsx",
     "./control-sizes": "./src/control-sizes.ts",
     "./DisplayProvider": "./src/Screen/DisplayProvider.tsx",
@@ -116,5 +117,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-dba9bdbd1f1d"
+  "version": "0.0.0-alpha-44d0983a58ce"
 }

package/src/ChoiceRow/ChoiceRow.tsx

@@ -0,0 +1,124 @@
+import { Checkbox } from "@base-ui/react/checkbox";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+import type { ReactNode } from "react";
+
+import { css } from "../../styled-system/css";
+import { flex } from "../../styled-system/patterns";
+import type { ExtendProps } from "../extend-props";
+
+/** What a row shows: `icon`, then `name` over `detail`. */
+type Content = {
+  detail?: string | undefined;
+  icon: ReactNode;
+  name: string;
+};
+
+type RadioRowProps = ExtendProps<typeof Radio.Root, Content>;
+
+/**
+ * A row of a list that picks one thing, framed in the accent color while
+ * picked. Goes in a `RadioGroup`, such as `ChoiceList`. The screenshot
+ * picker's rows are these.
+ */
+export const RadioRow = ({ detail, icon, name, ...props }: RadioRowProps) => (
+  <Radio.Root {...props} className={rowStyles}>
+    <RowContent detail={detail} icon={icon} name={name} />
+  </Radio.Root>
+);
+
+type CheckboxRowProps = ExtendProps<typeof Checkbox.Root, Content>;
+
+/**
+ * A row of a list that picks several things, framed like {@link RadioRow}.
+ * Goes in a `CheckboxGroup`.
+ */
+export const CheckboxRow = ({
+  detail,
+  icon,
+  name,
+  ...props
+}: CheckboxRowProps) => (
+  <Checkbox.Root {...props} className={rowStyles}>
+    <RowContent detail={detail} icon={icon} name={name} />
+  </Checkbox.Root>
+);
+
+type ChoiceListProps<Value> = ExtendProps<typeof RadioGroup<Value>>;
+
+/** A column of {@link RadioRow}s, one of which is picked. */
+export const ChoiceList = <Value,>(props: ChoiceListProps<Value>) => (
+  <RadioGroup<Value> {...props} className={listStyles} />
+);
+
+const RowContent = ({ detail, icon, name }: Content) => (
+  <>
+    {icon}
+    <span className={textStyles}>
+      <span className={nameStyles}>{name}</span>
+      {detail !== undefined && <span className={detailStyles}>{detail}</span>}
+    </span>
+  </>
+);
+
+const listStyles = flex({ direction: "column", gap: 1 });
+
+// Over the wallpaper, as in a bar's popover, the rows take the panel's white
+// text, since `foreground` and `muted` follow the theme and the panel does not.
+const rowStyles = css({
+  _checked: {
+    backgroundColor: "color-mix(in oklab, {colors.accent} 20%, transparent)",
+    borderColor: "accent",
+  },
+  _hoverEnabled: {
+    backgroundColor: "color-mix(in oklab, {colors.foreground} 6%, transparent)",
+  },
+  "[data-tone=overPhoto] &": {
+    "& > :is(svg, img)": { color: "inherit", opacity: 0.75 },
+    "&:hover:not([data-checked])": {
+      backgroundColor: "color-mix(in oklab, currentcolor 12%, transparent)",
+    },
+    color: "inherit",
+  },
+  "& > :is(svg, img)": {
+    blockSize: 5,
+    color: "muted",
+    flexShrink: 0,
+    inlineSize: 5,
+  },
+  alignItems: "center",
+  backgroundColor: "transparent",
+  border: "1px solid transparent",
+  borderRadius: "md",
+  color: "foreground",
+  cursor: "pointer",
+  display: "flex",
+  flexShrink: 0,
+  font: "inherit",
+  gap: 2.5,
+  minInlineSize: 0,
+  paddingBlock: 1.5,
+  paddingInline: 2.5,
+  textAlign: "start",
+  transition: "background-color {durations.fast} {easings.out}",
+});
+
+const textStyles = flex({ direction: "column", minInlineSize: 0 });
+
+// The bar's popovers keep their smaller text.
+const nameStyles = css({
+  "[data-tone=overPhoto] &": { fontSize: "inherit" },
+  fontSize: "sm",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+const detailStyles = css({
+  "[data-tone=overPhoto] &": { color: "inherit", opacity: 0.75 },
+  color: "muted",
+  fontSize: "xs",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});

package/src/LevelToast/LevelToast.tsx

@@ -28,7 +28,65 @@ type Props = {
  * `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) => {
+export const LevelToast = ({ changes, icon, label, level, muted }: Props) => (
+  <HeldToast
+    changes={changes}
+    icon={icon}
+    label={label}
+    muted={muted}
+    value={muted ? "Muted" : `${String(Math.round(level * 100))}%`}
+  >
+    <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}
+    />
+  </HeldToast>
+);
+
+type ChoiceProps = Pick<Props, "changes" | "icon" | "label"> & {
+  /** What was chosen, such as a keymap's name. */
+  choice: string;
+  /** A line under the label saying more of it, if any. */
+  detail?: string | undefined;
+};
+
+/**
+ * A toast like {@link LevelToast} naming a choice just made, such as the
+ * keymap a key switched to, with no meter.
+ */
+export const ChoiceToast = ({
+  changes,
+  choice,
+  detail,
+  icon,
+  label,
+}: ChoiceProps) => (
+  <HeldToast
+    changes={changes}
+    icon={icon}
+    label={label}
+    muted={false}
+    value={choice}
+  >
+    {detail !== undefined && <span className={detailStyles}>{detail}</span>}
+  </HeldToast>
+);
+
+/** The held, fading card both toasts are, with `children` under the label. */
+const HeldToast = ({
+  changes,
+  children,
+  icon,
+  label,
+  muted,
+  value,
+}: Omit<Props, "level"> & { children?: ReactNode; value: string }) => {
   const [goneAfter, setGoneAfter] = useState<number | undefined>();
 
   return goneAfter === changes ? undefined : (
@@ -49,20 +107,9 @@ export const LevelToast = ({ changes, icon, label, level, muted }: Props) => {
         <span className={readoutStyles}>
           <span className={labelRowStyles}>
             <span>{label}</span>
-            <span className={valueStyles}>
-              {muted ? "Muted" : `${String(Math.round(level * 100))}%`}
-            </span>
+            <span className={valueStyles}>{value}</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}
-          />
+          {children}
         </span>
       </span>
     </output>
@@ -112,7 +159,7 @@ const readoutStyles = css({
   display: "flex",
   flex: 1,
   flexDirection: "column",
-  gap: 2.5,
+  gap: 0.5,
   minInlineSize: 0,
 });
 
@@ -147,6 +194,15 @@ const meterStyles = css({
   backgroundColor: "color-mix(in oklab, {colors.foreground} 14%, transparent)",
   blockSize: 2,
   borderRadius: "full",
+  marginBlockStart: 2,
   overflow: "hidden",
   position: "relative",
 });
+
+const detailStyles = css({
+  color: "muted",
+  fontSize: "sm",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});

package/src/PortalDialogs/SourcePicker.tsx

@@ -1,6 +1,4 @@
-import { Checkbox } from "@base-ui/react/checkbox";
 import { CheckboxGroup } from "@base-ui/react/checkbox-group";
-import { Radio } from "@base-ui/react/radio";
 import { RadioGroup } from "@base-ui/react/radio-group";
 import type { Result } from "@cprussin/option-result";
 import type { FrozenDesk, ShotRect } from "@domicile-desktop/sdk/portal";
@@ -10,6 +8,7 @@ import type { CSSProperties, PointerEvent, ReactNode } from "react";
 import { useState } from "react";
 import { css } from "../../styled-system/css";
 import { center, flex } from "../../styled-system/patterns";
+import { CheckboxRow, RadioRow } from "../ChoiceRow/ChoiceRow";
 import type { FramePoint } from "./frame-point";
 import { draggedArea, framePoint } from "./frame-point";
 import type { DrawPreview } from "./useWindowPreview";
@@ -254,32 +253,24 @@ const Row = ({
   choice: Choice;
   index: number;
   multiple: boolean;
-}) => {
-  const content = (
-    <>
-      {choice.icon}
-      <span className={rowTextStyles}>
-        <span className={rowNameStyles}>{choice.name}</span>
-        {choice.detail !== undefined && (
-          <span className={rowDetailStyles}>{choice.detail}</span>
-        )}
-      </span>
-    </>
-  );
-  return multiple ? (
-    <Checkbox.Root
+}) =>
+  multiple ? (
+    <CheckboxRow
       aria-label={choice.label}
-      className={rowStyles}
+      detail={choice.detail}
+      icon={choice.icon}
+      name={choice.name}
       value={String(index)}
-    >
-      {content}
-    </Checkbox.Root>
+    />
   ) : (
-    <Radio.Root aria-label={choice.label} className={rowStyles} value={index}>
-      {content}
-    </Radio.Root>
+    <RadioRow
+      aria-label={choice.label}
+      detail={choice.detail}
+      icon={choice.icon}
+      name={choice.name}
+      value={index}
+    />
   );
-};
 
 /**
  * A window drawn alone from `src`, fitted in `box`. With `onDrag`, a part of
@@ -475,54 +466,6 @@ const sectionLabelStyles = css({
   textTransform: "uppercase",
 });
 
-const rowStyles = css({
-  _checked: {
-    backgroundColor: "color-mix(in oklab, {colors.accent} 20%, transparent)",
-    borderColor: "accent",
-  },
-  _hoverEnabled: {
-    backgroundColor: "color-mix(in oklab, {colors.foreground} 6%, transparent)",
-  },
-  "& > :is(svg, img)": {
-    blockSize: 5,
-    color: "muted",
-    flexShrink: 0,
-    inlineSize: 5,
-  },
-  alignItems: "center",
-  backgroundColor: "transparent",
-  border: "1px solid transparent",
-  borderRadius: "md",
-  color: "foreground",
-  cursor: "pointer",
-  display: "flex",
-  flexShrink: 0,
-  font: "inherit",
-  gap: 2.5,
-  minInlineSize: 0,
-  paddingBlock: 1.5,
-  paddingInline: 2.5,
-  textAlign: "start",
-  transition: "background-color {durations.fast} {easings.out}",
-});
-
-const rowTextStyles = flex({ direction: "column", minInlineSize: 0 });
-
-const rowNameStyles = css({
-  fontSize: "sm",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
-
-const rowDetailStyles = css({
-  color: "muted",
-  fontSize: "xs",
-  overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap",
-});
-
 const stageStyles = flex({
   align: "center",
   backgroundColor: "background",