@dxos/react-ui 0.1.20 → 0.1.22

package/dist/lib/browser/index.mjs

@@ -1,897 +1,22 @@
-// packages/common/react-ui/src/components/Alert/Alert.tsx
-import React from "react";
-
-// packages/common/react-ui/src/hooks/useId.ts
-import alea from "alea";
-import { useMemo } from "react";
-var Alea = alea;
-var prng = new Alea("@dxos/react-ui");
-var randomString = (n = 4) => prng().toString(16).slice(2, n + 2);
-var useId = (namespace, n) => useMemo(() => `${namespace}-${randomString(n)}`, []);
-
-// packages/common/react-ui/src/hooks/useForwardedRef.ts
-import { useRef, useEffect } from "react";
-var useForwardedRef = (ref) => {
-  const innerRef = useRef(null);
-  useEffect(() => {
-    if (!ref) {
-      return;
-    }
-    if (typeof ref === "function") {
-      ref(innerRef.current);
-    } else {
-      ref.current = innerRef.current;
-    }
-  });
-  return innerRef;
-};
-
-// packages/common/react-ui/src/hooks/useIsFocused.ts
-import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
-var useIsFocused = (inputRef) => {
-  const [isFocused, setIsFocused] = useState(void 0);
-  const isFocusedRef = useRef2(isFocused);
-  isFocusedRef.current = isFocused;
-  useEffect2(() => {
-    const input = inputRef.current;
-    if (!input) {
-      return;
-    }
-    const onFocus = () => setIsFocused(true);
-    const onBlur = () => setIsFocused(false);
-    input.addEventListener("focus", onFocus);
-    input.addEventListener("blur", onBlur);
-    if (isFocusedRef.current === void 0) {
-      setIsFocused(document.activeElement === input);
-    }
-    return () => {
-      input.removeEventListener("focus", onFocus);
-      input.removeEventListener("blur", onBlur);
-    };
-  }, [
-    inputRef,
-    setIsFocused
-  ]);
-  return isFocused;
-};
-
-// packages/common/react-ui/src/util/mx.ts
-import { extendTailwindMerge, validators as validators2 } from "tailwind-merge";
-
-// packages/common/react-ui/src/util/withLogical.ts
-import { mergeConfigs, validators } from "tailwind-merge";
-var withLogical = (prevConfig) => {
-  const getLength = () => [
-    validators.isLength
-  ];
-  const getLengthWithAuto = () => [
-    "auto",
-    validators.isLength
-  ];
-  const getLengthWithEmpty = () => [
-    "",
-    validators.isLength
-  ];
-  const getAny = () => [
-    validators.isAny
-  ];
-  const getRounded = () => [
-    "none",
-    "",
-    "sm",
-    "md",
-    "lg",
-    "xl",
-    "2xl",
-    "3xl",
-    "full",
-    validators.isArbitraryLength
-  ];
-  return mergeConfigs(prevConfig, {
-    classGroups: {
-      float: [
-        {
-          float: [
-            "start",
-            "end"
-          ]
-        }
-      ],
-      clear: [
-        {
-          clear: [
-            "start",
-            "end"
-          ]
-        }
-      ],
-      resize: [
-        {
-          resize: [
-            "block ",
-            "inline"
-          ]
-        }
-      ],
-      "text-alignment": [
-        {
-          text: [
-            "start",
-            "end"
-          ]
-        }
-      ],
-      "logical.overscroll-b": [
-        {
-          "overscroll-b": [
-            "auto ",
-            "contain",
-            "auto"
-          ]
-        }
-      ],
-      "logical.overscroll-i": [
-        {
-          "overscroll-b": [
-            "auto ",
-            "contain",
-            "auto"
-          ]
-        }
-      ],
-      "logical.bs": [
-        {
-          bs: getLength()
-        }
-      ],
-      "logical.min-bs": [
-        {
-          "min-bs": getLength()
-        }
-      ],
-      "logical.max-bs": [
-        {
-          "max-bs": getLength()
-        }
-      ],
-      "logical.is": [
-        {
-          is: getLength()
-        }
-      ],
-      "logical.min-is": [
-        {
-          "min-is": getLength()
-        }
-      ],
-      "logical.max-is": [
-        {
-          "max-is": getLength()
-        }
-      ],
-      "logical.mlb": [
-        {
-          mlb: getLength()
-        }
-      ],
-      "logical.mli": [
-        {
-          mli: getLength()
-        }
-      ],
-      "logical.mbs": [
-        {
-          mbs: getLength()
-        }
-      ],
-      "logical.mbe": [
-        {
-          mbe: getLength()
-        }
-      ],
-      "logical.mis": [
-        {
-          mis: getLength()
-        }
-      ],
-      "logical.mie": [
-        {
-          mie: getLength()
-        }
-      ],
-      "logical.plb": [
-        {
-          plb: getLength()
-        }
-      ],
-      "logical.pli": [
-        {
-          pli: getLength()
-        }
-      ],
-      "logical.pbs": [
-        {
-          pbs: getLength()
-        }
-      ],
-      "logical.pbe": [
-        {
-          pbe: getLength()
-        }
-      ],
-      "logical.pis": [
-        {
-          pis: getLength()
-        }
-      ],
-      "logical.pie": [
-        {
-          pie: getLength()
-        }
-      ],
-      "logical.space-b": [
-        {
-          "space-b": getLength()
-        }
-      ],
-      "logical.space-i": [
-        {
-          "space-i": getLength()
-        }
-      ],
-      "logical.inset-block": [
-        {
-          "inset-block": getLengthWithAuto()
-        }
-      ],
-      "logical.inset-inline": [
-        {
-          "inset-inline": getLengthWithAuto()
-        }
-      ],
-      "logical.block-start": [
-        {
-          "block-start": getLengthWithAuto()
-        }
-      ],
-      "logical.block-end": [
-        {
-          "block-end": getLengthWithAuto()
-        }
-      ],
-      "logical.inline-start": [
-        {
-          "inline-start": getLengthWithAuto()
-        }
-      ],
-      "logical.inline-end": [
-        {
-          "inline-end": getLengthWithAuto()
-        }
-      ],
-      "logical.border-bs": [
-        {
-          "border-bs": getLengthWithEmpty()
-        }
-      ],
-      "logical.border-be": [
-        {
-          "border-be": getLengthWithEmpty()
-        }
-      ],
-      "logical.border-is": [
-        {
-          "border-is": getLengthWithEmpty()
-        }
-      ],
-      "logical.border-ie": [
-        {
-          "border-ie": getLengthWithEmpty()
-        }
-      ],
-      "logical.border-color-bs": [
-        {
-          "border-bs": getAny()
-        }
-      ],
-      "logical.border-color-be": [
-        {
-          "border-be": getAny()
-        }
-      ],
-      "logical.border-color-is": [
-        {
-          "border-is": getAny()
-        }
-      ],
-      "logical.border-color-ie": [
-        {
-          "border-ie": getAny()
-        }
-      ],
-      "logical.rounded-bs": [
-        {
-          "rounded-bs": getRounded()
-        }
-      ],
-      "logical.rounded-be": [
-        {
-          "rounded-be": getRounded()
-        }
-      ],
-      "logical.rounded-is": [
-        {
-          "rounded-is": getRounded()
-        }
-      ],
-      "logical.rounded-ie": [
-        {
-          "rounded-ie": getRounded()
-        }
-      ],
-      "logical.rounded-ss": [
-        {
-          "rounded-ss": getRounded()
-        }
-      ],
-      "logical.rounded-se": [
-        {
-          "rounded-se": getRounded()
-        }
-      ],
-      "logical.rounded-es": [
-        {
-          "rounded-es": getRounded()
-        }
-      ],
-      "logical.rounded-ee": [
-        {
-          "rounded-ee": getRounded()
-        }
-      ],
-      "logical.divide-b": [
-        {
-          "divide-b": getLengthWithEmpty()
-        }
-      ],
-      "logical.divide-i": [
-        {
-          "divide-i": getLengthWithEmpty()
-        }
-      ]
-    },
-    conflictingClassGroups: {
-      "inset-block": [
-        "logical.block-start",
-        "logical.block-end"
-      ],
-      "inset-inline": [
-        "logical.inline-start",
-        "logical.inline-end"
-      ],
-      p: [
-        "logical.plb",
-        "logical.pli",
-        "logical.pbs",
-        "logical.pbe",
-        "logical.pis",
-        "logical.pie"
-      ],
-      pli: [
-        "logical.pis",
-        "logical.pie"
-      ],
-      plb: [
-        "logical.pbs",
-        "logical.pbe"
-      ],
-      m: [
-        "logical.mlb",
-        "logical.mli",
-        "logical.mbs",
-        "logical.mbe",
-        "logical.mis",
-        "logical.mie"
-      ],
-      mli: [
-        "logical.mis",
-        "logical.mie"
-      ],
-      mlb: [
-        "logical.mbs",
-        "logical.mbe"
-      ],
-      overscroll: [
-        "overscroll-i",
-        "overscroll-b"
-      ],
-      rounded: [
-        "logical.rounded-bs",
-        "logical.rounded-be",
-        "logical.rounded-is",
-        "logical.rounded-ie",
-        "logical.rounded-ss",
-        "logical.rounded-se",
-        "logical.rounded-es",
-        "logical.rounded-ee"
-      ],
-      "logical.rounded-bs": [
-        "logical.rounded-ss",
-        "logical.rounded-se"
-      ],
-      "logical.rounded-be": [
-        "logical.rounded-es",
-        "logical.rounded-ee"
-      ],
-      "logical.rounded-is": [
-        "logical.rounded-ss",
-        "logical.rounded-es"
-      ],
-      "logical.rounded-ie": [
-        "logical.rounded-ee",
-        "logical.rounded-se"
-      ],
-      "border-color": [
-        "logical.border-color-bs",
-        "logical.border-color-be",
-        "logical.border-color-is",
-        "logical.border-color-ie"
-      ],
-      border: [
-        "logical.border-bs",
-        "logical.border-be",
-        "logical.border-is",
-        "logical.border-ie"
-      ]
-    }
-  });
-};
-
-// packages/common/react-ui/src/util/mx.ts
-var mx = extendTailwindMerge({
-  classGroups: {
-    fontFamily: [
-      "font-body",
-      "font-display",
-      "font-mono"
-    ],
-    fontWeight: [
-      "font-thin",
-      "font-extralight",
-      "font-light",
-      "font-normal",
-      "font-medium",
-      "font-semibold",
-      "font-bold",
-      "font-extrabold",
-      "font-black",
-      validators2.isArbitraryNumber
-    ]
-  }
-}, withLogical);
-
-// packages/common/react-ui/src/styles/active.ts
-var defaultActive = mx("radix-state-open:outline-2 radix-state-open:outline-offset-1 radix-state-open:outline-primary-300 radix-state-open:outline-offset-transparent dark:radix-state-open:outline-primary-400 dark:radix-state-open:outline-offset-transparent", "radix-state-on:outline-2 radix-state-on:outline-offset-1 radix-state-on:outline-primary-300 radix-state-on:outline-offset-transparent dark:radix-state-on:outline-primary-400 dark:radix-state-on:outline-offset-transparent", "radix-state-instant-open:outline-2 radix-state-instant-open:outline-offset-1 radix-state-instant-open:outline-primary-300 radix-state-instant-open:outline-offset-transparent dark:radix-state-instant-open:outline-primary-400 dark:radix-state-instant-open:outline-offset-transparent");
-
-// packages/common/react-ui/src/styles/disabled.ts
-var defaultDisabled = "opacity-50 cursor-not-allowed shadow-none";
-
-// packages/common/react-ui/src/styles/focus.ts
-var defaultFocus = "focus:outline-none focus-visible:z-[1] focus-visible:hover:outline-none dark:focus-visible:hover:outline-none focus-visible:ring focus-visible:ring-offset-1 focus-visible:ring-primary-500 focus-visible:ring-offset-white dark:focus-visible:ring-primary-200 dark:focus-visible:ring-offset-black";
-var staticFocus = "ring ring-offset-1 ring-primary-500 ring-offset-white dark:ring-primary-200 dark:ring-offset-black";
-
-// packages/common/react-ui/src/styles/group.ts
-var elevationClassNameMap = /* @__PURE__ */ new Map([
-  [
-    0,
-    "shadow-none"
-  ],
-  [
-    1,
-    "shadow-sm"
-  ],
-  [
-    2,
-    "shadow"
-  ],
-  [
-    3,
-    "shadow-md"
-  ],
-  [
-    4,
-    "shadow-lg"
-  ],
-  [
-    5,
-    "shadow-xl"
-  ],
-  [
-    6,
-    "shadow-2xl"
-  ]
-]);
-var defaultGroup = ({ elevation, rounding, spacing }) => {
-  return mx(rounding != null ? rounding : "rounded-lg", spacing != null ? spacing : "p-4", elevation === 0 ? "bg-transparent border border-neutral-200 dark:border-neutral-700" : "bg-white dark:bg-neutral-800 elevated-buttons", elevationClassNameMap.get(elevation));
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
 };
 
