@domicile-desktop/component-library 0.0.0-alpha-77fd63181766 → 0.0.0-alpha-7a29c8f7f7ea

package/README.md

@@ -26,6 +26,7 @@ Each export is `@domicile-desktop/component-library/<name>`.
 | `CountBadge` | Unread count in an accent pill, pinned to the corner of its positioned parent, or `inline` beside text. Shows "9+" past nine. |
 | `DetailList` | Terms and values in two columns, such as a connection's addresses. Long values wrap in their column. |
 | `Drilldown` | View that slides a second `Panel` in from the side, with a back button. |
+| `EmptyState` | A panel or section with nothing to show: an icon in a soft circle, what is missing, and a hint on what would fill it. |
 | `Field` | Label, control and validation message. |
 | `FilePicker` | Keyboard-first file picker over its positioned parent. |
 | `IconButton` | Round, quiet button that shows only an icon: a back arrow, a details arrow, a mute button. Drawn in `currentcolor`. |
@@ -34,6 +35,7 @@ Each export is `@domicile-desktop/component-library/<name>`.
 | `Kbd` | Keyboard key cap. |
 | `list-walk` | Arrow-key movement of a highlight through a list while focus stays in an input. |
 | `ListRow` | Row of a panel's `List`: icon, label over a detail, and something at the end. One button, or a `filled` tile holding its own buttons. `disclosure` folds what goes under it behind a toggle. |
+| `Loading` | A spinner and what it waits for: centered in a waiting panel, on one line under a list, or alone at a row's end. |
 | `ModalDialog` | Modal dialog with `title`, `footer` and `trigger` props. |
 | `Notice` | Pill that briefly shows a change, such as a zoom level or volume, with an optional level meter. Key it per change. |
 | `ContextMenu` | Menu opened at a point, such as a right click's. Parts: `Item`, `CheckboxItem`, `RadioGroup` and `RadioItem`, `Submenu`, `Separator`. Items take an `icon` and a `mnemonic`, whose letter chooses them. |
@@ -41,7 +43,7 @@ Each export is `@domicile-desktop/component-library/<name>`.
 | `Panel` | Titled panel: a `PanelHeader`, then its content a step apart. `PanelAction` puts the content's controls in the header. |
 | `PanelFooter` | A panel's last line under a rule: a summary and an action. |
 | `PanelHeader` | A panel's title, with a back button when one level in and controls at the end. |
