education-playlists 0.1.36 → 0.1.37

package/README.md

@@ -22,6 +22,9 @@ the answers into searches and the searches into a playlist.
   community list or AI search, and whether the URL has been verified.
 - **Quiz hook.** Pass a `quizGenerator` (for example NotebookLM over the item's
   material) and each item gets a "Quiz me" button.
+- **Open items in the host.** Pass `onOpenItem` and clicking an item calls it
+  instead of opening the page; a small ↗ beside the title still opens the page
+  in a new tab. qwksearch uses this to read the page and ask about it.
 
 The bundled catalog is a hand-curated seed of 28 MIT OpenCourseWare courses in
 11 playlists. Course pages link to their canonical `ocw.mit.edu/courses/…`

package/dist/components/EducationPlaylists.d.ts

@@ -8,7 +8,7 @@
  * `compact` it is the full-page view.
  */
 import React from 'react';
-import type { EducationCatalog } from '../types';
+import type { EducationCatalog, PlaylistItem } from '../types';
 import type { QuizGenerator } from '../quiz';
 export interface EducationPlaylistsProps {
     className?: string;
@@ -40,5 +40,12 @@ export interface EducationPlaylistsProps {
     playlistsEndpoint?: string;
     /** Turns on "Quiz me" for each item (NotebookLM or another quiz source). */
     quizGenerator?: QuizGenerator;
+    /**
+     * Called when the learner clicks an item, instead of opening its page. The
+     * host can read the page and start a conversation about it (qwksearch opens
+     * its article reader, which extracts the page's text and asks about it).
+     * Without it, items are plain links that open in a new tab.
+     */
+    onOpenItem?: (item: PlaylistItem) => void;
 }
-export declare function EducationPlaylists({ className, style, compact, catalog: catalogProp, planEndpoint, openHref, shareBaseHref, importFromHash, userId, playlistsEndpoint, quizGenerator, }: EducationPlaylistsProps): React.JSX.Element;
+export declare function EducationPlaylists({ className, style, compact, catalog: catalogProp, planEndpoint, openHref, shareBaseHref, importFromHash, userId, playlistsEndpoint, quizGenerator, onOpenItem, }: EducationPlaylistsProps): React.JSX.Element;

package/dist/components/PlaylistView.d.ts

@@ -4,7 +4,7 @@
  * sharing controls.
  */
 import React from 'react';
-import type { Playlist } from '../types';
+import type { Playlist, PlaylistItem } from '../types';
 import type { QuizGenerator } from '../quiz';
 export interface PlaylistViewProps {
     playlist: Playlist;
@@ -23,5 +23,7 @@ export interface PlaylistViewProps {
     /** Saved to a server-side account, so invites reach the people invited. */
     inAccount?: boolean;
     quizGenerator?: QuizGenerator;
+    /** Called instead of following an item's link; see `EducationPlaylistsProps.onOpenItem`. */
+    onOpenItem?: (item: PlaylistItem) => void;
 }
-export declare function PlaylistView({ playlist, done, onToggle, onChange, onSaveCopy, minutesPerWeek, shareBaseHref, canShare, inAccount, quizGenerator }: PlaylistViewProps): React.JSX.Element;
+export declare function PlaylistView({ playlist, done, onToggle, onChange, onSaveCopy, minutesPerWeek, shareBaseHref, canShare, inAccount, quizGenerator, onOpenItem }: PlaylistViewProps): React.JSX.Element;

package/dist/components/styles.d.ts

@@ -25,6 +25,7 @@ export declare const s: {
     readonly list: CSSProperties;
     readonly item: CSSProperties;
     readonly link: CSSProperties;
+    readonly textButton: CSSProperties;
     readonly badge: CSSProperties;
     readonly section: CSSProperties;
 };

package/dist/index.cjs

@@ -944,6 +944,7 @@ var s = {
   list: { listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 4 },
   item: { display: "flex", alignItems: "flex-start", gap: 8, padding: "6px 4px", borderBottom: "1px solid rgba(127,127,127,0.15)" },
   link: { color: "inherit", textDecoration: "none", fontWeight: 500 },
+  textButton: { border: "none", background: "transparent", padding: 0, font: "inherit", textAlign: "left", cursor: "pointer", minWidth: 0 },
   badge: { fontSize: 10, border: line, borderRadius: 4, padding: "0 5px", opacity: 0.8, whiteSpace: "nowrap" },
   section: { display: "flex", flexDirection: "column", gap: 6 }
 };
@@ -981,7 +982,8 @@ function ItemRow({
   checked,
   onToggle,
   onRemove,
-  quizGenerator
+  quizGenerator,
+  onOpenItem
 }) {
   const [quiz, setQuiz] = (0, import_react.useState)(null);
   const [quizState, setQuizState] = (0, import_react.useState)("idle");
@@ -995,6 +997,7 @@ function ItemRow({
       setQuizState("error");
     }
   };
+  const titleStyle = { ...s.link, textDecoration: checked ? "line-through" : "none", opacity: checked ? 0.6 : 1 };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: s.item, children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "input",
@@ -1007,16 +1010,23 @@ function ItemRow({
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, minWidth: 0, display: "flex", flexDirection: "column", gap: 2 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "a",
-        {
-          href: item.url,
-          target: "_blank",
-          rel: "noopener noreferrer",
-          style: { ...s.link, textDecoration: checked ? "line-through" : "none", opacity: checked ? 0.6 : 1 },
-          children: item.title
-        }
-      ),
+      onOpenItem ? (
+        // The host reads the page and asks about it; the page itself is
+        // still one click away on the arrow beside the title.
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "baseline", gap: 6, minWidth: 0 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: () => onOpenItem(item),
+              title: "Read this page and ask questions about it",
+              style: { ...titleStyle, ...s.textButton },
+              children: item.title
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: item.url, target: "_blank", rel: "noopener noreferrer", style: { ...s.link, ...s.muted }, "aria-label": `Open "${item.title}" in a new tab`, title: "Open the page", children: "\u2197" })
+        ] })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href: item.url, target: "_blank", rel: "noopener noreferrer", style: titleStyle, children: item.title }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { ...s.row, ...s.muted }, children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: s.badge, children: KIND_LABEL[item.kind] }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { title: item.estimateBasis, children: [
@@ -1106,7 +1116,7 @@ function SharingControls({ playlist, onChange, shareBaseHref, inAccount }) {
     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, canShare = true, inAccount = false, quizGenerator }) {
+function PlaylistView({ playlist, done, onToggle, onChange, onSaveCopy, minutesPerWeek, shareBaseHref, canShare = true, inAccount = false, quizGenerator, onOpenItem }) {
   const time = playlistTime(playlist, done);
   const weeks = weeksToFinish(time.remainingMinutes, minutesPerWeek);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: s.section, children: [
@@ -1143,7 +1153,8 @@ function PlaylistView({ playlist, done, onToggle, onChange, onSaveCopy, minutesP
         checked: done.has(item.id),
         onToggle: () => onToggle(item.id),
         onRemove: onChange ? () => onChange(removeItem(playlist, item.id)) : void 0,
-        quizGenerator
+        quizGenerator,
+        onOpenItem
       },
       item.id
     )) }),
@@ -1282,7 +1293,8 @@ function EducationPlaylists({
   importFromHash = false,
   userId,
   playlistsEndpoint,
-  quizGenerator
+  quizGenerator,
+  onOpenItem
 }) {
   const catalog = (0, import_react3.useMemo)(() => catalogProp ?? getDefaultCatalog(), [catalogProp]);
   const progressStore = (0, import_react3.useMemo)(() => createProgressStore(), []);
@@ -1466,7 +1478,8 @@ function EducationPlaylists({
           inAccount: Boolean(remote),
           minutesPerWeek: open.plan?.minutesPerWeek,
           shareBaseHref: shareBase,
-          quizGenerator
+          quizGenerator,
+          onOpenItem
         }
       )
     ] });