-// packages/common/react-ui/src/styles/hover.ts
-var defaultHover = ({ disabled }) => {
-  return !disabled && "outline outline-3 outline-transparent hover:z-[1] hover:outline-primary-300 dark:hover:outline-primary-400 hover:focus:outline-primary-300 dark:hover:focus:outline-primary-400";
-};
-
-// packages/common/react-ui/src/styles/ornament.ts
-var defaultInlineSeparator = "border-is border-neutral-300 dark:border-neutral-700";
-var defaultBlockSeparator = "border-bs border-neutral-300 dark:border-neutral-700";
-
-// packages/common/react-ui/src/styles/shimmer.ts
-var defaultShimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-neutral-100/10 before:to-transparent isolate overflow-hidden";
-var strongShimmer = "relative before:absolute before:inset-0 before:-translate-x-full before:animate-shimmer before:bg-gradient-to-r before:from-transparent before:via-primary-100/80 before:to-transparent isolate overflow-hidden";
-
-// packages/common/react-ui/src/styles/size.ts
-var sizeWidthMap = /* @__PURE__ */ new Map([
-  [
-    0,
-    "w-0"
-  ],
-  [
-    "px",
-    "w-px"
-  ],
-  [
-    0.5,
-    "w-0.5"
-  ],
-  [
-    1,
-    "w-1"
-  ],
-  [
-    1.5,
-    "w-1.5"
-  ],
-  [
-    2,
-    "w-2"
-  ],
-  [
-    2.5,
-    "w-2.5"
-  ],
-  [
-    3,
-    "w-3"
-  ],
-  [
-    3.5,
-    "w-3.5"
-  ],
-  [
-    4,
-    "w-4"
-  ],
-  [
-    5,
-    "w-5"
-  ],
-  [
-    6,
-    "w-6"
-  ],
-  [
-    7,
-    "w-7"
-  ],
-  [
-    8,
-    "w-8"
-  ],
-  [
-    9,
-    "w-9"
-  ],
-  [
-    10,
-    "w-10"
-  ],
-  [
-    11,
-    "w-11"
-  ],
-  [
-    12,
-    "w-12"
-  ],
-  [
-    14,
-    "w-14"
-  ],
-  [
-    16,
-    "w-16"
-  ],
-  [
-    20,
-    "w-20"
-  ],
-  [
-    24,
-    "w-24"
-  ],
-  [
-    28,
-    "w-28"
-  ],
-  [
-    32,
-    "w-32"
-  ],
-  [
-    36,
-    "w-36"
-  ],
-  [
-    40,
-    "w-40"
-  ],
-  [
-    44,
-    "w-44"
-  ],
-  [
-    48,
-    "w-48"
-  ],
-  [
-    52,
-    "w-52"
-  ],
-  [
-    56,
-    "w-56"
-  ],
-  [
-    60,
-    "w-60"
-  ],
-  [
-    64,
-    "w-64"
-  ],
-  [
-    72,
-    "w-72"
-  ],
-  [
-    80,
-    "w-80"
-  ],
-  [
-    96,
-    "w-96"
-  ]
-]);
-var sizeHeightMap = /* @__PURE__ */ new Map([
-  [
-    0,
-    "h-0"
-  ],
-  [
-    "px",
-    "h-px"
-  ],
-  [
-    0.5,
-    "h-0.5"
-  ],
-  [
-    1,
-    "h-1"
-  ],
-  [
-    1.5,
-    "h-1.5"
-  ],
-  [
-    2,
-    "h-2"
-  ],
-  [
-    2.5,
-    "h-2.5"
-  ],
-  [
-    3,
-    "h-3"
-  ],
-  [
-    3.5,
-    "h-3.5"
-  ],
-  [
-    4,
-    "h-4"
-  ],
-  [
-    5,
-    "h-5"
-  ],
-  [
-    6,
-    "h-6"
-  ],
-  [
-    7,
-    "h-7"
-  ],
-  [
-    8,
-    "h-8"
-  ],
-  [
-    9,
-    "h-9"
-  ],
-  [
-    10,
-    "h-10"
-  ],
-  [
-    11,
-    "h-11"
-  ],
-  [
-    12,
-    "h-12"
-  ],
-  [
-    14,
-    "h-14"
-  ],
-  [
-    16,
-    "h-16"
-  ],
-  [
-    20,
-    "h-20"
-  ],
-  [
-    24,
-    "h-24"
-  ],
-  [
-    28,
-    "h-28"
-  ],
-  [
-    32,
-    "h-32"
-  ],
-  [
-    36,
-    "h-36"
-  ],
-  [
-    40,
-    "h-40"
-  ],
-  [
-    44,
-    "h-44"
-  ],
-  [
-    48,
-    "h-48"
-  ],
-  [
-    52,
-    "h-52"
-  ],
-  [
-    56,
-    "h-56"
-  ],
-  [
-    60,
-    "h-60"
-  ],
-  [
-    64,
-    "h-64"
-  ],
-  [
-    72,
-    "h-72"
-  ],
-  [
-    80,
-    "h-80"
-  ],
-  [
-    96,
-    "h-96"
-  ]
-]);
-var getSizeHeight = sizeHeightMap.get.bind(sizeHeightMap);
-var getSizeWidth = sizeWidthMap.get.bind(sizeWidthMap);
-var getSize = (size) => mx(getSizeHeight(size), getSizeWidth(size));
-
-// packages/common/react-ui/src/styles/text.ts
-var defaultPlaceholder = "placeholder-neutral-500 dark:placeholder-neutral-400";
-var defaultDescription = "text-xs font-normal text-neutral-650 dark:text-neutral-300";
-var primaryDescription = "text-xs font-normal text-white/90";
-var defaultTooltip = "text-xs font-normal text-neutral-900 dark:text-neutral-50";
+// packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx
+import React4 from "react";
+import { Avatar as Avatar2, mx as mx3 } from "@dxos/react-components";
 
-// packages/common/react-ui/src/styles/valence.ts
-var successText = "text-xs font-medium text-success-700 dark:text-success-300";
-var infoText = "text-xs font-medium text-info-700 dark:text-info-300";
-var warningText = "text-xs font-medium text-warning-700 dark:text-warning-300";
-var errorText = "text-xs font-medium text-error-700 dark:text-error-300";
-var valenceColorText = (valence) => {
-  switch (valence) {
-    case "success":
-      return successText;
-    case "info":
-      return infoText;
-    case "warning":
-      return warningText;
-    case "error":
-      return errorText;
-    default:
-      return void 0;
-  }
-};
-var neutralInputBorder = "border-neutral-500 dark:border-neutral-600";
-var successInputBorder = "border-success-500 dark:border-success-600";
-var infoInputBorder = "border-info-500 dark:border-info-600";
-var warningInputBorder = "border-warning-500 dark:border-warning-600";
-var errorInputBorder = "border-error-500 dark:border-error-600";
-var valenceInputBorder = (valence) => {
-  switch (valence) {
-    case "success":
-      return successInputBorder;
-    case "info":
-      return infoInputBorder;
-    case "warning":
-      return warningInputBorder;
-    case "error":
-      return errorInputBorder;
-    default:
-      return neutralInputBorder;
-  }
-};
-var neutralAlertColors = "border-neutral-500 dark:border-neutral-600";
-var successAlertColors = "border-success-500 dark:border-success-600 text-success-700 dark:text-success-100 bg-success-50 dark:bg-success-900";
-var infoAlertColors = "border-info-500 dark:border-info-600 text-info-700 dark:text-info-100 bg-info-50 dark:bg-info-900";
-var warningAlertColors = "border-warning-500 dark:border-warning-600 text-warning-700 dark:text-warning-100 bg-warning-50 dark:bg-warning-900";
-var errorAlertColors = "border-error-500 dark:border-error-600 text-error-700 dark:text-error-100 bg-error-50 dark:bg-error-900";
-var valenceAlertColors = (valence) => {
-  switch (valence) {
-    case "success":
-      return successAlertColors;
-    case "info":
-      return infoAlertColors;
-    case "warning":
-      return warningAlertColors;
-    case "error":
-      return errorAlertColors;
-    default:
-      return neutralAlertColors;
-  }
-};
+// packages/apps/patterns/react-ui/src/layouts/PanelPopover/PanelPopover.tsx
+import React from "react";
+import { mx, Popover } from "@dxos/react-components";
 