-| `PanelNote` | One line on how a panel stands; `warning` says a refusal plainly, with the service's words in its tooltip. |
+| `PanelNote` | One line on how a panel stands beside its rows; `warning` says a refusal plainly, with the service's words in its tooltip. |
 | `PanelSection` | A group in a panel under a small label, such as Inboxes or Paired. |
 | `source-name` | `sourceName`: how a screen cast's source is named. |
 | `Popover` | Non-modal panel anchored to the control that opened it. `tone="overPhoto"` is a see-through panel for the bar, dark in either theme. |

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-77fd63181766",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-77fd63181766",
+    "@domicile-desktop/sdk": "0.0.0-alpha-7a29c8f7f7ea",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-7a29c8f7f7ea",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -34,6 +34,19 @@
   },
   "exports": {
     "./Accordion": "./src/Accordion/Accordion.tsx",
+    "./AnimatedBellIcon": "./src/AnimatedBellIcon/AnimatedBellIcon.tsx",
+    "./AnimatedBluetoothIcon": "./src/AnimatedBluetoothIcon/AnimatedBluetoothIcon.tsx",
+    "./AnimatedChatIcon": "./src/AnimatedChatIcon/AnimatedChatIcon.tsx",
+    "./AnimatedCheckIcon": "./src/AnimatedCheckIcon/AnimatedCheckIcon.tsx",
+    "./AnimatedEyeIcon": "./src/AnimatedEyeIcon/AnimatedEyeIcon.tsx",
+    "./AnimatedGearIcon": "./src/AnimatedGearIcon/AnimatedGearIcon.tsx",
+    "./AnimatedKeyboardIcon": "./src/AnimatedKeyboardIcon/AnimatedKeyboardIcon.tsx",
+    "./AnimatedLightningIcon": "./src/AnimatedLightningIcon/AnimatedLightningIcon.tsx",
+    "./AnimatedMicrophoneIcon": "./src/AnimatedMicrophoneIcon/AnimatedMicrophoneIcon.tsx",
+    "./AnimatedSpeakerIcon": "./src/AnimatedSpeakerIcon/AnimatedSpeakerIcon.tsx",
+    "./AnimatedSquaresIcon": "./src/AnimatedSquaresIcon/AnimatedSquaresIcon.tsx",
+    "./AnimatedThemeIcon": "./src/AnimatedThemeIcon/AnimatedThemeIcon.tsx",
+    "./AnimatedWifiIcon": "./src/AnimatedWifiIcon/AnimatedWifiIcon.tsx",
     "./AppChooser": "./src/AppChooser/AppChooser.tsx",
     "./Autocomplete": "./src/Autocomplete/Autocomplete.tsx",
     "./Avatar": "./src/Avatar/Avatar.tsx",
@@ -49,6 +62,7 @@
     "./DisplayProvider": "./src/Screen/DisplayProvider.tsx",
     "./Drilldown": "./src/Drilldown/Drilldown.tsx",
     "./display-source": "./src/Screen/display-source.ts",
+    "./EmptyState": "./src/EmptyState/EmptyState.tsx",
     "./Field": "./src/Field/Field.tsx",
     "./FilePicker": "./src/FilePicker/FilePicker.tsx",
     "./file-request": "./src/FilePicker/file-request.ts",
@@ -58,6 +72,7 @@
     "./Kbd": "./src/Kbd/Kbd.tsx",
     "./LevelToast": "./src/LevelToast/LevelToast.tsx",
     "./ListRow": "./src/ListRow/ListRow.tsx",
+    "./Loading": "./src/Loading/Loading.tsx",
     "./list-walk": "./src/list-walk.ts",
     "./ModalDialog": "./src/ModalDialog/ModalDialog.tsx",
     "./media-theme-source": "./src/ThemeSwitch/media-theme-source.ts",
@@ -131,5 +146,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-77fd63181766"
+  "version": "0.0.0-alpha-7a29c8f7f7ea"
 }

package/src/AnimatedBellIcon/AnimatedBellIcon.tsx

