education-playlists 0.1.0 → 0.1.2

package/README.md

@@ -12,6 +12,10 @@ the answers into searches and the searches into a playlist.
 - **Preset, public and private playlists.** Presets ship with the catalog.
   Save a copy to make it yours; keep it private and invite people by email, or
   make it public and share a link.
+- **Saved to the account when signed in.** Give the widget a
+  `playlistsEndpoint` and a `userId` and "My playlists" live server-side: they
+  follow the user across devices, invites reach the people invited, and
+  playlists made on the device while signed out move into the account.
 - **Progress by time.** Checkmarks persist per browser; progress and "weeks
   left at your pace" are measured in minutes, not item counts.
 - **Provenance on every item.** Seed record, official API, dataset snapshot,
@@ -32,8 +36,9 @@ import { EducationPlaylists } from 'education-playlists';
 // Homepage card: one row of playlists that expands in place.
 <EducationPlaylists compact planEndpoint="/api/learn" openHref="/learn" />
 
-// Full page, which also opens playlists shared by link (#playlist=…).
-<EducationPlaylists planEndpoint="/api/learn" importFromHash />
+// Full page, which also opens playlists shared by link (#playlist=…) and
+// invite links (#invite=…), and keeps a signed-in user's playlists server-side.
+<EducationPlaylists planEndpoint="/api/learn" playlistsEndpoint="/api/learn/playlists" userId={user?.id} importFromHash />
 ```
 
 Without `planEndpoint` the planner runs in the browser: standard follow-up
@@ -62,6 +67,37 @@ If the model fails or answers with something unusable, the handler plans
 offline rather than erroring; `mode` says which happened. Rate limiting and
 auth are the host's job.
 
+### Playlist storage
+
+`handlePlaylistStoreRequest` stores playlists and enforces who may see and
+change them. The host supplies who is signed in and where playlists live:
+
+```ts
+import { handlePlaylistStoreRequest, type PlaylistRepository } from 'education-playlists/server';
+
+const handler = (request: Request) =>
+  handlePlaylistStoreRequest(request, {
+    repository: myRepository, // get / put / delete / listForUser / findByInviteToken
+    getUser: async (req) => (session ? { id, email, emailVerified } : null),
+    notifyInvite: async ({ to, playlist, token }) => sendMail(to, `${origin}/learn#invite=${token}`), // optional
+  });
+```
+
+- `GET <base>/playlists` → `{ playlists, invites }` (owned, shared with the user, and invites to their address)
+- `GET <base>/playlists/:id` → `{ playlist }` — anyone for a public one, owner and members for a private one
+- `PUT <base>/playlists/:id` → create (the caller becomes owner) or update (owner or editor)
+- `DELETE <base>/playlists/:id` → owner only
+- `POST <base>/playlists/accept-invite` `{ token }` → `{ playlist }`
+
+The rules: only the owner changes visibility and members (an editor's copy of
+them is ignored); members are reconciled against the stored list, so a client
+can never set its own status, user id or invite token; an invite is accepted
+only by a signed-in user whose verified address it was sent to, so a forwarded
+link is useless; only the owner sees invite tokens; a private playlist someone
+cannot view answers 404, not 403. Without `notifyInvite`, invitees see the
+invite when they sign in, and the owner can copy an invite link.
+`createMemoryPlaylistRepository` is an in-memory repository for tests.
+
 ## Data sources
 
 Planned ingestion, in order of authority:
@@ -74,9 +110,10 @@ Planned ingestion, in order of authority:
 
 ## Not built yet
 
-- Server-side storage for playlists, so invites actually reach invitees and
-  private playlists follow a signed-in user across devices. The access rules
-  (`canView`, `canEdit`, `invite`, `acceptInvite`) are in place for it.
+- Invite email delivery in qwksearch-web: the app has no mail sender, so it
+  does not pass `notifyInvite`; invitees see invites when they sign in.
+- Checkmark progress is still per browser; only playlists are in the account.
+- Concurrent edits are last-write-wins.
 - The ingestion adapters above.
 - A concrete quiz generator (the hook and prompt are here).
 

package/dist/api/playlists.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @fileoverview Browser side of server-side playlist storage: a signed-in
+ * learner's playlists and pending invites, read from and written to the
+ * host's `<base>/playlists` endpoint (see `education-playlists/server`).
+ *
+ * Answers are re-validated like any other outside data; only the fields a
+ * server owns (owner, members, timestamps) are carried over as it sent them,
+ * type-checked.
+ */
+import type { Playlist, PlaylistRole } from '../types';
+/** An invitation waiting for the signed-in user. */
+export interface PlaylistInvite {
+    playlistId: string;
+    title: string;
+    role: PlaylistRole;
+    token: string;
+}
+export interface RemotePlaylistStore {
+    /** The user's playlists (owned and shared with them) and pending invites. */
+    list(signal?: AbortSignal): Promise<{
+        playlists: Playlist[];
+        invites: PlaylistInvite[];
+    }>;
+    /** Saves a playlist; resolves to the server's copy (with invite tokens for new members). */
+    save(playlist: Playlist): Promise<Playlist>;
+    remove(id: string): Promise<void>;
+    acceptInvite(token: string): Promise<Playlist>;
+}
+/** Hash parameter an invite link carries its token in. */
+export declare const INVITE_HASH_PARAM = "invite";
+/** The invite token in a page fragment (with or without the leading `#`), or `null`. */
+export declare function readInviteFragment(fragment: string): string | null;
+/** An invite link for `token`, opening `baseHref`. */
+export declare function inviteLink(baseHref: string, token: string): string;
+/** A playlist from the store, or `null` if it is unusable. */
+export declare function readStoredPlaylist(raw: unknown): Playlist | null;
+/**
+ * A store over the host's playlist endpoint, e.g. `/api/learn/playlists`.
+ * Requests carry the page's cookies, which is how the server knows who is
+ * signed in. Every failure rejects with the server's message.
+ */
+export declare function createRemotePlaylistStore(endpoint: string, fetchImpl?: typeof fetch): RemotePlaylistStore;