-// packages/common/react-ui/src/styles/input.ts
-var defaultInput = ({ disabled, validationValence }) => {
-  return mx("text-base border rounded bg-white/50 text-neutral-900 dark:bg-neutral-700/50 dark:text-white", defaultFocus, defaultPlaceholder, defaultHover({
-    disabled
-  }), valenceInputBorder(validationValence), disabled && defaultDisabled);
-};
-var staticInput = ({ disabled, focused, validationValence }) => {
-  return mx(defaultPlaceholder, "text-base border rounded bg-white/50 text-neutral-900 dark:bg-neutral-700/50 dark:text-white", valenceInputBorder(validationValence), disabled && defaultDisabled, focused && staticFocus);
-};
+// packages/apps/patterns/react-ui/src/styles/panelStyles.ts
+var defaultPanel = "p-2 backdrop-blur-md bg-neutral-50/[.66] dark:bg-neutral-950/[.66]";
+var defaultArrow = "text-neutral-50/[.66] dark:text-neutral-950/[.66]";
 
-// packages/common/react-ui/src/components/Alert/Alert.tsx
+// packages/apps/patterns/react-ui/src/layouts/PanelPopover/PanelPopover.tsx
 function _extends() {
   _extends = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -906,30 +31,33 @@ function _extends() {
   };
   return _extends.apply(this, arguments);
 }
