feat(overlays): add managed overlay package

packages/overlays/docs/en-US/examples/custom-overlays.mdx

@@ -0,0 +1,73 @@
+---
+title: Custom overlay examples
+description: Build result-producing modals, sheets, and drawers with UI components.
+order: 30
+toc:
+  - id: typed-modal
+    title: Typed modal
+  - id: sheet
+    title: Sheet
+  - id: drawer
+    title: Drawer
+---
+
+## Typed modal {#typed-modal}
+
+The render callback receives `close` and `dismiss`. `close` returns an application result while `dismiss` follows the cancellation path.
+
+```tsx
+import { openModal } from "@workspace/overlays/modal"
+import { Button } from "@workspace/ui/components/button"
+
+function PlanButton() {
+  async function choosePlan() {
+    const plan = await openModal<"free" | "pro">({
+      title: "Choose a plan",
+      description: "You can change this later.",
+      content: ({ close, dismiss }) => (
+        <div className="flex justify-end gap-2">
+          <Button variant="outline" onClick={dismiss}>
+            Cancel
+          </Button>
+          <Button onClick={() => close("free")}>Free</Button>
+          <Button onClick={() => close("pro")}>Pro</Button>
+        </div>
+      ),
+    })
+
+    if (plan) updatePlan(plan)
+  }
+
+  return <Button onClick={choosePlan}>Change plan</Button>
+}
+```
+
+## Sheet {#sheet}
+
+```tsx
+import { openSheet } from "@workspace/overlays/sheet"
+
+await openSheet({
+  title: "Filters",
+  side: "right",
+  content: <ProductFilters />,
+})
+```
+
+Use a sheet for a fixed edge panel. `side` accepts `top`, `right`, `bottom`, or `left`.
+
+## Drawer {#drawer}
+
+```tsx
+import { openDrawer } from "@workspace/overlays/drawer"
+
+await openDrawer({
+  title: "Choose a delivery time",
+  content: <DeliverySlots />,
+  showSwipeHandle: true,
+  snapPoints: [0.5, 1],
+  swipeDirection: "down",
+})
+```
+
+Use a drawer for touch-oriented interaction with configurable swipe direction and Base UI snap points.