@@ -0,0 +1,66 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { BELL_FILL } from "../_icon/phosphor-parts";
+import { useCue } from "../_icon/useCue";
+
+/** Where the bell hangs from. */
+const PIVOT = [128, 24] as const;
+
+type Props = {
+  /** Swings the bell each time it changes, such as to a higher unread count. */
+  cue?: unknown;
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  /** Strikes the bell through, such as while do not disturb is on. */
+  off?: boolean | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's filled `BellSimple`. It swings, its clapper lagging, on each
+ * cue, and nudges while the control it is in is pointed at. A slash draws
+ * across it while it is `off`.
+ */
+export const AnimatedBellIcon = ({ cue, label, off = false, size }: Props) => {
+  const cued = useCue(cue);
+  return (
+    <IconFrame label={label} size={size} slash={{ shown: off, weight: "fill" }}>
+      <IconPart
+        cue={cued}
+        cueStyles={bodySwingStyles}
+        d={BELL_FILL.body}
+        hoverStyles={bodyNudgeStyles}
+        name="body"
+        origin={PIVOT}
+      />
+      <IconPart
+        cue={cued}
+        cueStyles={clapperSwingStyles}
+        d={BELL_FILL.clapper}
+        name="clapper"
+        origin={PIVOT}
+      />
+    </IconFrame>
+  );
+};
+
+const bodySwingStyles = css({
+  "&[data-cued]": {
+    animation:
+      "iconBellSwing calc({durations.slowest} + {durations.normal}) {easings.linear}",
+  },
+});
+
+const clapperSwingStyles = css({
+  "&[data-cued]": {
+    animation:
+      "iconBellClapper calc({durations.slowest} + {durations.normal}) {easings.linear} {durations.fastest}",
+  },
+});
+
+const bodyNudgeStyles = css({
+  _controlHover: {
+    animation: "iconBellNudge {durations.slowest} {easings.in-out}",
+  },
+});

package/src/AnimatedBluetoothIcon/AnimatedBluetoothIcon.tsx

@@ -0,0 +1,84 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { BLUETOOTH_BOLD } from "../_icon/phosphor-parts";
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+  /** Off is slashed; connected shows the dots beside the rune. */
+  state: "connected" | "off" | "on";
+};
+
+/**
+ * Phosphor's bold `Bluetooth`, `BluetoothConnected` and `BluetoothSlash` in
+ * one. The dots slide out of the rune when a device connects, back in when
+ * it goes, and blink while the control the icon is in is pointed at.
+ */
+export const AnimatedBluetoothIcon = ({ label, size, state }: Props) => {
+  const dots = state === "connected" ? "shown" : "hidden";
+  return (
+    <IconFrame
+      label={label}
+      size={size}
+      slash={{ shown: state === "off", weight: "bold" }}
+    >
+      <IconPart d={BLUETOOTH_BOLD.rune} name="rune" />
+      <IconPart
+        d={BLUETOOTH_BOLD.dotStart}
+        hoverStyles={state === "connected" ? dotBlinkStyles : undefined}
+        name="dot"
+        origin={[56, 128]}
+        state={dots}
+        stateStyles={dotStartStyles}
+      />
+      <IconPart
+        d={BLUETOOTH_BOLD.dotEnd}
+        hoverStyles={state === "connected" ? dotBlinkStyles : undefined}
+        name="dot"
+        order={1}
+        origin={[208, 128]}
+        state={dots}
+        stateStyles={dotEndStyles}
+      />
+    </IconFrame>
+  );
+};
+
+const dotStartStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "translateX(28px) scale(0.3)",
+    transition:
+      "opacity {durations.normal} {easings.in}, transform {durations.normal} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.slow} {easings.out}, transform {durations.slower} {easings.outBack}",
+  },
+});
+
+const dotEndStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "translateX(-28px) scale(0.3)",
+    transition:
+      "opacity {durations.normal} {easings.in}, transform {durations.normal} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.slow} {easings.out}, transform {durations.slower} {easings.outBack}",
+  },
+});
+
+const dotBlinkStyles = css({
+  _controlHover: {
+    animation:
+      "iconDotBlink {durations.slower} {easings.in-out} calc(var(--part-order) * {durations.fast}) both",
+  },
+});

package/src/AnimatedChatIcon/AnimatedChatIcon.tsx