package/dist/components/EducationPlaylists.d.ts

@@ -30,7 +30,15 @@ export interface EducationPlaylistsProps {
     importFromHash?: boolean;
     /** Signed-in user, recorded as the owner of playlists they create. */
     userId?: string;
+    /**
+     * The host's playlist store (see `handlePlaylistStoreRequest`), e.g.
+     * `/api/learn/playlists`. With it and a `userId`, "My playlists" live in the
+     * account: they follow the user across devices, invites reach invitees, and
+     * playlists made on this device while signed out move into the account.
+     * Without it, playlists stay in this browser.
+     */
+    playlistsEndpoint?: string;
     /** Turns on "Quiz me" for each item (NotebookLM or another quiz source). */
     quizGenerator?: QuizGenerator;
 }
-export declare function EducationPlaylists({ className, style, compact, catalog: catalogProp, planEndpoint, openHref, shareBaseHref, importFromHash, userId, quizGenerator, }: EducationPlaylistsProps): React.JSX.Element;
+export declare function EducationPlaylists({ className, style, compact, catalog: catalogProp, planEndpoint, openHref, shareBaseHref, importFromHash, userId, playlistsEndpoint, quizGenerator, }: EducationPlaylistsProps): React.JSX.Element;

package/dist/components/PlaylistView.d.ts

@@ -18,6 +18,10 @@ export interface PlaylistViewProps {
     minutesPerWeek?: number;
     /** Page a share link opens, e.g. `https://example.com/learn`. */
     shareBaseHref?: string;
+    /** Whether to show visibility and invite controls (the owner's alone). Defaults to `true`. */
+    canShare?: boolean;
+    /** Saved to a server-side account, so invites reach the people invited. */
+    inAccount?: boolean;
     quizGenerator?: QuizGenerator;
 }