-var Alert = ({ title, children, assertive, valence, slots = {} }) => {
-  var _a, _b;
-  const labelId = useId("alertLabel");
-  return /* @__PURE__ */ React.createElement("div", _extends({}, slots.root, {
-    role: assertive ? "alert" : "group",
-    "aria-labelledby": labelId,
-    className: mx("p-3 border rounded-md", valenceAlertColors(valence), (_a = slots.root) == null ? void 0 : _a.className)
-  }), /* @__PURE__ */ React.createElement("p", _extends({}, slots.title, {
-    id: labelId,
-    className: mx("font-medium mb-2", (_b = slots.title) == null ? void 0 : _b.className)
-  }), title), children);
+var PanelPopover = ({ slots, children, ...popoverProps }) => {
+  var _a, _b, _c;
+  return /* @__PURE__ */ React.createElement(Popover, _extends({
+    slots: {
+      arrow: {
+        ...slots == null ? void 0 : slots.arrow,
+        className: mx(defaultArrow, (_a = slots == null ? void 0 : slots.arrow) == null ? void 0 : _a.className)
+      },
+      content: {
+        collisionPadding: 8,
+        sideOffset: 4,
+        ...slots == null ? void 0 : slots.content,
+        className: mx(defaultPanel, (_b = slots == null ? void 0 : slots.content) == null ? void 0 : _b.className)
+      },
+      trigger: {
+        ...slots == null ? void 0 : slots.trigger,
+        className: mx("", (_c = slots == null ? void 0 : slots.trigger) == null ? void 0 : _c.className)
+      },
+      ...slots
+    }
+  }, popoverProps), children);
 };
 
-// packages/common/react-ui/src/components/AlertDialog/AlertDialog.tsx
-import { Transition } from "@headlessui/react";
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
-import React6, { cloneElement, Fragment, useEffect as useEffect3, useState as useState3 } from "react";
-
-// packages/common/react-ui/src/components/Input/Input.tsx
-import React5, { useCallback as useCallback2, useState as useState2, useTransition } from "react";
-
-// packages/common/react-ui/src/components/Input/BarePinInput.tsx
-import { CodeInput, getSegmentCssWidth } from "rci";
-import React2, { forwardRef, useCallback } from "react";
+// packages/apps/patterns/react-ui/src/layouts/PanelSidebar/PanelSidebar.tsx
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import React2, { createContext, Fragment, useCallback, useContext, useState } from "react";
+import { defaultOverlay, mx as mx2, useMediaQuery, useTranslation } from "@dxos/react-components";
 function _extends2() {
   _extends2 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
@@ -944,846 +72,99 @@ function _extends2() {
   };
   return _extends2.apply(this, arguments);
 }
-var bareInputStyleProps = {
-  padding: "8px",
-  spacing: "8px",
-  fontFamily: ""
-};
-var BarePinInput = /* @__PURE__ */ forwardRef(({ initialValue, size, validationMessage, validationValence, value, onChange, placeholder, disabled, inputSlot }, ref) => {
-  const width = getSegmentCssWidth("13px");
-  const inputRef = useForwardedRef(ref);
-  const inputFocused = useIsFocused(inputRef);
-  const renderSegment = useCallback(({ state, index }) => /* @__PURE__ */ React2.createElement("div", {
-    key: index,
-    className: staticInput({
-      focused: inputFocused && !!state,
-      disabled,
-      ...validationMessage && {
-        validationValence
-      }
-    }),
-    "data-state": state,
-    style: {
-      width,
-      height: "100%"
-    }
-  }), [
-    inputFocused,
-    validationValence,
-    validationMessage,
-    disabled
-  ]);
-  return /* @__PURE__ */ React2.createElement(CodeInput, _extends2({}, {
-    spellCheck: false,
-    ...bareInputStyleProps,
-    ...inputSlot,
-    placeholder,
-    onChange,
-    inputRef,
-    renderSegment,
-    className: mx("font-mono selection:bg-transparent mli-auto", disabled && "cursor-not-allowed", inputSlot == null ? void 0 : inputSlot.className)
-  }));
+var sidebarWidth = 272;
+var PanelSidebarContext = /* @__PURE__ */ createContext({
+  displayState: "hide",
+  setDisplayState: () => {
+  }
 });
-
-// packages/common/react-ui/src/components/Input/BareTextInput.tsx
-import React3 from "react";
-function _extends3() {
-  _extends3 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends3.apply(this, arguments);
-}
-var sizeMap = {
-  md: "text-base",
-  lg: "text-lg",
-  pin: "",
-  textarea: ""
-};
-var BareTextInput = ({ validationValence, validationMessage, size, disabled, placeholder, onChange, value, inputSlot }) => {
-  return /* @__PURE__ */ React3.createElement("input", _extends3({}, inputSlot, {
-    placeholder,
-    onChange,
-    value,
-    className: mx(defaultInput({
-      disabled,
-      ...validationMessage && {
-        validationValence
-      }
-    }), sizeMap[size != null ? size : "md"], "block w-full px-2.5 py-2", inputSlot == null ? void 0 : inputSlot.className)
-  }));
-};
-
-// packages/common/react-ui/src/components/Input/BareTextareaInput.tsx
-import React4 from "react";
-function _extends4() {
-  _extends4 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends4.apply(this, arguments);
-}
-var BareTextareaInput = ({ validationValence, validationMessage, onChange, value, disabled, placeholder, inputSlot }) => {
-  return /* @__PURE__ */ React4.createElement("textarea", _extends4({}, inputSlot, {
-    placeholder,
-    onChange,
-    value,
-    className: mx(defaultInput({
-      disabled,
-      ...validationMessage && {
-        validationValence
-      }
-    }), "block w-full px-2.5 py-2", inputSlot == null ? void 0 : inputSlot.className)
-  }));
-};
-
-// packages/common/react-ui/src/components/Input/Input.tsx
-function _extends5() {
-  _extends5 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends5.apply(this, arguments);
-}
-var Input = ({ label, labelVisuallyHidden, description, descriptionVisuallyHidden, initialValue, onChange, disabled, placeholder, size, length = 6, validationMessage, validationValence, slots = {} }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const inputId = (_b = (_a = slots.input) == null ? void 0 : _a.id) != null ? _b : useId("input");
-  const descriptionId = useId("input-description");
-  const validationId = useId("input-validation");
-  const isInvalid = !!validationMessage && validationValence === "error";
-  const [_isPending, startTransition] = useTransition();
-  const [internalValue, setInternalValue] = useState2((initialValue == null ? void 0 : initialValue.toString()) || "");
-  const onInternalChange = useCallback2((e) => {
-    var _a2;
-    const nextValue = ((_a2 = e.target) == null ? void 0 : _a2.value) || "";
-    setInternalValue(nextValue);
-    onChange && startTransition(() => {
-      onChange(nextValue);
-    });
+var useTogglePanelSidebar = () => {
+  const { displayState, setDisplayState } = useContext(PanelSidebarContext);
+  return useCallback(() => {
+    setDisplayState(displayState === "hide" ? "show" : "hide");
   }, [
-    onChange
+    displayState
   ]);
-  const bareInputBaseProps = {
-    ...slots.input,
-    id: inputId,
-    ...((_c = slots.input) == null ? void 0 : _c.required) && {
-      required: true
-    },
-    ...disabled && {
-      disabled: true
-    },
-    ...description && {
-      "aria-describedby": descriptionId
-    },
-    ...isInvalid && {
-      "aria-invalid": "true",
-      "aria-errormessage": validationId
-    },
-    placeholder,
-    value: internalValue,
-    onChange: onInternalChange,
-    inputSlot: slots.input,
-    validationMessage,
-    validationValence
-  };
-  const bareInput = size === "pin" ? /* @__PURE__ */ React5.createElement(BarePinInput, _extends5({}, bareInputBaseProps, {
-    length
-  })) : size === "textarea" ? /* @__PURE__ */ React5.createElement(BareTextareaInput, _extends5({}, bareInputBaseProps)) : /* @__PURE__ */ React5.createElement(BareTextInput, _extends5({}, bareInputBaseProps, {
-    size
-  }));
-  return /* @__PURE__ */ React5.createElement("div", {
-    role: "none",
-    className: mx("mlb-4", (_d = slots.root) == null ? void 0 : _d.className)
-  }, /* @__PURE__ */ React5.createElement("label", _extends5({}, slots.label, {
-    htmlFor: inputId,
-    className: mx("block pbe-1 text-sm font-medium text-neutral-900 dark:text-neutral-100", labelVisuallyHidden && "sr-only", (_e = slots.label) == null ? void 0 : _e.className)
-  }), label), bareInput, (description || validationMessage) && /* @__PURE__ */ React5.createElement("p", _extends5({}, !isInvalid && {
-    id: descriptionId
-  }, {
-    className: mx(descriptionVisuallyHidden && !isInvalid && "sr-only")
-  }), validationMessage && /* @__PURE__ */ React5.createElement("span", {
-    id: validationId,
-    className: mx(valenceColorText(validationValence), (_f = slots.validation) == null ? void 0 : _f.className)
-  }, validationMessage, " "), /* @__PURE__ */ React5.createElement("span", _extends5({}, isInvalid && {
-    id: descriptionId
-  }, {
-    className: mx(defaultDescription, descriptionVisuallyHidden && "sr-only", (_g = slots.description) == null ? void 0 : _g.className)
-  }), description)));
 };
-
-// packages/common/react-ui/src/components/AlertDialog/AlertDialog.tsx
-function _extends6() {
-  _extends6 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends6.apply(this, arguments);
-}
-var AlertDialog = ({ title, titleVisuallyHidden, description, openTrigger, cancelTrigger, confirmTrigger, destructiveConfirmString, destructiveConfirmInputProps, children, initiallyOpen, mountAsSibling, slots = {} }) => {
-  var _a, _b, _c, _d, _e;
-  const [isOpen, setIsOpen] = useState3(!!initiallyOpen);
-  const [confirmDisabled, setConfirmDisabled] = useState3(!!destructiveConfirmString);
-  const [confirmStringValue, setConfirmStringValue] = useState3("");
-  useEffect3(() => {
-    if (destructiveConfirmString) {
-      setConfirmDisabled(confirmStringValue !== destructiveConfirmString);
-    }
-  }, [
-    confirmStringValue
-  ]);
-  const dialogOverlayAndContent = /* @__PURE__ */ React6.createElement(Transition.Root, {
-    show: isOpen
-  }, /* @__PURE__ */ React6.createElement(Transition.Child, {
-    as: Fragment,
-    enter: "ease-out duration-300",
-    enterFrom: "opacity-0",
-    enterTo: "opacity-100",
-    leave: "ease-in duration-200",
-    leaveFrom: "opacity-100",
-    leaveTo: "opacity-0"
-  }, /* @__PURE__ */ React6.createElement(AlertDialogPrimitive.Overlay, {
-    forceMount: true,
-    className: mx("fixed inset-0 z-20 bg-black/50", (_a = slots.overlay) == null ? void 0 : _a.className)
-  })), /* @__PURE__ */ React6.createElement(Transition.Child, {
-    as: Fragment,
-    enter: "ease-out duration-300",
-    enterFrom: "opacity-0 scale-95",
-    enterTo: "opacity-100 scale-100",
-    leave: "ease-in duration-200",
-    leaveFrom: "opacity-100 scale-100",
-    leaveTo: "opacity-0 scale-95"
-  }, /* @__PURE__ */ React6.createElement(AlertDialogPrimitive.Content, _extends6({
-    forceMount: true
-  }, slots.content, {
-    className: mx("fixed z-50", "w-[95vw] max-w-md rounded-xl p-4 md:w-full", "top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", "shadow-2xl bg-white dark:bg-neutral-800 elevated-buttons", defaultFocus, (_b = slots.content) == null ? void 0 : _b.className)
-  }), /* @__PURE__ */ React6.createElement(AlertDialogPrimitive.Title, _extends6({
-    tabIndex: 0
-  }, slots.title, {
-    className: mx("text-2xl font-display font-medium text-neutral-900 dark:text-neutral-100 rounded-md", titleVisuallyHidden && "sr-only", defaultFocus, (_c = slots.title) == null ? void 0 : _c.className)
-  }), title), description && /* @__PURE__ */ React6.createElement(AlertDialogPrimitive.Description, _extends6({}, slots.description, {
-    className: mx("my-2", defaultDescription, (_d = slots.description) == null ? void 0 : _d.className)
-  }), description), children, destructiveConfirmInputProps && /* @__PURE__ */ React6.createElement(Input, _extends6({}, destructiveConfirmInputProps, {
-    onChange: setConfirmStringValue
-  })), /* @__PURE__ */ React6.createElement("div", _extends6({}, slots.actions, {
-    className: mx("flex flex-wrap justify-end gap-4", (_e = slots.actions) == null ? void 0 : _e.className)
-  }), cancelTrigger && /* @__PURE__ */ React6.createElement(AlertDialogPrimitive.Cancel, {
-    asChild: typeof cancelTrigger !== "string"
-  }, cancelTrigger), /* @__PURE__ */ React6.createElement(AlertDialogPrimitive.Action, {
-    asChild: true
-  }, /* @__PURE__ */ cloneElement(confirmTrigger, {
-    disabled: confirmDisabled
-  }))))));
-  return /* @__PURE__ */ React6.createElement(AlertDialogPrimitive.Root, {
+var PanelSidebarProvider = ({ children, slots }) => {
+  var _a, _b;
+  const { t } = useTranslation("os");
+  const [displayState, setInternalDisplayState] = useState("hide");
+  const [transitionShow, setTransitionShow] = useState(false);
+  const isOpen = displayState === "show";
+  const [isLg] = useMediaQuery("lg");
+  const internalHide = () => {
+    setTransitionShow(false);
+    setTimeout(() => {
+      setInternalDisplayState("hide");
+    }, 200);
+  };
+  const internalShow = () => {
+    setInternalDisplayState("show");
+    setTimeout(() => {
+      setTransitionShow(true);
+    }, 0);
+  };
+  const setDisplayState = (displayState2) => displayState2 === "show" ? internalShow() : internalHide();
+  return /* @__PURE__ */ React2.createElement(PanelSidebarContext.Provider, {
+    value: {
+      setDisplayState,
+      displayState
+    }
+  }, /* @__PURE__ */ React2.createElement(DialogPrimitive.Root, {
     open: isOpen,
-    onOpenChange: setIsOpen
-  }, openTrigger && /* @__PURE__ */ React6.createElement(AlertDialogPrimitive.Trigger, {
-    asChild: true
-  }, openTrigger), mountAsSibling ? dialogOverlayAndContent : /* @__PURE__ */ React6.createElement(AlertDialogPrimitive.Portal, null, dialogOverlayAndContent));
-};
-
-// packages/common/react-ui/src/components/Avatar/Avatar.tsx
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import * as PortalPrimitive from "@radix-ui/react-portal";
-import { toSvg } from "jdenticon";
-import React7, { cloneElement as cloneElement2, forwardRef as forwardRef2, useMemo as useMemo2 } from "react";
-function _extends7() {
-  _extends7 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends7.apply(this, arguments);
-}
-var shapeStyles = {
-  circle: "rounded-full",
-  square: "rounded"
-};
-var Avatar = /* @__PURE__ */ forwardRef2(({ mediaSrc, mediaAlt, fallbackValue, label, variant = "square", size = 10, slots = {} }, ref) => {
-  var _a, _b, _c;
-  const labelId = useId("avatarLabel");
-  const imgSrc = useMemo2(() => `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(fallbackValue, size === "px" ? 1 : size * 4))}`, [
-    fallbackValue
-  ]);
-  return /* @__PURE__ */ React7.createElement(React7.Fragment, null, /* @__PURE__ */ React7.createElement(AvatarPrimitive.Root, _extends7({}, slots.root, {
-    className: mx("relative inline-flex", getSize(size), (_a = slots.root) == null ? void 0 : _a.className),
-    "aria-labelledby": labelId,
-    ref
-  }), mediaSrc && /* @__PURE__ */ React7.createElement(AvatarPrimitive.Image, _extends7({}, slots.image, {
-    src: mediaSrc,
-    alt: mediaAlt != null ? mediaAlt : "Avatar",
-    className: mx("h-full w-full object-cover overflow-hidden", shapeStyles[variant], (_b = slots.image) == null ? void 0 : _b.className)
-  })), /* @__PURE__ */ React7.createElement(AvatarPrimitive.Fallback, _extends7({
-    delayMs: 0
-  }, slots.fallback, {
-    className: mx("shrink-0 flex h-full w-full items-center justify-center bg-white dark:bg-neutral-800 overflow-hidden", shapeStyles[variant], (_c = slots.fallback) == null ? void 0 : _c.className)
-  }), /* @__PURE__ */ React7.createElement("img", {
-    role: "none",
-    alt: fallbackValue,
-    src: imgSrc,
-    className: "h-full w-full"
-  }))), typeof label === "string" ? /* @__PURE__ */ React7.createElement(PortalPrimitive.Root, {
-    asChild: true
-  }, /* @__PURE__ */ React7.createElement("span", {
-    id: labelId,
+    modal: !isLg
+  }, /* @__PURE__ */ React2.createElement(DialogPrimitive.Content, {
+    className: mx2("fixed block-start-0 block-end-0 is-[272px] z-50 transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out", "bg-neutral-50 dark:bg-neutral-950", transitionShow ? "inline-start-0" : `inline-start-[-${sidebarWidth}px]`)
+  }, /* @__PURE__ */ React2.createElement(DialogPrimitive.Title, {
     className: "sr-only"
-  }, label)) : /* @__PURE__ */ cloneElement2(label, {
-    id: labelId
-  }));
-});
-
-// packages/common/react-ui/src/components/Button/Button.tsx
-import React8, { forwardRef as forwardRef3 } from "react";
-
-// packages/common/react-ui/src/components/Button/buttonStyles.ts
-var primaryButtonColors = "bg-primary-600 text-white hover:bg-primary-650";
-var defaultButtonColors = "bg-white text-neutral-900 dark:bg-neutral-750 dark:text-neutral-50";
-var ghostButtonColors = "";
-var buttonStyles = (props) => {
-  const resolvedVariant = props.variant || "default";
-  return mx(
-    "inline-flex select-none items-center justify-center text-sm font-medium rounded-md transition-color duration-100",
-    props.compact ? "p-1.5" : "pli-4 plb-2",
-    defaultHover(props),
-    resolvedVariant === "default" && "border border-neutral-100 dark:border-neutral-650",
-    resolvedVariant !== "ghost" && !props.disabled && "hover:focus:border-neutral-100 hover:border-transparent",
-    resolvedVariant === "default" && defaultButtonColors,
-    resolvedVariant === "ghost" && ghostButtonColors,
-    resolvedVariant === "primary" && "border border-primary-550 hover:border-transparent",
-    resolvedVariant === "primary" && primaryButtonColors,
-    resolvedVariant === "outline" && "text-neutral-700 border border-neutral-600 dark:border-neutral-300 dark:text-neutral-150",
-    defaultFocus,
-    props.disabled ? defaultDisabled : resolvedVariant !== "outline" && resolvedVariant !== "ghost" && "button-elevation",
-    "group",
-    defaultActive
-  );
-};
-
-// packages/common/react-ui/src/components/Button/Button.tsx
-function _extends8() {
-  _extends8 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends8.apply(this, arguments);
-}
-var Button = /* @__PURE__ */ forwardRef3(({ children, compact, variant, ...rootSlot }, ref) => /* @__PURE__ */ React8.createElement("button", _extends8({
-  ref
-}, rootSlot, {
-  className: mx(buttonStyles({
-    compact,
-    variant,
-    disabled: rootSlot.disabled
-  }), rootSlot.className)
-}, rootSlot.disabled && {
-  disabled: true
-}), children));
-
-// packages/common/react-ui/src/components/Button/ButtonGroup.tsx
-import React9 from "react";
-function _extends9() {
-  _extends9 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends9.apply(this, arguments);
-}
-var ButtonGroup = ({ children, ...divProps }) => {
-  return /* @__PURE__ */ React9.createElement("div", _extends9({
+  }, t("sidebar label")), /* @__PURE__ */ React2.createElement(Fragment, _extends2({}, slots == null ? void 0 : slots.content))), (slots == null ? void 0 : slots.fixedBlockStart) && /* @__PURE__ */ React2.createElement("div", _extends2({
     role: "none"
-  }, divProps, {
-    className: mx("button-elevation [&>*]:grouped-buttons rounded-md", divProps.className)
-  }), children);
-};
-
-// packages/common/react-ui/src/components/CompoundButton/CompoundButton.tsx
-import React10 from "react";
-function _extends10() {
-  _extends10 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends10.apply(this, arguments);
-}
-var CompoundButton = ({ children, description, before, after, ...buttonProps }) => {
-  const variant = buttonProps.variant || "default";
-  const labelId = useId("compoundButton-label");
-  const descriptionId = useId("compoundButton-description");
-  return /* @__PURE__ */ React10.createElement("button", _extends10({}, buttonProps, {
-    className: mx(buttonStyles(buttonProps), "flex items-center gap-4 py-2.5", buttonProps.className),
-    "aria-labelledby": labelId
-  }, description && {
-    "aria-describedby": descriptionId
-  }), before && /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
-    className: "grow-0"
-  }, before), /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
-    className: "grow flex flex-col gap-1 text-left"
-  }, /* @__PURE__ */ React10.createElement("p", {
-    id: labelId
-  }, children), description && /* @__PURE__ */ React10.createElement("p", {
-    id: descriptionId,
-    className: mx("text-xs font-normal mb-1", variant === "primary" ? primaryDescription : defaultDescription)
-  }, description)), after && /* @__PURE__ */ React10.createElement("div", {
-    role: "none",
-    className: "grow-0"
-  }, after));
-};
-
-// packages/common/react-ui/src/components/Dialog/Dialog.tsx
-import { Transition as Transition2 } from "@headlessui/react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "phosphor-react";
-import React12, { Fragment as Fragment2, useState as useState5 } from "react";
-
-// packages/common/react-ui/src/components/Tooltip/Tooltip.tsx
-import * as PortalPrimitive2 from "@radix-ui/react-portal";
-import { Button as ToolbarButtonItem } from "@radix-ui/react-toolbar";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import React11, { useState as useState4 } from "react";
-function _extends11() {
-  _extends11 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends11.apply(this, arguments);
-}
-var Tooltip = ({ content, children, side, compact, tooltipLabelsTrigger, mountAsSibling, triggerIsInToolbar, zIndex = "z-[2]", slots = {} }) => {
-  var _a, _b, _c, _d;
-  const [isOpen, setIsOpen] = useState4(false);
-  const labelId = useId("tooltipLabel");
-  const tooltipContent = /* @__PURE__ */ React11.createElement(TooltipPrimitive.Content, _extends11({
-    forceMount: true
-  }, slots.content, {
-    side: (_b = side != null ? side : (_a = slots.content) == null ? void 0 : _a.side) != null ? _b : "top",
-    className: mx("radix-side-top:animate-slide-down-fade", "radix-side-right:animate-slide-left-fade", "radix-side-bottom:animate-slide-up-fade", "radix-side-left:animate-slide-right-fade", "inline-flex items-center rounded-md", zIndex, !compact && "px-4 py-2.5", "shadow-lg bg-white dark:bg-neutral-800", !isOpen && "sr-only", defaultTooltip, (_c = slots.content) == null ? void 0 : _c.className)
-  }), /* @__PURE__ */ React11.createElement(TooltipPrimitive.Arrow, {
-    className: mx("fill-current text-white dark:text-neutral-800", (_d = slots.arrow) == null ? void 0 : _d.className)
-  }), content);
-  const triggerContent = /* @__PURE__ */ React11.createElement(TooltipPrimitive.Trigger, _extends11({
-    asChild: true
-  }, tooltipLabelsTrigger && {
-    "aria-labelledby": labelId
-  }), children);
-  return /* @__PURE__ */ React11.createElement(TooltipPrimitive.Root, {
-    open: isOpen,
-    onOpenChange: setIsOpen
-  }, triggerIsInToolbar ? /* @__PURE__ */ React11.createElement(ToolbarButtonItem, {
-    asChild: true
-  }, triggerContent) : triggerContent, tooltipLabelsTrigger && /* @__PURE__ */ React11.createElement(PortalPrimitive2.Root, {
-    asChild: true
-  }, /* @__PURE__ */ React11.createElement("span", {
-    id: labelId,
-    className: "sr-only"
-  }, content)), mountAsSibling ? tooltipContent : /* @__PURE__ */ React11.createElement(TooltipPrimitive.Portal, {
-    forceMount: true
-  }, tooltipContent));
-};
-
-// packages/common/react-ui/src/components/Dialog/Dialog.tsx
-function _extends12() {
-  _extends12 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends12.apply(this, arguments);
-}
-var Dialog = ({ title, titleVisuallyHidden, description, openTrigger, children, closeTriggers, closeLabel, initiallyOpen, mountAsSibling, slots = {} }) => {
-  var _a, _b, _c, _d, _e, _f, _g;
-  const [isOpen, setIsOpen] = useState5(!!initiallyOpen);
-  const dialogOverlayAndContent = /* @__PURE__ */ React12.createElement(Transition2.Root, {
-    show: isOpen
-  }, /* @__PURE__ */ React12.createElement(Transition2.Child, {
-    as: Fragment2,
-    enter: "linear duration-300",
-    enterFrom: "opacity-0",
-    enterTo: "opacity-100",
-    leave: "linear duration-200",
-    leaveFrom: "opacity-100",
-    leaveTo: "opacity-0"
-  }, /* @__PURE__ */ React12.createElement(DialogPrimitive.Overlay, _extends12({
-    forceMount: true
-  }, slots.overlay, {
-    className: mx("fixed inset-0 z-20 bg-black/50", (_a = slots.overlay) == null ? void 0 : _a.className)
-  }))), /* @__PURE__ */ React12.createElement(Transition2.Child, {
-    as: Fragment2,
-    enter: "ease-out duration-300",
-    enterFrom: "opacity-0 scale-95",
-    enterTo: "opacity-100 scale-100",
-    leave: "ease-in duration-200",
-    leaveFrom: "opacity-100 scale-100",
-    leaveTo: "opacity-0 scale-95"
-  }, /* @__PURE__ */ React12.createElement(DialogPrimitive.Content, _extends12({
-    forceMount: true
-  }, slots.content, {
-    className: mx("fixed z-50", "w-[95vw] max-w-md rounded-xl p-4 md:w-full", "top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]", "shadow-2xl bg-white dark:bg-neutral-800 elevated-buttons", defaultFocus, (_b = slots.content) == null ? void 0 : _b.className)
-  }), /* @__PURE__ */ React12.createElement(DialogPrimitive.Title, _extends12({}, slots.title, {
-    className: mx("text-2xl font-display font-medium text-neutral-900 dark:text-neutral-100 rounded-md", titleVisuallyHidden && "sr-only", defaultFocus, (_c = slots.content) == null ? void 0 : _c.className),
-    tabIndex: 0
-  }), title), description && /* @__PURE__ */ React12.createElement(DialogPrimitive.Description, _extends12({}, slots.description, {
-    className: mx("mt-2", defaultDescription, (_d = slots.description) == null ? void 0 : _d.className)
-  }), description), children, closeLabel && /* @__PURE__ */ React12.createElement(Tooltip, {
-    zIndex: "z-[51]",
-    content: closeLabel
-  }, /* @__PURE__ */ React12.createElement(DialogPrimitive.Close, {
-    className: mx("absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-sm p-1", defaultFocus, defaultHover({}), (_e = slots.close) == null ? void 0 : _e.className)
-  }, /* @__PURE__ */ React12.createElement(X, {
-    className: mx(getSize(4), "text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-400", (_f = slots.closeIcon) == null ? void 0 : _f.className)
-  }))), closeTriggers && /* @__PURE__ */ React12.createElement("div", _extends12({}, slots.closeTriggers, {
-    className: mx("flex flex-wrap justify-end gap-4", (_g = slots.closeTriggers) == null ? void 0 : _g.className)
-  }), closeTriggers.map((closeTrigger, key) => /* @__PURE__ */ React12.createElement(DialogPrimitive.Close, {
-    key
-  }, closeTrigger))))));
-  return /* @__PURE__ */ React12.createElement(DialogPrimitive.Root, {
-    open: isOpen,
-    onOpenChange: setIsOpen
-  }, openTrigger && /* @__PURE__ */ React12.createElement(DialogPrimitive.Trigger, {
-    asChild: true
-  }, openTrigger), mountAsSibling ? dialogOverlayAndContent : /* @__PURE__ */ React12.createElement(DialogPrimitive.Portal, null, dialogOverlayAndContent));
-};
-
-// packages/common/react-ui/src/components/Group/Group.tsx
-import React14 from "react";
-
-// packages/common/react-ui/src/components/Heading/Heading.tsx
-import { createElement } from "react";
-var levelClassNameMap = /* @__PURE__ */ new Map([
-  [
-    1,
-    "text-5xl"
-  ],
-  [
-    2,
-    "text-4xl"
-  ],
-  [
-    3,
-    "text-3xl"
-  ],
-  [
-    4,
-    "text-2xl"
-  ],
-  [
-    5,
-    "text-xl"
-  ],
-  [
-    6,
-    "text-lg"
-  ]
-]);
-var Heading = ({ level, ...rootSlot }) => {
-  const resolvedLevel = level || 1;
-  return /* @__PURE__ */ createElement(`h${resolvedLevel}`, {
-    ...rootSlot,
-    className: mx("font-bold font-display", levelClassNameMap.get(resolvedLevel), rootSlot.className)
-  });
-};
-
-// packages/common/react-ui/src/components/Group/Group.tsx
-function _extends13() {
-  _extends13 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends13.apply(this, arguments);
-}
-var Group = ({ elevation = 3, children, label, labelVisuallyHidden, ...rootSlot }) => {
-  const labelId = useId("groupLabel");
-  return /* @__PURE__ */ React14.createElement("div", _extends13({
-    role: "group",
-    "aria-labelledby": labelId
-  }, rootSlot, {
-    className: mx(defaultGroup({
-      elevation
-    }), rootSlot == null ? void 0 : rootSlot.className)
-  }), /* @__PURE__ */ React14.createElement(Heading, _extends13({}, label, {
-    id: labelId,
-    className: mx(labelVisuallyHidden && "sr-only", "mb-2", label == null ? void 0 : label.className)
-  })), children);
-};
-
-// packages/common/react-ui/src/components/Loading/Loading.tsx
-import React15 from "react";
-function _extends14() {
-  _extends14 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends14.apply(this, arguments);
-}
-var sizeMap2 = /* @__PURE__ */ new Map([
-  [
-    "sm",
-    "w-4 h-4"
-  ],
-  [
-    "md",
-    "w-8 h-8"
-  ],
-  [
-    "lg",
-    "w-12 h-12"
-  ],
-  [
-    "xl",
-    "w-16 h-16"
-  ]
-]);
-var Loading = ({ size, color, label, slots = {} }) => {
-  var _a, _b;
-  const labelId = useId("loading-label");
-  const sizeClassName = sizeMap2.get(size != null ? size : "md");
-  return /* @__PURE__ */ React15.createElement("div", _extends14({}, slots.root, {
-    className: mx("flex justify-center p-4", (_a = slots.root) == null ? void 0 : _a.className),
-    role: "status",
-    "aria-labelledby": labelId
-  }), /* @__PURE__ */ React15.createElement("svg", {
+  }, slots == null ? void 0 : slots.fixedBlockStart, {
+    className: mx2("fixed inline-end-0 block-start-0 z-[49] transition-[inset-inline-start,inset-inline-end] duration-200 ease-in-out", transitionShow ? "inline-start-[272px]" : "inline-start-0", (_a = slots == null ? void 0 : slots.fixedBlockStart) == null ? void 0 : _a.className)
+  }), (_b = slots == null ? void 0 : slots.fixedBlockStart) == null ? void 0 : _b.children), !isLg && /* @__PURE__ */ React2.createElement(DialogPrimitive.Overlay, {
+    className: mx2(defaultOverlay, "transition-opacity duration-200 ease-in-out", transitionShow ? "opacity-100" : "opacity-0"),
+    onClick: internalHide
+  }), /* @__PURE__ */ React2.createElement("div", {
     role: "none",
-    className: mx(sizeClassName, "text-neutral-200/50 animate-spin dark:text-neutral-600/50", color === "neutral" ? "fill-neutral-400" : "fill-primary-400", (_b = slots.svg) == null ? void 0 : _b.className),
-    viewBox: "0 0 100 101",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
-  }, /* @__PURE__ */ React15.createElement("path", {
-    d: "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
-    fill: "currentColor"
-  }), /* @__PURE__ */ React15.createElement("path", {
-    d: "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
-    fill: "currentFill"
-  })), /* @__PURE__ */ React15.createElement("span", {
-    className: "sr-only",
-    id: labelId
-  }, label));
+    className: mx2("bs-full transition-[padding-inline-start] duration-200 ease-in-out", isLg && isOpen ? "pis-[272px]" : "pis-0")
+  }, children)));
 };
 
-// packages/common/react-ui/src/components/NavMenu/NavMenu.tsx
-import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
-import React16, { forwardRef as forwardRef4 } from "react";
-function _extends15() {
-  _extends15 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends15.apply(this, arguments);
-}
-var NavMenuInvokerItem = /* @__PURE__ */ forwardRef4(({ content, children, active }, ref) => {
-  return /* @__PURE__ */ React16.createElement(NavigationMenuPrimitive.Item, {
-    ref
-  }, /* @__PURE__ */ React16.createElement(NavigationMenuPrimitive.Trigger, {
-    className: mx("px-3 py-2 text-sm rounded-md text-sm font-medium transition-color", active ? primaryButtonColors : defaultButtonColors, defaultFocus, defaultHover({}))
-  }, children), /* @__PURE__ */ React16.createElement(NavigationMenuPrimitive.Content, {
-    className: mx("absolute w-auto top-0 left-0 rounded-lg", "radix-motion-from-start:animate-enter-from-left", "radix-motion-from-end:animate-enter-from-right", "radix-motion-to-start:animate-exit-to-left", "radix-motion-to-end:animate-exit-to-right")
-  }, content));
-});
-var NavMenuLinkItem = /* @__PURE__ */ forwardRef4(({ triggerLinkProps, children, active }, ref) => /* @__PURE__ */ React16.createElement(NavigationMenuPrimitive.Item, {
-  asChild: true,
-  ref
-}, /* @__PURE__ */ React16.createElement(NavigationMenuPrimitive.Link, _extends15({}, triggerLinkProps, {
-  active,
-  className: mx("px-3 py-2 text-sm rounded-md transition-color", active ? primaryButtonColors : defaultButtonColors, active ? "font-medium" : "font-normal", defaultFocus, defaultHover({}), triggerLinkProps.className)
-}), children)));
-var NavMenuTooltipLinkItem = /* @__PURE__ */ forwardRef4(({ tooltip, triggerLinkProps, active, children }, ref) => /* @__PURE__ */ React16.createElement(Tooltip, _extends15({}, tooltip), /* @__PURE__ */ React16.createElement(NavigationMenuPrimitive.Item, {
-  asChild: true,
-  ref
-}, /* @__PURE__ */ React16.createElement(NavigationMenuPrimitive.Link, _extends15({}, triggerLinkProps, {
-  active,
-  className: mx("px-3 py-2 text-sm rounded-md transition-color", active ? primaryButtonColors : defaultButtonColors, active ? "font-medium" : "font-normal", defaultFocus, defaultHover({}), triggerLinkProps.className)
-}), children))));
-var NavMenuLink = NavigationMenuPrimitive.Link;
-var NavMenuSeparatorItem = (_props) => {
-  return /* @__PURE__ */ React16.createElement("span", {
-    role: "none",
-    className: mx(defaultInlineSeparator, "bs-5")
-  });
-};
-var isTooltipLinkItem = (o) => "tooltip" in o;
-var isLinkItem = (o) => "triggerLinkProps" in o;
-var isSeparator = (o) => "separator" in o;
-var NavMenu = ({ items, slots = {} }) => {
-  var _a, _b, _c, _d, _e;
-  return /* @__PURE__ */ React16.createElement(NavigationMenuPrimitive.Root, _extends15({}, slots.root, {
-    className: mx("flex justify-center", (_a = slots.root) == null ? void 0 : _a.className)
-  }), /* @__PURE__ */ React16.createElement(NavigationMenuPrimitive.List, _extends15({}, slots.list, {
-    className: mx("relative flex flex-row items-center gap-1 rounded-lg bg-white dark:bg-neutral-750 p-1 button-elevation overflow-x-auto", (_b = slots.list) == null ? void 0 : _b.className)
-  }), items.map((item, i) => {
-    return isTooltipLinkItem(item) ? /* @__PURE__ */ React16.createElement(NavMenuTooltipLinkItem, _extends15({
-      key: i
-    }, item)) : isLinkItem(item) ? /* @__PURE__ */ React16.createElement(NavMenuLinkItem, _extends15({
-      key: i
-    }, item)) : isSeparator(item) ? /* @__PURE__ */ React16.createElement(NavMenuSeparatorItem, _extends15({
-      key: i
-    }, item)) : /* @__PURE__ */ React16.createElement(NavMenuInvokerItem, _extends15({
-      key: i
-    }, item));
-  }), /* @__PURE__ */ React16.createElement(NavigationMenuPrimitive.Indicator, _extends15({}, slots.indicator, {
-    className: mx("z-10 top-[100%] flex items-end justify-center h-2 overflow-hidden", "radix-state-visible:animate-fade-in", "radix-state-hidden:animate-fade-out", "transition-[width_transform] duration-[250ms] ease-[ease]", (_c = slots.indicator) == null ? void 0 : _c.className)
-  }), /* @__PURE__ */ React16.createElement("div", {
-    className: mx("top-1 relative bg-white dark:bg-neutral-750 w-2 h-2 rotate-45", (_d = slots.indicatorIcon) == null ? void 0 : _d.className)
-  }))), /* @__PURE__ */ React16.createElement("div", {
-    className: mx("absolute flex justify-center", "w-[140%] left-[-20%] top-[100%]"),
-    style: {
-      perspective: "2000px"
-    }
-  }, /* @__PURE__ */ React16.createElement(NavigationMenuPrimitive.Viewport, _extends15({}, slots.viewport, {
-    className: mx("relative mbs-2 shadow-lg rounded-md bg-white dark:bg-neutral-750 overflow-hidden", "w-radix-navigation-menu-viewport", "h-radix-navigation-menu-viewport", "radix-state-open:animate-scale-in-content", "radix-state-closed:animate-scale-out-content", "origin-[top_center] transition-[width_height] duration-300 ease-[ease]", (_e = slots.viewport) == null ? void 0 : _e.className)
-  }))));
-};
-
-// packages/common/react-ui/src/components/Popover/Popover.tsx
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import { Button as ToolbarButtonItem2 } from "@radix-ui/react-toolbar";
-import { X as X2 } from "phosphor-react";
-import React17, { useCallback as useCallback3, useState as useState6 } from "react";
-function _extends16() {
-  _extends16 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends16.apply(this, arguments);
-}
-var Popover = ({ openTrigger, children, closeLabel, initiallyOpen, mountAsSibling, triggerIsInToolbar, slots = {} }) => {
-  var _a, _b, _c, _d, _e, _f;
-  const [isOpen, setIsOpen] = useState6(!!initiallyOpen);
-  const onKeyUp = useCallback3((e) => {
-    var _a2, _b2;
-    const keyUpId = document.activeElement.dataset.keyupid;
-    if (keyUpId && e.key === " ") {
-      setIsOpen(keyUpId === "open");
-    }
-    (_b2 = (_a2 = slots.trigger) == null ? void 0 : _a2.onKeyUp) == null ? void 0 : _b2.call(_a2, e);
-  }, [
-    (_a = slots.trigger) == null ? void 0 : _a.onKeyUp
-  ]);
-  const popoverContent = /* @__PURE__ */ React17.createElement(PopoverPrimitive.Content, _extends16({
-    align: "center"
-  }, slots.content, {
-    className: mx("radix-side-top:animate-slide-up radix-side-bottom:animate-slide-down", "rounded-lg p-4 shadow-xl elevated-buttons", "bg-white dark:bg-neutral-800", defaultFocus, (_b = slots.content) == null ? void 0 : _b.className)
-  }), /* @__PURE__ */ React17.createElement(PopoverPrimitive.Arrow, {
-    className: mx("fill-current text-white dark:text-neutral-800", (_c = slots.arrow) == null ? void 0 : _c.className)
-  }), children, closeLabel && /* @__PURE__ */ React17.createElement(PopoverPrimitive.Close, _extends16({}, slots.close, {
-    className: mx("absolute top-3.5 right-3.5 inline-flex items-center justify-center rounded-sm p-1", defaultFocus, defaultHover({}), (_d = slots.close) == null ? void 0 : _d.className),
-    "aria-label": closeLabel,
-    "data-keyupid": "close"
-  }), /* @__PURE__ */ React17.createElement(X2, _extends16({}, slots.closeIcon, {
-    className: mx(getSize(4), "text-neutral-500 hover:text-neutral-700 dark:text-neutral-500 dark:hover:text-neutral-400", (_e = slots.closeIcon) == null ? void 0 : _e.className)
-  }))));
-  const trigger = /* @__PURE__ */ React17.createElement(PopoverPrimitive.Trigger, _extends16({}, slots.trigger, {
-    onKeyUp,
-    "data-keyupid": "open",
-    className: mx(defaultHover({}), defaultFocus, defaultActive, (_f = slots.trigger) == null ? void 0 : _f.className)
-  }), openTrigger);
-  return /* @__PURE__ */ React17.createElement(PopoverPrimitive.Root, {
-    open: isOpen,
-    onOpenChange: setIsOpen
-  }, triggerIsInToolbar ? /* @__PURE__ */ React17.createElement(ToolbarButtonItem2, {
-    asChild: true
-  }, trigger) : trigger, mountAsSibling ? popoverContent : /* @__PURE__ */ React17.createElement(PopoverPrimitive.Portal, null, popoverContent));
+// packages/apps/patterns/react-ui/src/panels/IdentityPanel/IdentityPanel.tsx
+import React3 from "react";
+import { useClient } from "@dxos/react-client";
+import { Avatar, Button, ThemeContext, useTranslation as useTranslation2 } from "@dxos/react-components";
+var IdentityPanel = ({ identity, onClickManageProfile }) => {
+  var _a;
+  const { t } = useTranslation2("os");
+  const client = useClient();
+  const defaultManageProfile = () => {
+    const remoteSource = new URL((client == null ? void 0 : client.config.get("runtime.client.remoteSource")) || "https://halo.dxos.org");
+    const tab = window.open(remoteSource.origin, "_blank");
+    tab == null ? void 0 : tab.focus();
+  };
+  return /* @__PURE__ */ React3.createElement(ThemeContext.Provider, {
+    value: {
+      themeVariant: "os"
+    }
+  }, /* @__PURE__ */ React3.createElement("div", {
+    className: "flex flex-col gap-2 justify-center items-center"
+  }, /* @__PURE__ */ React3.createElement(Avatar, {
+    size: 16,
+    variant: "circle",
+    fallbackValue: identity.identityKey.toHex(),
+    label: (_a = identity.displayName) != null ? _a : ""
+  }), /* @__PURE__ */ React3.createElement(Button, {
+    compact: true,
+    onClick: onClickManageProfile != null ? onClickManageProfile : defaultManageProfile,
+    className: "is-full"
+  }, t("manage profile label"))));
 };
 
-// packages/common/react-ui/src/components/QrCode/QrCode.tsx
-import { QrCode as QrCodeIcon, CopySimple } from "phosphor-react";
-import { QRCodeSVG } from "qrcode.react";
-import React18, { useCallback as useCallback4 } from "react";
-function _extends17() {
-  _extends17 = Object.assign || function(target) {
+// packages/apps/patterns/react-ui/src/composites/IdentityPopover/IdentityPopover.tsx
+function _extends3() {
+  _extends3 = Object.assign || function(target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
       for (var key in source) {
@@ -1794,299 +175,56 @@ function _extends17() {
     }
     return target;
   };
-  return _extends17.apply(this, arguments);
+  return _extends3.apply(this, arguments);
 }
-var FullQrCode = ({ value, label, size, buttonCompact = true, slots = {} }) => {
+var IdentityPopover = ({ identity, openTrigger, slots, triggerIsInToolbar = true, onClickManageProfile, ...popoverProps }) => {
   var _a, _b;
-  const labelId = useId("qr-label");
-  const copyValue = useCallback4(() => {
-    void navigator.clipboard.writeText(value);
-  }, [
-    value
-  ]);
-  return /* @__PURE__ */ React18.createElement(Tooltip, _extends17({
-    content: label
-  }, slots.tooltipContent), /* @__PURE__ */ React18.createElement(Button, _extends17({
-    compact: buttonCompact
-  }, slots.button, {
-    className: mx("overflow-hidden p-0", getSize(size != null ? size : 32), (_a = slots.button) == null ? void 0 : _a.className),
-    onClick: copyValue
-  }), /* @__PURE__ */ React18.createElement(QRCodeSVG, _extends17({
-    includeMargin: true,
-    role: "none"
-  }, slots.qrSvg, {
-    value,
-    className: mx("w-full h-auto", (_b = slots.qrSvg) == null ? void 0 : _b.className)
-  })), /* @__PURE__ */ React18.createElement("div", {
-    id: labelId,
-    className: "sr-only"
-  }, label)));
-};
-var CompactQrCode = ({ value, displayQrLabel, copyLabel, buttonCompact, slots = {} }) => {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const labelId = useId("qr-label");
-  const copyValue = useCallback4(() => {
-    void navigator.clipboard.writeText(value);
-  }, [
-    value
-  ]);
-  return /* @__PURE__ */ React18.createElement(React18.Fragment, null, /* @__PURE__ */ React18.createElement(ButtonGroup, {
-    className: "inline-flex grow md:hidden"
-  }, /* @__PURE__ */ React18.createElement("span", {
-    className: "sr-only",
-    id: labelId
-  }, displayQrLabel), /* @__PURE__ */ React18.createElement(Tooltip, {
-    compact: true,
-    slots: {
-      content: {
-        ...slots.qrTooltipContent,
-        side: (_b = (_a = slots == null ? void 0 : slots.qrTooltipContent) == null ? void 0 : _a.side) != null ? _b : "left"
-      }
-    },
-    content: /* @__PURE__ */ React18.createElement("div", {
-      role: "none",
-      className: "overflow-hidden rounded-md"
-    }, /* @__PURE__ */ React18.createElement(QRCodeSVG, _extends17({
-      includeMargin: true,
-      role: "none"
-    }, slots.qrSvg, {
-      value,
-      className: mx(getSize(32), (_c = slots.qrSvg) == null ? void 0 : _c.className)
-    })))
-  }, /* @__PURE__ */ React18.createElement(Button, _extends17({
-    compact: buttonCompact
-  }, slots.qrButton, {
-    className: mx("border-ie-0 grow rounded-is-md", (_d = slots.qrButton) == null ? void 0 : _d.className),
-    "aria-labelledby": labelId
-  }), /* @__PURE__ */ React18.createElement(QrCodeIcon, {
-    className: getSize(5)
-  }))), /* @__PURE__ */ React18.createElement(Tooltip, {
-    content: copyLabel,
-    tooltipLabelsTrigger: true,
-    slots: {
-      content: slots.qrTooltipContent
-    }
-  }, /* @__PURE__ */ React18.createElement(Button, _extends17({
-    compact: buttonCompact
-  }, slots.copyButton, {
-    className: mx("rounded-ie-md grow", (_e = slots.copyButton) == null ? void 0 : _e.className),
-    onClick: copyValue
-  }), /* @__PURE__ */ React18.createElement(CopySimple, {
-    className: getSize(5)
-  })))), /* @__PURE__ */ React18.createElement(ButtonGroup, {
-    className: "hidden md:inline-flex"
-  }, /* @__PURE__ */ React18.createElement(Tooltip, {
-    compact: true,
+  return /* @__PURE__ */ React4.createElement(PanelPopover, _extends3({}, popoverProps, {
+    openTrigger: openTrigger != null ? openTrigger : /* @__PURE__ */ React4.createElement(Avatar2, {
+      size: 10,
+      variant: "circle",
+      fallbackValue: identity.identityKey.toHex(),
+      label: (_a = identity.displayName) != null ? _a : ""
+    }),
     slots: {
-      content: {
-        ...slots.qrTooltipContent,
-        side: (_g = (_f = slots == null ? void 0 : slots.qrTooltipContent) == null ? void 0 : _f.side) != null ? _g : "left"
+      ...slots,
+      trigger: {
+        ...slots == null ? void 0 : slots.trigger,
+        className: mx3("flex justify-self-end pointer-events-auto bg-white dark:bg-neutral-700 p-0.5 button-elevation rounded-full", (_b = slots == null ? void 0 : slots.trigger) == null ? void 0 : _b.className)
       }
     },
-    content: /* @__PURE__ */ React18.createElement("div", {
-      role: "none",
-      className: "overflow-hidden rounded-md"
-    }, /* @__PURE__ */ React18.createElement(QRCodeSVG, _extends17({
-      includeMargin: true,
-      role: "none"
-    }, slots.qrSvg, {
-      value,
-      className: mx(getSize(32), (_h = slots.qrSvg) == null ? void 0 : _h.className)
-    })))
-  }, /* @__PURE__ */ React18.createElement(Button, _extends17({
-    compact: buttonCompact
-  }, slots.qrButton, {
-    className: mx("border-ie-0 flex gap-1 rounded-is-md", (_i = slots.qrButton) == null ? void 0 : _i.className)
-  }), /* @__PURE__ */ React18.createElement(QrCodeIcon, {
-    className: getSize(5)
-  }), displayQrLabel)), /* @__PURE__ */ React18.createElement(Button, _extends17({
-    compact: buttonCompact
-  }, slots.copyButton, {
-    className: mx("flex gap-1 rounded-ie-md", (_j = slots.copyButton) == null ? void 0 : _j.className),
-    onClick: copyValue
-  }), /* @__PURE__ */ React18.createElement(CopySimple, {
-    className: getSize(5)
-  }), copyLabel)));
-};
-var QrCode = FullQrCode;
-
-// packages/common/react-ui/src/components/Tag/Tag.tsx
-import React19 from "react";
-function _extends18() {
-  _extends18 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends18.apply(this, arguments);
-}
-var valenceColorMap = {
-  neutral: "bg-neutral-100 text-neutral-800 dark:bg-neutral-700 dark:text-neutral-300",
-  success: "bg-success-100 text-success-800 dark:bg-success-700 dark:text-success-300",
-  info: "bg-info-100 text-info-800 dark:bg-info-700 dark:text-info-300",
-  warning: "bg-warning-100 text-warning-800 dark:bg-warning-700 dark:text-warning-300",
-  error: "bg-error-100 text-error-800 dark:bg-error-700 dark:text-error-300"
-};
-var Tag = ({ children, valence = "neutral", ...rootSlot }) => {
-  return /* @__PURE__ */ React19.createElement("span", _extends18({}, rootSlot, {
-    className: mx("text-xs font-semibold px-2.5 py-0.5 rounded", valenceColorMap[valence], rootSlot == null ? void 0 : rootSlot.className)
-  }), children);
+    triggerIsInToolbar
+  }), /* @__PURE__ */ React4.createElement(IdentityPanel, _extends3({}, {
+    identity,
+    onClickManageProfile
+  })));
 };
 
-// packages/common/react-ui/src/components/Toast/Toast.tsx
-import * as ToastPrimitive from "@radix-ui/react-toast";
-import React20, { cloneElement as cloneElement3, useState as useState7 } from "react";
-function _extends19() {
-  _extends19 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends19.apply(this, arguments);
-}
-var Toast = ({ title, titleVisuallyHidden, description, openTrigger, closeTrigger, actionTriggers, initiallyOpen, slots = {} }) => {
-  var _a, _b, _c, _d;
-  const [isOpen, setIsOpen] = useState7(!!initiallyOpen);
-  return /* @__PURE__ */ React20.createElement(React20.Fragment, null, openTrigger && (typeof openTrigger === "string" ? /* @__PURE__ */ React20.createElement(Button, {
-    onClick: () => setIsOpen(true)
-  }, openTrigger) : /* @__PURE__ */ cloneElement3(openTrigger, {
-    onClick: () => setIsOpen(true)
-  })), /* @__PURE__ */ React20.createElement(ToastPrimitive.Root, _extends19({
-    open: isOpen,
-    onOpenChange: setIsOpen
-  }, slots.root, {
-    className: mx("shadow-lg rounded-lg elevated-buttons flex", "bg-white dark:bg-neutral-800", "radix-state-open:animate-toast-slide-in-bottom md:radix-state-open:animate-toast-slide-in-right", "radix-state-closed:animate-toast-hide", "radix-swipe-end:animate-toast-swipe-out", "translate-x-radix-toast-swipe-move-x", "radix-swipe-cancel:translate-x-0 radix-swipe-cancel:duration-200 radix-swipe-cancel:ease-[ease]", defaultFocus, (_a = slots.root) == null ? void 0 : _a.className)
-  }), /* @__PURE__ */ React20.createElement("div", _extends19({
-    role: "none"
-  }, slots.heading, {
-    className: mx("w-0 flex-1 flex items-center pl-5 py-4 min-h-full", (_b = slots.heading) == null ? void 0 : _b.className)
-  }), /* @__PURE__ */ React20.createElement("div", _extends19({
-    role: "none"
-  }, slots.headingInner, {
-    className: mx("w-full radix flex flex-col justify-center min-h-full gap-1", (_c = slots.headingInner) == null ? void 0 : _c.className)
-  }), /* @__PURE__ */ React20.createElement(ToastPrimitive.Title, {
-    className: mx("text-md font-medium", titleVisuallyHidden && "sr-only")
-  }, title), description && /* @__PURE__ */ React20.createElement(ToastPrimitive.Description, {
-    className: defaultDescription
-  }, description))), /* @__PURE__ */ React20.createElement("div", _extends19({
-    role: "none"
-  }, slots.actions, {
-    className: mx("flex flex-col px-3 py-2 gap-1 items-stretch justify-center min-h-full", (_d = slots.actions) == null ? void 0 : _d.className)
-  }), (actionTriggers || []).map(({ altText, trigger }, index) => /* @__PURE__ */ React20.createElement(ToastPrimitive.Action, {
-    key: index,
-    altText,
-    asChild: typeof trigger !== "string"
-  }, trigger)), closeTrigger && /* @__PURE__ */ React20.createElement(ToastPrimitive.Close, {
-    asChild: typeof closeTrigger !== "string"
-  }, closeTrigger))));
+// packages/apps/patterns/react-ui/src/translations/locales/en-US.ts
+var en_US_exports = {};
+__export(en_US_exports, {
+  os: () => os
+});
+var os = {
+  "manage profile label": "Manage identity",
+  "identity offline description": "Offline",
+  "sidebar label": "DXOS sidebar"
 };
 
-// packages/common/react-ui/src/components/UiProvider/UiProvider.tsx
-import { Provider as ToastProvider, Viewport as ToastViewport } from "@radix-ui/react-toast";
-import { Provider as TooltipProvider } from "@radix-ui/react-tooltip";
-import React21 from "react";
-function _extends20() {
-  _extends20 = Object.assign || function(target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-    return target;
-  };
-  return _extends20.apply(this, arguments);
-}
-var UiProvider = ({ children, tooltipProviderProps, toastProviderProps, toastViewportProps }) => {
-  return /* @__PURE__ */ React21.createElement(ToastProvider, _extends20({}, toastProviderProps), /* @__PURE__ */ React21.createElement(TooltipProvider, _extends20({
-    delayDuration: 0
-  }, tooltipProviderProps), children), /* @__PURE__ */ React21.createElement(ToastViewport, _extends20({}, toastViewportProps, {
-    className: mx("z-50 fixed bottom-4 inset-x-4 w-auto md:top-4 md:right-4 md:left-auto md:bottom-auto md:w-full md:max-w-sm rounded-lg flex flex-col gap-2", defaultFocus, toastViewportProps == null ? void 0 : toastViewportProps.className)
-  })));
+// packages/apps/patterns/react-ui/src/translations/index.ts
+var osTranslations = {
+  "en-US": en_US_exports
 };
 export {
-  Alert,
-  AlertDialog,
-  Avatar,
-  Button,
-  ButtonGroup,
-  CompactQrCode,
-  CompoundButton,
-  Dialog,
-  FullQrCode,
-  Group,
-  Heading,
-  Input,
-  Loading,
-  NavMenu,
-  NavMenuLink,
-  NavMenuSeparatorItem,
-  Popover,
-  QrCode,
-  Tag,
-  Toast,
-  Tooltip,
-  UiProvider,
-  buttonStyles,
-  defaultActive,
-  defaultBlockSeparator,
-  defaultButtonColors,
-  defaultDescription,
-  defaultDisabled,
-  defaultFocus,
-  defaultGroup,
-  defaultHover,
-  defaultInlineSeparator,
-  defaultInput,
-  defaultPlaceholder,
-  defaultShimmer,
-  defaultTooltip,
-  errorAlertColors,
-  errorInputBorder,
-  errorText,
-  getSize,
-  getSizeHeight,
-  getSizeWidth,
-  ghostButtonColors,
-  infoAlertColors,
-  infoInputBorder,
-  infoText,
-  mx,
-  neutralAlertColors,
-  neutralInputBorder,
-  primaryButtonColors,
-  primaryDescription,
-  randomString,
-  sizeHeightMap,
-  sizeWidthMap,
-  staticFocus,
-  staticInput,
-  strongShimmer,
-  successAlertColors,
-  successInputBorder,
-  successText,
-  useForwardedRef,
-  useId,
-  useIsFocused,
-  valenceAlertColors,
-  valenceColorText,
-  valenceInputBorder,
-  warningAlertColors,
-  warningInputBorder,
-  warningText
+  IdentityPanel,
+  IdentityPopover,
+  PanelPopover,
+  PanelSidebarContext,
+  PanelSidebarProvider,
+  defaultArrow,
+  defaultPanel,
+  osTranslations,
+  sidebarWidth,
+  useTogglePanelSidebar
 };
 //# sourceMappingURL=index.mjs.map