@@ -0,0 +1,69 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { CHAT_BOLD } from "../_icon/phosphor-parts";
+import { useCue } from "../_icon/useCue";
+
+/** Where each line starts writing from. */
+const LINE_STARTS = [
+  [84, 108],
+  [84, 148],
+] as const;
+
+type Props = {
+  /** Plays each time it changes, such as to a higher unread count. */
+  cue?: unknown;
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's bold `ChatCircleText`. On each cue the bubble tips on its tail
+ * and its lines write in, one after the other; pointed at, it tips.
+ */
+export const AnimatedChatIcon = ({ cue, label, size }: Props) => {
+  const cued = useCue(cue);
+  return (
+    <IconFrame label={label} size={size}>
+      <IconPart
+        cue={cued}
+        cueStyles={bubbleTipStyles}
+        d={CHAT_BOLD.bubble}
+        hoverStyles={bubbleHoverStyles}
+        name="bubble"
+        origin={[32, 228]}
+      />
+      {CHAT_BOLD.lines.map((d, index) => (
+        <IconPart
+          cue={cued}
+          cueStyles={lineWriteStyles}
+          d={d}
+          key={d}
+          name="line"
+          order={index}
+          origin={LINE_STARTS[index]}
+        />
+      ))}
+    </IconFrame>
+  );
+};
+
+const bubbleTipStyles = css({
+  "&[data-cued]": {
+    animation: "iconBubbleTip {durations.slowest} {easings.in-out}",
+  },
+});
+
+const bubbleHoverStyles = css({
+  _controlHover: {
+    animation: "iconBubbleTip {durations.slower} {easings.in-out}",
+  },
+});
+
+const lineWriteStyles = css({
+  "&[data-cued]": {
+    animation:
+      "iconLineWrite {durations.slow} {easings.out} calc({durations.faster} + var(--part-order) * {durations.fast}) both",
+  },
+});

package/src/AnimatedCheckIcon/AnimatedCheckIcon.tsx

@@ -0,0 +1,24 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { CHECK_BOLD } from "../_icon/phosphor-parts";
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's bold `Check`. It draws from its start when it appears, such as
+ * when something has finished.
+ */
+export const AnimatedCheckIcon = ({ label, size }: Props) => (
+  <IconFrame label={label} size={size}>
+    <IconPart d={CHECK_BOLD.check} name="check" stateStyles={drawStyles} />
+  </IconFrame>
+);
+
+const drawStyles = css({
+  animation: "iconCheckDraw {durations.slow} {easings.out}",
+});

package/src/AnimatedEyeIcon/AnimatedEyeIcon.tsx

@@ -0,0 +1,96 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { EYE_BOLD } from "../_icon/phosphor-parts";
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  /** Phosphor's `Eye` while open, `EyeClosed` while shut. */
+  open: boolean;
+  size: number;
+};
+
+/**
+ * Phosphor's bold `Eye` and `EyeClosed` in one. Shutting blinks the eye
+ * closed; opening widens it and the pupil comes back. Pointed at while open,
+ * the pupil looks one way and the other.
+ */
+export const AnimatedEyeIcon = ({ label, open, size }: Props) => {
+  const openState = open ? "shown" : "hidden";
+  return (
+    <IconFrame label={label} size={size}>
+      <IconPart
+        d={EYE_BOLD.outline}
+        name="outline"
+        state={openState}
+        stateStyles={outlineStyles}
+      />
+      <IconPart
+        d={EYE_BOLD.pupil}
+        hoverStyles={open ? pupilGlanceStyles : undefined}
+        name="pupil"
+        state={openState}
+        stateStyles={pupilStyles}
+      />
+      <IconPart
+        d={EYE_BOLD.closed}
+        name="closed"
+        state={open ? "hidden" : "shown"}
+        stateStyles={closedStyles}
+      />
+    </IconFrame>
+  );
+};
+
+// Shutting squeezes the outline flat, then lets it go.
+const outlineStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "scaleY(0.08)",
+    transition:
+      "transform {durations.fast} {easings.in}, opacity {durations.fastest} {easings.linear} {durations.fast}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "transform {durations.slow} {easings.outBack} {durations.faster}, opacity {durations.fastest} {easings.linear} {durations.faster}",
+  },
+});
+
+const pupilStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "scaleY(0.08)",
+    transition:
+      "opacity {durations.fast} {easings.in}, transform {durations.fast} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.slow} {easings.out} {durations.normal}, transform {durations.slow} {easings.outBack} {durations.normal}",
+  },
+});
+
+const closedStyles = css({
+  "&[data-state=hidden]": {
+    opacity: 0,
+    transform: "translateY(-10px) scaleY(0.5)",
+    transition:
+      "opacity {durations.fast} {easings.in}, transform {durations.fast} {easings.in}",
+  },
+  "&[data-state=shown]": {
+    opacity: 1,
+    transform: "none",
+    transition:
+      "opacity {durations.normal} {easings.out} {durations.fast}, transform {durations.normal} {easings.out} {durations.fast}",
+  },
+});
+
+const pupilGlanceStyles = css({
+  _controlHover: {
+    animation: "iconPupilGlance calc({durations.slowest} * 2) {easings.in-out}",
+  },
+});

package/src/AnimatedGearIcon/AnimatedGearIcon.tsx

@@ -0,0 +1,26 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { GEAR_REGULAR } from "../_icon/phosphor-parts";
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's regular `GearSix`. It turns one tooth and settles while the
+ * control it is in is pointed at.
+ */
+export const AnimatedGearIcon = ({ label, size }: Props) => (
+  <IconFrame label={label} size={size}>
+    <IconPart d={GEAR_REGULAR.gear} hoverStyles={gearTurnStyles} name="gear" />
+  </IconFrame>
+);
+
+const gearTurnStyles = css({
+  _controlHover: {
+    animation: "iconGearTurn {durations.slowest} {easings.outBack}",
+  },
+});

package/src/AnimatedKeyboardIcon/AnimatedKeyboardIcon.tsx