-export declare function PlaylistView({ playlist, done, onToggle, onChange, onSaveCopy, minutesPerWeek, shareBaseHref, quizGenerator }: PlaylistViewProps): React.JSX.Element;
+export declare function PlaylistView({ playlist, done, onToggle, onChange, onSaveCopy, minutesPerWeek, shareBaseHref, canShare, inAccount, quizGenerator }: PlaylistViewProps): React.JSX.Element;

package/dist/index.cjs

@@ -23,6 +23,7 @@ __export(index_exports, {
   DEFAULT_FOLLOW_UPS: () => DEFAULT_FOLLOW_UPS,
   EDUCATION_CATEGORIES: () => EDUCATION_CATEGORIES,
   EducationPlaylists: () => EducationPlaylists,
+  INVITE_HASH_PARAM: () => INVITE_HASH_PARAM,
   MAX_ANSWERS: () => MAX_ANSWERS,
   MAX_ANSWER_LENGTH: () => MAX_ANSWER_LENGTH,
   MAX_GOAL_LENGTH: () => MAX_GOAL_LENGTH,
@@ -44,6 +45,7 @@ __export(index_exports, {
   createLocalPlaylistStore: () => createLocalPlaylistStore,
   createPlaylist: () => createPlaylist,
   createProgressStore: () => createProgressStore,
+  createRemotePlaylistStore: () => createRemotePlaylistStore,
   decodeShareFragment: () => decodeShareFragment,
   encodeShareFragment: () => encodeShareFragment,
   extractJson: () => extractJson,
@@ -53,12 +55,15 @@ __export(index_exports, {
   formatMinutes: () => formatMinutes,
   getDefaultCatalog: () => getDefaultCatalog,
   invite: () => invite,
+  inviteLink: () => inviteLink,
   moveItem: () => moveItem,
   normalizePlanRequest: () => normalizePlanRequest,
   parseQuiz: () => parseQuiz,
   planPlaylist: () => planPlaylist,
   playlistTime: () => playlistTime,
+  readInviteFragment: () => readInviteFragment,
   readPreferences: () => readPreferences,
+  readStoredPlaylist: () => readStoredPlaylist,
   removeItem: () => removeItem,
   removeMember: () => removeMember,
   safeUrl: () => safeUrl,
@@ -825,6 +830,91 @@ async function fetchPlan(goal, answers, endpoint, signal) {
   return planPlaylist({ goal, answers });
 }
 
+// src/api/playlists.ts
+var INVITE_HASH_PARAM = "invite";
+function readInviteFragment(fragment) {
+  const token = new URLSearchParams(fragment.replace(/^#/, "")).get(INVITE_HASH_PARAM);
+  return token && token.length <= 200 ? token : null;
+}
+function inviteLink(baseHref, token) {
+  return `${baseHref.split("#")[0]}#${INVITE_HASH_PARAM}=${encodeURIComponent(token)}`;
+}
+var ROLES = ["owner", "editor", "viewer"];
+var str = (value, max = 200) => typeof value === "string" && value ? value.slice(0, max) : void 0;
+function readMember(raw) {
+  if (!raw || typeof raw !== "object") return [];
+  const r = raw;
+  if (!ROLES.includes(r.role)) return [];
+  return [
+    {
+      userId: str(r.userId),
+      email: str(r.email, 320),
+      role: r.role,
+      status: r.status === "active" ? "active" : "invited",
+      inviteToken: str(r.inviteToken)
+    }
+  ];
+}
+function readStoredPlaylist(raw) {
+  const clean = sanitizePlaylist(raw);
+  if (!clean) return null;
+  const r = raw;
+  const plannedFrom = r.plannedFrom;
+  return {
+    ...clean,
+    visibility: r.visibility === "public" ? "public" : "private",
+    ownerId: str(r.ownerId),
+    members: Array.isArray(r.members) ? r.members.flatMap(readMember) : [],
+    plannedFrom: plannedFrom && typeof plannedFrom.goal === "string" && Array.isArray(plannedFrom.answers) ? plannedFrom : void 0,
+    createdAt: str(r.createdAt, 40),
+    updatedAt: str(r.updatedAt, 40)
+  };
+}
+function readInvite(raw) {
+  if (!raw || typeof raw !== "object") return [];
+  const r = raw;
+  const playlistId = str(r.playlistId);
+  const token = str(r.token);
+  if (!playlistId || !token) return [];
+  return [{ playlistId, token, title: str(r.title) ?? "Shared playlist", role: r.role === "editor" ? "editor" : "viewer" }];
+}
+function createRemotePlaylistStore(endpoint, fetchImpl = (input, init) => fetch(input, init)) {
+  const base = endpoint.replace(/\/+$/, "");
+  async function call(path, init = {}) {
+    const res = await fetchImpl(`${base}${path}`, {
+      credentials: "same-origin",
+      ...init,
+      headers: init.body ? { "content-type": "application/json" } : void 0
+    });
+    const body = await res.json().catch(() => ({}));
+    if (!res.ok) throw new Error(typeof body.error === "string" ? body.error : `Playlist request failed (${res.status})`);
+    return body;
+  }
+  const one = (body) => {
+    const playlist = readStoredPlaylist(body.playlist);
+    if (!playlist) throw new Error("The server sent back an unusable playlist");
+    return playlist;
+  };
+  return {
+    async list(signal) {
+      const body = await call("", { signal });
+      return {
+        playlists: (Array.isArray(body.playlists) ? body.playlists : []).flatMap((raw) => readStoredPlaylist(raw) ?? []),
+        invites: (Array.isArray(body.invites) ? body.invites : []).flatMap(readInvite)
+      };
+    },
+    async save(playlist) {
+      return one(await call(`/${encodeURIComponent(playlist.id)}`, { method: "PUT", body: JSON.stringify(playlist) }));
+    },
+    async remove(id) {
+      await call(`/${encodeURIComponent(id)}`, { method: "DELETE" });
+    },
+    async acceptInvite(token) {
+      return one(await call("/accept-invite", { method: "POST", body: JSON.stringify({ token }) }));
+    }
+  };
+}
+
 // src/components/EducationPlaylists.tsx
 var import_react3 = require("react");
 
@@ -952,19 +1042,19 @@ function ItemRow({
     ] })
   ] });
 }
-function SharingControls({ playlist, onChange, shareBaseHref }) {
+function SharingControls({ playlist, onChange, shareBaseHref, inAccount }) {
   const [email, setEmail] = (0, import_react.useState)("");
   const [message, setMessage] = (0, import_react.useState)(null);
-  const copyShareLink = async () => {
-    const base = shareBaseHref ?? (typeof window !== "undefined" ? `${window.location.origin}${window.location.pathname}` : "");
-    const link = `${base}#${encodeShareFragment(playlist)}`;
+  const base = shareBaseHref ?? (typeof window !== "undefined" ? `${window.location.origin}${window.location.pathname}` : "");
+  const copy = async (link, done) => {
     try {
       await navigator.clipboard.writeText(link);
-      setMessage("Share link copied.");
+      setMessage(done);
     } catch {
       setMessage(link);
     }
   };
+  const copyShareLink = () => copy(`${base}#${encodeShareFragment(playlist)}`, "Share link copied.");
   const addInvite = () => {
     try {
       onChange(invite(playlist, email, "viewer"));
@@ -1005,16 +1095,18 @@ function SharingControls({ playlist, onChange, shareBaseHref }) {
           ]
         }
       ),
+      !inAccount && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: s.muted, children: "Invites are kept on this device until you sign in; nobody is notified yet." }),
       (playlist.members ?? []).map((member) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...s.row, ...s.muted }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: member.email }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: s.badge, children: member.status === "invited" ? "invite pending" : member.role }),
+        inAccount && member.status === "invited" && member.inviteToken && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: { ...s.chip, padding: "0 8px" }, onClick: () => copy(inviteLink(base, member.inviteToken), `Invite link for ${member.email} copied.`), children: "Copy invite link" }),
         member.email && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: { ...s.chip, padding: "0 8px" }, onClick: () => onChange(removeMember(playlist, member.email)), children: "Remove" })
       ] }, member.email ?? member.userId))
     ] }),
     message && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...s.muted, wordBreak: "break-all" }, children: message })
   ] });
 }
