# OpenSpec Change: enterprise-react-drive-sharing

- **Change ID**: enterprise-react-drive-sharing
- **Package**: `@suaveplan/drive-react-sharing`
- **Category**: react
- **Target path**: `packages/drive/drive-react-sharing`
- **Status**: PROPOSED
- **Date**: 2026-04-24
- **Reference spec**: `/mnt/s/web/suaveplan/enterprise/react-drive-sharing.md`

---

## Summary

Deliver `@suaveplan/drive-react-sharing` on genesis from scratch at enterprise quality. React UI for shared drive resource management: `ShareDialog` (recipients list, permission picker, add/remove), `PartitionBadge` (type + encryption indicator), `FileAccessList` (read-only list with revoke), and `useSharing` hook. Genesis consolidates the three overlapping permission type names into one canonical union, adds a `useSharing` Storybook demo, wires `useSharing` to the real `@suaveplan/drive-sharing` engine, adds OTel counters for share actions, full accessibility, and Playwright E2E.

---

## Current-state audit (genesis)

Package does not exist on genesis — fresh build.

---

## Available workspace deps on genesis

| Package | Role |
|---|---|
| `@suaveplan/error` (`workspace:^`) | `DriveSharingError` |
| `@suaveplan/drive-sharing` (`workspace:^`) | Sharing engine + canonical permission types |
| `@suaveplan/react-translate` (`workspace:^`) | i18n for all UI strings |
| `@opentelemetry/api` (`catalog:observability`) | `drive.share.*` counters + spans |
| `zod` (`catalog:forms`) | Prop validation |
| `tslib` (`catalog:build`) | TS helpers |

External: React 18 peer.

---

## Preserved public API surface

```ts
// Components
ShareDialog, PartitionBadge, FileAccessList

// Hook
useSharing

// Types (consolidated from three overlapping names)
SharePermission, ShareRecipient, AccessEntry, PartitionType,
ShareDialogProps, PartitionBadgeProps, FileAccessListProps,
UseSharingOptions, UseSharingReturn
```

---

## New additions for genesis

1. **`DriveSharingError`** — codes: `SHARING_ADD_FAILED`, `SHARING_REVOKE_FAILED`, `SHARING_PERMISSION_FAILED`.
2. **Consolidated permission types** — `SharePermission` re-exported from `@suaveplan/drive-sharing`; `AccessPermission` and `SharingPermission` aliases removed.
3. **Real engine integration** — `useSharing` calls `@suaveplan/drive-sharing` engine (not an in-memory stub).
4. **`useSharing` Storybook demo** — hooks playground story (main branch had none).
5. **OTel counters** — `drive.share.add`, `drive.share.revoke`, `drive.share.permission.change` spans.
6. **Accessibility** — `ShareDialog` focus trap, ESC-to-close, `aria-modal`, `aria-labelledby`; axe-core in all stories.
7. **Playwright E2E** — add recipient, remove recipient, change permission, keyboard-only, mobile viewport.
8. **Link sharing** — generate/revoke shareable links with scope, expiry, and password.

---

## File layout

```text
packages/drive/drive-react-sharing/
  package.json
  tsconfig.json
  vitest.config.ts
  src/
    index.ts
    types/
    components/
      share-dialog/ (tsx + types + md + test + stories + index)
      partition-badge/ (tsx + types + md + test + stories + index)
      file-access-list/ (tsx + types + md + test + stories + index)
      share-link-dialog/ (tsx + types + md + test + stories + index)
    hooks/
      use-sharing/ (ts + md + test + stories + index)
  e2e/
    drive-sharing.spec.ts
```