@@ -0,0 +1,50 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { KEYBOARD_BOLD } from "../_icon/phosphor-parts";
+import { useCue } from "../_icon/useCue";
+
+type Props = {
+  /** Plays each time it changes, such as to the keymap in use. */
+  cue?: unknown;
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+};
+
+/**
+ * Phosphor's bold `Keyboard`. On each cue its keys press down in a wave, top
+ * row first; pointed at, one key presses.
+ */
+export const AnimatedKeyboardIcon = ({ cue, label, size }: Props) => {
+  const cued = useCue(cue);
+  return (
+    <IconFrame label={label} size={size}>
+      <IconPart d={KEYBOARD_BOLD.frame} name="frame" />
+      {KEYBOARD_BOLD.keys.map((d, index) => (
+        <IconPart
+          cue={cued}
+          cueStyles={keyWaveStyles}
+          d={d}
+          hoverStyles={index === 1 ? keyHoverStyles : undefined}
+          key={d}
+          name="key"
+          order={index}
+        />
+      ))}
+    </IconFrame>
+  );
+};
+
+const keyWaveStyles = css({
+  "&[data-cued]": {
+    animation:
+      "iconKeyPress {durations.slow} {easings.in-out} calc(var(--part-order) * {durations.fastest}) both",
+  },
+});
+
+const keyHoverStyles = css({
+  _controlHover: {
+    animation: "iconKeyPress {durations.slow} {easings.in-out}",
+  },
+});

package/src/AnimatedLightningIcon/AnimatedLightningIcon.tsx

@@ -0,0 +1,27 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { LIGHTNING_FILL } from "../_icon/phosphor-parts";
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  size: number;
+  /** Where it sits, inside an outer drawing such as a battery. */
+  x?: number | undefined;
+  y?: number | undefined;
+};
+
+/**
+ * Phosphor's filled `Lightning`. It strikes down from its top when it
+ * appears, such as when charging starts.
+ */
+export const AnimatedLightningIcon = ({ label, size, x, y }: Props) => (
+  <IconFrame label={label} size={size} x={x} y={y}>
+    <IconPart d={LIGHTNING_FILL.bolt} name="bolt" stateStyles={strikeStyles} />
+  </IconFrame>
+);
+
+const strikeStyles = css({
+  animation: "iconBoltStrike {durations.slowest} {easings.linear}",
+});

package/src/AnimatedMicrophoneIcon/AnimatedMicrophoneIcon.tsx

@@ -0,0 +1,53 @@
+import { css } from "../../styled-system/css";
+import { IconFrame } from "../_icon/IconFrame";
+import { IconPart } from "../_icon/IconPart";
+import { MICROPHONE_FILL, MICROPHONE_REGULAR } from "../_icon/phosphor-parts";
+import { useCue } from "../_icon/useCue";
+
+const PARTS = { fill: MICROPHONE_FILL, regular: MICROPHONE_REGULAR };
+
+type Props = {
+  /** Names the icon; without one it is decorative. */
+  label?: string | undefined;
+  muted: boolean;
+  size: number;
+  weight: keyof typeof PARTS;
+};
+
+/**
+ * Phosphor's `Microphone` and `MicrophoneSlash` in one. Muting draws the
+ * slash; unmuting, or pointing at the control the icon is in, bobs the
+ * capsule.
+ */
+export const AnimatedMicrophoneIcon = ({
+  label,
+  muted,
+  size,
+  weight,
+}: Props) => {
+  const unmuted = useCue(muted ? undefined : "live");
+  return (
+    <IconFrame label={label} size={size} slash={{ shown: muted, weight }}>
+      <IconPart
+        cue={unmuted}
+        cueStyles={capsuleBobStyles}
+        d={PARTS[weight].capsule}
+        hoverStyles={muted ? undefined : capsuleHoverStyles}
+        name="capsule"
+      />
+      <IconPart d={PARTS[weight].stand} name="stand" />
+    </IconFrame>
+  );
+};
+
+const capsuleBobStyles = css({
+  "&[data-cued]": {
+    animation: "iconCapsuleBob {durations.slowest} {easings.in-out}",
+  },
+});
+
+const capsuleHoverStyles = css({
+  _controlHover: {
+    animation: "iconCapsuleBob {durations.slowest} {easings.in-out}",
+  },
+});