-function PlaylistView({ playlist, done, onToggle, onChange, onSaveCopy, minutesPerWeek, shareBaseHref, quizGenerator }) {
+function PlaylistView({ playlist, done, onToggle, onChange, onSaveCopy, minutesPerWeek, shareBaseHref, canShare = true, inAccount = false, quizGenerator }) {
   const time = playlistTime(playlist, done);
   const weeks = weeksToFinish(time.remainingMinutes, minutesPerWeek);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: s.section, children: [
@@ -1056,7 +1148,7 @@ function PlaylistView({ playlist, done, onToggle, onChange, onSaveCopy, minutesP
       item.id
     )) }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: s.row, children: onSaveCopy && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: s.primary, onClick: () => onSaveCopy(playlist), children: "Save to my playlists" }) }),
-    onChange && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SharingControls, { playlist, onChange, shareBaseHref })
+    onChange && canShare && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SharingControls, { playlist, onChange, shareBaseHref, inAccount })
   ] });
 }
 
@@ -1189,11 +1281,13 @@ function EducationPlaylists({
   shareBaseHref,
   importFromHash = false,
   userId,
+  playlistsEndpoint,
   quizGenerator
 }) {
   const catalog = (0, import_react3.useMemo)(() => catalogProp ?? getDefaultCatalog(), [catalogProp]);
   const progressStore = (0, import_react3.useMemo)(() => createProgressStore(), []);
   const playlistStore = (0, import_react3.useMemo)(() => createLocalPlaylistStore(), []);
+  const remote = (0, import_react3.useMemo)(() => playlistsEndpoint && userId ? createRemotePlaylistStore(playlistsEndpoint) : null, [playlistsEndpoint, userId]);
   const [expanded, setExpanded] = (0, import_react3.useState)(!compact);
   const [tab, setTab] = (0, import_react3.useState)("browse");
   const [done, setDone] = (0, import_react3.useState)(() => /* @__PURE__ */ new Set());
@@ -1202,10 +1296,31 @@ function EducationPlaylists({
   const [majorId, setMajorId] = (0, import_react3.useState)();
   const [programId, setProgramId] = (0, import_react3.useState)();
   const [open, setOpen] = (0, import_react3.useState)(null);
+  const [invites, setInvites] = (0, import_react3.useState)([]);
+  const [notice, setNotice] = (0, import_react3.useState)(null);
   (0, import_react3.useEffect)(() => {
     setDone(progressStore.load());
     setMine(playlistStore.list());
   }, [progressStore, playlistStore]);
+  (0, import_react3.useEffect)(() => {
+    if (!remote) return;
+    const controller = new AbortController();
+    (async () => {
+      for (const playlist of playlistStore.list().filter((p) => !p.ownerId || p.ownerId === userId)) {
+        try {
+          await remote.save({ ...playlist, ownerId: userId });
+          playlistStore.remove(playlist.id);
+        } catch {
+        }
+      }
+      const result = await remote.list(controller.signal);
+      setMine(result.playlists);
+      setInvites(result.invites);
+    })().catch((error) => {
+      if (error.name !== "AbortError") setNotice(`Couldn't load your saved playlists: ${error.message}`);
+    });
+    return () => controller.abort();
+  }, [remote, playlistStore, userId]);
   (0, import_react3.useEffect)(() => {
     if (!importFromHash || typeof window === "undefined") return;
     const shared = decodeShareFragment(window.location.hash);
@@ -1213,7 +1328,21 @@ function EducationPlaylists({
       setExpanded(true);
       setOpen({ playlist: shared, source: "shared" });
     }
-  }, [importFromHash]);
+    const token = readInviteFragment(window.location.hash);
+    if (!token) return;
+    setExpanded(true);
+    if (!remote) {
+      setNotice(playlistsEndpoint ? "Sign in with the invited email address to open this playlist." : "Invites need an account to open.");
+      return;
+    }
+    window.history.replaceState(null, "", `${window.location.pathname}${window.location.search}`);
+    remote.acceptInvite(token).then((playlist) => {
+      setMine((prev) => [playlist, ...prev.filter((p) => p.id !== playlist.id)]);
+      setInvites((prev) => prev.filter((i) => i.token !== token));
+      setOpen({ playlist, source: "mine" });
+      setNotice(null);
+    }).catch((error) => setNotice(error.message));
+  }, [importFromHash, remote, playlistsEndpoint]);
   const category = catalog.categories.find((c2) => c2.id === categoryId);
   const major = category?.majors.find((m) => m.id === majorId);
   const visible = filterPlaylists(catalog.playlists, { categoryId, majorId, programId });
@@ -1224,10 +1353,22 @@ function EducationPlaylists({
       return next;
     });
   };
-  const saveMine = (playlist) => {
-    setMine(playlistStore.save({ ...playlist, updatedAt: (/* @__PURE__ */ new Date()).toISOString() }));
+  const showSaved = (playlist) => {
+    setMine((prev) => [playlist, ...prev.filter((p) => p.id !== playlist.id)]);
     setOpen((current) => current?.playlist.id === playlist.id ? { ...current, playlist } : current);
   };
+  const saveMine = (playlist) => {
+    if (!remote) {
+      setMine(playlistStore.save({ ...playlist, updatedAt: (/* @__PURE__ */ new Date()).toISOString() }));
+      setOpen((current) => current?.playlist.id === playlist.id ? { ...current, playlist } : current);
+      return;
+    }
+    showSaved(playlist);
+    remote.save(playlist).then((saved) => {
+      showSaved(saved);
+      setNotice(null);
+    }).catch((error) => setNotice(`Couldn't save to your account: ${error.message}`));
+  };
   const saveCopy = (playlist) => {
     const copy = createPlaylist({
       title: playlist.title,
@@ -1236,13 +1377,25 @@ function EducationPlaylists({
       ownerId: userId,
       plannedFrom: playlist.plannedFrom
     });
-    setMine(playlistStore.save(copy));
     setOpen({ playlist: copy, source: "mine" });
     setTab("mine");
+    saveMine(copy);
   };
   const deleteMine = (id) => {
-    setMine(playlistStore.remove(id));
     setOpen(null);
+    if (!remote) {
+      setMine(playlistStore.remove(id));
+      return;
+    }
+    setMine((prev) => prev.filter((p) => p.id !== id));
+    remote.remove(id).catch((error) => setNotice(`Couldn't delete it from your account: ${error.message}`));
+  };
+  const acceptInvite2 = (pending) => {
+    remote?.acceptInvite(pending.token).then((playlist) => {
+      setInvites((prev) => prev.filter((i) => i.token !== pending.token));
+      showSaved(playlist);
+      openPlaylist(playlist, "mine");
+    }).catch((error) => setNotice(error.message));
   };
   const openPlaylist = (playlist, source) => {
     setExpanded(true);
@@ -1283,12 +1436,13 @@ function EducationPlaylists({
   }
   const tabs = [
     { id: "browse", label: "Browse" },
-    { id: "mine", label: `My playlists${mine.length ? ` (${mine.length})` : ""}` },
+    { id: "mine", label: `My playlists${mine.length ? ` (${mine.length})` : ""}${invites.length ? ` \xB7 ${invites.length} invite${invites.length === 1 ? "" : "s"}` : ""}` },
     { id: "plan", label: "Plan with AI" }
   ];
   let body;
   if (open) {
-    const editable = open.source === "mine";
+    const owned = !remote || open.playlist.ownerId === userId;
+    const editable = open.source === "mine" && (owned || canEdit(open.playlist, userId));
     body = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: s.section, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: s.row, children: [
         /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: s.button, onClick: () => setOpen(null), children: "\u2190 Back" }),
@@ -1298,7 +1452,7 @@ function EducationPlaylists({
           " from: ",
           open.plan.searches.join(" \xB7 ")
         ] }),
-        editable && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: s.button, onClick: () => deleteMine(open.playlist.id), children: "Delete" })
+        editable && owned && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: s.button, onClick: () => deleteMine(open.playlist.id), children: "Delete" })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         PlaylistView,
@@ -1307,7 +1461,9 @@ function EducationPlaylists({
           done,
           onToggle: toggle,
           onChange: editable ? saveMine : void 0,
-          onSaveCopy: editable ? void 0 : saveCopy,
+          onSaveCopy: open.source === "mine" ? void 0 : saveCopy,
+          canShare: owned,
+          inAccount: Boolean(remote),
           minutesPerWeek: open.plan?.minutesPerWeek,
           shareBaseHref: shareBase,
           quizGenerator
@@ -1342,13 +1498,26 @@ function EducationPlaylists({
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 6 }, children: visible.map((playlist) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PlaylistCard, { playlist, done, onOpen: () => openPlaylist(playlist, "preset") }, playlist.id)) })
     ] });
   } else if (tab === "mine") {
-    body = mine.length ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 6 }, children: mine.map((playlist) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PlaylistCard, { playlist, done, onOpen: () => openPlaylist(playlist, "mine") }, playlist.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: s.muted, children: "Nothing saved yet. Save a preset playlist, or plan your own with AI." });
+    body = /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: s.section, children: [
+      invites.map((pending) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { style: s.row, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { style: s.muted, children: [
+          "You're invited to ",
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("strong", { children: pending.title }),
+          " as ",
+          pending.role === "editor" ? "an editor" : "a viewer",
+          "."
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", style: s.primary, onClick: () => acceptInvite2(pending), children: "Accept" })
+      ] }, pending.token)),
+      mine.length ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: 6 }, children: mine.map((playlist) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PlaylistCard, { playlist, done, onOpen: () => openPlaylist(playlist, "mine") }, playlist.id)) }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: s.muted, children: "Nothing saved yet. Save a preset playlist, or plan your own with AI." })
+    ] });
   } else {
     body = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PlaylistPlanner, { planEndpoint, onPlanned: (result) => setOpen({ playlist: result.playlist, source: "planned", plan: result }) });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("section", { className, style: { ...s.root, ...style }, "aria-label": "Education playlists", children: [
     header,
     !open && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { style: s.row, role: "tablist", children: tabs.map((t) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", role: "tab", "aria-selected": tab === t.id, style: { ...s.chip, ...tab === t.id ? s.chipActive : null }, onClick: () => setTab(t.id), children: t.label }, t.id)) }),
+    notice && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { role: "status", style: s.muted, children: notice }),
     body
   ] });
 }
@@ -1357,6 +1526,7 @@ function EducationPlaylists({
   DEFAULT_FOLLOW_UPS,
   EDUCATION_CATEGORIES,
   EducationPlaylists,
+  INVITE_HASH_PARAM,
   MAX_ANSWERS,
   MAX_ANSWER_LENGTH,
   MAX_GOAL_LENGTH,
@@ -1378,6 +1548,7 @@ function EducationPlaylists({
   createLocalPlaylistStore,
   createPlaylist,
   createProgressStore,
+  createRemotePlaylistStore,
   decodeShareFragment,
   encodeShareFragment,
   extractJson,
@@ -1387,12 +1558,15 @@ function EducationPlaylists({
   formatMinutes,
   getDefaultCatalog,
   invite,
+  inviteLink,
   moveItem,
   normalizePlanRequest,
   parseQuiz,
   planPlaylist,
   playlistTime,
+  readInviteFragment,
   readPreferences,
+  readStoredPlaylist,
   removeItem,
   removeMember,
   safeUrl,