# Add an inlet notch to this macOS app (SwiftUI)

inlet draws UI in the MacBook notch. Docs: https://github.com/akshithio/inlet

1. Add the package: https://github.com/akshithio/inlet (from: "0.1.0"). Requires macOS 14.
2. Present the notch once at launch, e.g. in applicationDidFinishLaunching:
   Notch.shared.present()
3. Add content as activities. Any part of the app can start one; the highest
   priority is shown and ending it falls back to the next:
   Notch.shared.startActivity(id: "music") {
       PlayerView()          // expanded, shown on hover
   } leading: {
       AlbumArt()            // left of the camera, ~20pt tall
   } trailing: {
       Waveform()            // right of the camera
   }
   Notch.shared.endActivity("music")
   Or declaratively: SomeView().notchActivity(id:) { … } leading: { … } trailing: { … }
4. Brief messages are the notch's "peek" state:
   Notch.shared.peek("Copied", systemImage: "doc.on.doc")
   Notch.shared.peek("Upload failed", description: "Check your connection", style: .error)
5. Size: startActivity(id:width:height:radius:) sets the expanded size in points.
6. Control: Notch.shared.expand(), .collapse(), options.trigger = .hover | .click | .press | .manual.
   options.openDelay (default 120 ms), options.pressDuration (450 ms), options.swipeToDismiss (true).
7. Menu bar: options.menuBar = .avoid (default) drops a compact side that would
   cover a menu bar item; .overlay draws over them. Call
   Notch.requestMenuBarAccess() to avoid app menus too (Accessibility).
8. Drops: startActivity(id:label:dropLabel:onDrop:) with onDrop: { drop in … }
   gets drop.files (file URLs), drop.urls and drop.text when things are dragged
   onto the notch.
9. Style: options.background = .color(.indigo) | .style(fill) | .material(.hudWindow);
   options.accent = .yellow. The camera band stays black.
10. Accessibility: give activities a label; Notch.shared.expand(focus: true) from
   a shortcut gives the notch the keyboard.
11. Peeks can act: peek(_, action: .init("Undo") { … }), reply: .init("Reply…") { text in … },
   level: 0.6 (same id moves the bar in place).
12. Split: options.split = true shows a second activity in a bubble; show(_:) / cycle(_:) switch.

Rules: notch content sits on black, so use light text and SF Symbols. Keep
leading/trailing to one small element each. Read @Observable models inside the
closures so the notch updates.

---

# Add an inlet notch to this Electron app (React)

inlet draws UI in the MacBook notch. Docs: https://github.com/akshithio/inlet

1. npm install inlet-ui (Electron 28+, React 18+).
2. Main process: create the notch window once.
   import { createNotch } from 'inlet-ui/electron'
   const notch = await createNotch({ entry: 'http://localhost:5173' }) // or a path to index.html
3. In that renderer, render the surface once:
   import { Notch } from 'inlet-ui/react'
   <Notch />
4. Add content from any component with <NotchActivity>. The highest priority is
   shown; unmounting falls back to the next:
   <NotchActivity
     leading={<AlbumArt />}   // left of the camera, ~20px tall
     trailing={<Waveform />}  // right of the camera
     expanded={<Player />}    // shown on hover
   />
5. Brief messages are the notch's "peek" state, callable from anywhere:
   import { notch } from 'inlet-ui/react'
   notch.peek('Copied')
   notch.peek('Upload failed', { type: 'error', description: 'Check your connection' })
   notch.peek.promise(upload(), { loading: 'Uploading…', success: 'Uploaded' })
   From the main process: notch.peek('Build passed', { type: 'success' })
6. Size: <NotchActivity width={360} height={180} radius={26} …/> in px.
7. Control: notch.expand({ duration? }), notch.collapse(), <Notch trigger="hover" | "click" | "press" | "manual" />.
   Optional: openDelay (120), pressDuration (450), swipeToDismiss (true), open/defaultOpen/onOpenChange.
   Mark buttons that control the notch with data-notch-control so clicking them
   doesn't collapse it.
8. Menu bar: <Notch menuBar="avoid" /> (default) drops a compact side that would
   cover a menu bar item. requestMenuBarAccess() from 'inlet-ui/electron' lets it
   avoid app menus too. In a web page, wrap header items in <NotchAvoid> so they
   move out of the notch's way, or mark fixed ones data-notch-menu-item.
9. Drops: <NotchActivity onDrop={({ files, paths, urls, text }) => …} dropLabel="Drop to shelve" />.
   paths are on disk in Electron. The main process gets notch.on('drop', …) too.
10. Style: <Notch background="linear-gradient(#1e1b4b, #4338ca)" accent="#ffd60a" />.
   The camera band stays black.
11. Accessibility: give activities a label="…" so screen readers name them.
12. Peeks can act: notch.peek('Moved', { action: { label: 'Undo', onClick } }),
   { reply: { placeholder, onSend } }, { id: 'volume', level: 0.6 }.
13. Split: <Notch split /> shows a second activity in a bubble; notch.show(id) / notch.cycle() switch.

Rules: notch content sits on black, so use light text. Keep leading/trailing to
one small element each. Don't render more than one <Notch />.