@lincyaw/addon-classroom 0.0.0-stage → 1.0.0-rc.1

package/components/PmPulse.css

@@ -0,0 +1,24 @@
+.pm-pulse__question {
+  font-weight: 600;
+}
+.pm-pulse__distribution {
+  margin: 0.4em 0;
+  padding: 0;
+  list-style: none;
+}
+.pm-pulse__distribution li {
+  display: grid;
+  grid-template-columns: 6em 1fr 3.5em;
+  align-items: center;
+  gap: 0.4rem;
+}
+.pm-pulse__bar {
+  height: 0.6em;
+  min-width: var(--pm-size-hairline);
+  border-radius: var(--pm-radius-pill);
+  background: var(--pm-color-accent);
+}
+.pm-pulse__count {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}

package/components/PmPulse.tsx

@@ -0,0 +1,109 @@
+import { Fragment, useState, useRef, useEffect, useMemo, useId } from 'react'
+import type { ReactNode } from 'react'
+import { useMessages } from '@lincyaw/host'
+import {
+  useClassroomStore,
+  useCollection,
+  useGuardedWrite,
+  useParticipation,
+} from '../src/client/composables.ts'
+import { COLLECTIONS, MESSAGES, placeKey, pulseTally, toPulseVote, voteId } from '../src/domain/index.ts'
+import type { Place, PulseVote } from '../src/domain/index.ts'
+import '../src/client/style.css'
+import './PmPulse.css'
+export default function PmPulse(
+  props: {
+    question?: string
+    levels?: string[]
+    place?: Place
+  } & {
+    children?: ReactNode
+    className?: string
+    onDone?(): void
+    onCited?(): void
+    onToggleAnswered?(): void
+    onSend?(): void
+  },
+) {
+  const { place } = props
+
+  const { me, status, joined, presenter } = useParticipation()
+  const store = useClassroomStore()
+  const votes = useCollection(() => store, COLLECTIONS.pulse, toPulseVote)
+  const { failure, write } = useGuardedWrite()
+  const t = useMessages(MESSAGES)
+  const question = props.question ?? t.pulse.question
+  const levels = props.levels ?? t.pulse.levels
+
+  const id = props.place ? placeKey(props.place) : ''
+  const counts = pulseTally(
+    id,
+    levels.length,
+    votes.map((item) => item.value),
+  )
+  const total = counts.reduce((sum, n) => sum + n, 0)
+  const mine = me ? votes.find((item) => item.id === voteId(id, me!.id))?.value : undefined
+  const canVote = joined && !presenter && status === 'active'
+
+  function vote(level: number): void {
+    const participant = me
+    if (!store || !participant || !props.place) return
+    write(() =>
+      store!.put<PulseVote>(COLLECTIONS.pulse, voteId(id, participant.id), {
+        ...props.place!,
+        pulseId: id,
+        participant: participant.id,
+        level,
+        levels: levels,
+        at: Date.now(),
+      }),
+    )
+  }
+
+  return (
+    <>
+      <div className="pm-pulse pm-classroom-card" data-pulse={id}>
+        <p className="pm-pulse__question">{question}</p>
+        {props.children}
+        {canVote ? (
+          <p className="pm-classroom-actions" role="group" aria-label={question}>
+            {levels.map((level, i) => (
+              <button
+                key={i}
+                type="button"
+                className="pm-ui-button pm-ui-button--small"
+                aria-pressed={mine?.level === i}
+                onClick={(event) => {
+                  vote(i)
+                }}
+              >
+                {level}
+              </button>
+            ))}
+          </p>
+        ) : !joined ? (
+          <p className="pm-classroom-status">{t.pulse.joinFirst}</p>
+        ) : null}
+        {presenter ? (
+          <ul className="pm-pulse__distribution" aria-label={t.pulse.distribution}>
+            {levels.map((level, i) => (
+              <li key={i} data-level={level} data-count={counts[i]}>
+                <span className="pm-pulse__label">{level}</span>
+                <span
+                  className="pm-pulse__bar"
+                  style={{ width: `${total ? (counts[i]! / total) * 100 : 0}%` }}
+                ></span>
+                <span className="pm-pulse__count">{t.people(counts[i]!)}</span>
+              </li>
+            ))}
+          </ul>
+        ) : null}
+        {failure ? (
+          <p className="pm-classroom-error" role="alert">
+            {failure}
+          </p>
+        ) : null}
+      </div>
+    </>
+  )
+}

package/components/PmQuestionBox.css

@@ -0,0 +1,16 @@
+.pm-question-box__list {
+  margin: 0.4em 0;
+  padding-left: 1.2em;
+}
+.pm-question-box__list li {
+  margin: 0.35em 0;
+}
+.pm-question-box__list li[data-answered] {
+  color: var(--pm-color-muted);
+}
+.pm-question-box__name {
+  font-weight: 600;
+}
+.pm-question-box__answered {
+  margin-left: 0.5em;
+}

package/components/PmQuestionBox.tsx

@@ -0,0 +1,155 @@
+import { Fragment, useState, useRef, useEffect, useMemo, useId } from 'react'
+import type { ReactNode } from 'react'
+import { useMessages } from '@lincyaw/host'
+import {
+  useClassroomStore,
+  useCollection,
+  useGuardedWrite,
+  useParticipation,
+} from '../src/client/composables.ts'
+import { newId } from '../src/client/ids.ts'
+import { COLLECTIONS, MESSAGES, placeText, toQuestion } from '../src/domain/index.ts'
+import type { Place, Question } from '../src/domain/index.ts'
+import '../src/client/style.css'
+import './PmQuestionBox.css'
+export default function PmQuestionBox(
+  props: {
+    target?: string
+    place?: Place
+  } & {
+    children?: ReactNode
+    className?: string
+    onDone?(): void
+    onCited?(): void
+    onToggleAnswered?(): void
+    onSend?(): void
+  },
+) {
+  const { target, place } = props
+
+  const { me, status, joined, presenter } = useParticipation()
+  const store = useClassroomStore()
+  const questions = useCollection(() => store, COLLECTIONS.questions, toQuestion)
+  const { failure, write } = useGuardedWrite()
+  const [text, setText] = useState('')
+  const t = useMessages(MESSAGES)
+
+  const where = props.place ? placeText({ ...props.place, block: props.target }, t) : ''
+  const here = questions
+    .filter(({ value }) => value.section === props.place?.section && value.block === props.target)
+    .sort((a, b) => a.value.at - b.value.at)
+  const shown = presenter ? here : here.filter(({ value }) => value.participant === me?.id)
+  const canAsk = joined && !presenter && status === 'active'
+
+  function ask(): void {
+    const participant = me
+    const question = text.trim()
+    if (!store || !participant || !props.place || !question) return
+    const { section, title, index } = props.place
+    const asked = write(() =>
+      store!.put<Question>(COLLECTIONS.questions, `${participant.id}:${newId()}`, {
+        section,
+        ...(props.target ? { block: props.target } : {}),
+        title,
+        index,
+        text: question,
+        participant: participant.id,
+        name: participant.name,
+        at: Date.now(),
+      }),
+    )
+    if (asked) setText('')
+  }
+
+  function toggleAnswered(id: string, question: Question): void {
+    write(() =>
+      store?.put<Question>(COLLECTIONS.questions, id, { ...question, answered: !question.answered }),
+    )
+  }
+
+  return (
+    <>
+      <div className="pm-question-box pm-classroom-card" data-place={where}>
+        <div className="pm-question-box__prompt">{props.children}</div>
+        {canAsk ? (
+          <form
+            className="pm-question-box__form"
+            onSubmit={(event) => {
+              event.preventDefault()
+              ask()
+            }}
+          >
+            <textarea
+              value={text}
+              onChange={(event) => setText(event.target.value)}
+              className="pm-ui-textarea"
+              aria-label={t.questions.question}
+              rows={2}
+              maxLength={500}
+              placeholder={t.questions.placeholder}
+              onKeyDown={(event) => {
+                event.stopPropagation()
+              }}
+            ></textarea>
+            <p className="pm-classroom-actions">
+              <button
+                type="submit"
+                className="pm-ui-button pm-ui-button--primary pm-ui-button--small"
+                disabled={!text.trim()}
+              >
+                {t.questions.ask}
+              </button>
+              <span className="pm-classroom-status">{t.questions.attachedTo(where)}</span>
+            </p>
+          </form>
+        ) : !joined ? (
+          <p className="pm-classroom-status">{t.questions.joinFirst}</p>
+        ) : status !== 'active' ? (
+          <p className="pm-classroom-status">{t.questions.ended}</p>
+        ) : null}
+        {shown.length ? (
+          <ul className="pm-question-box__list" aria-label={presenter ? t.questions.here : t.questions.mine}>
+            {shown.map((item) => (
+              <li key={item.id} data-answered={item.value.answered ? '' : undefined}>
+                {presenter ? (
+                  <span className="pm-question-box__name">
+                    {item.value.name}
+                    {t.colon}
+                  </span>
+                ) : null}
+                {item.value.text}
+                {item.value.answered ? (
+                  <span className="pm-question-box__answered pm-ui-badge pm-ui-badge--ok">
+                    {t.questions.answered}
+                  </span>
+                ) : null}
+                {item.value.reply ? (
+                  <p className="pm-classroom-reply">
+                    {item.value.reply.provider ? t.questions.reply(item.value.reply.provider) : ''}
+                    {item.value.reply.text}
+                  </p>
+                ) : null}
+                {presenter && status === 'active' ? (
+                  <button
+                    type="button"
+                    className="pm-ui-button pm-ui-button--small"
+                    onClick={(event) => {
+                      toggleAnswered(item.id, item.value)
+                    }}
+                  >
+                    {item.value.answered ? t.questions.markUnanswered : t.questions.markAnswered}
+                  </button>
+                ) : null}
+              </li>
+            ))}
+          </ul>
+        ) : null}
+        {failure ? (
+          <p className="pm-classroom-error" role="alert">
+            {failure}
+          </p>
+        ) : null}
+      </div>
+    </>
+  )
+}

package/components/PmQuiz.css

@@ -0,0 +1,43 @@
+.pm-quiz__options {
+  display: grid;
+  gap: 0.4em;
+  margin: 0.6em 0;
+  padding: 0;
+  list-style: none;
+}
+.pm-quiz__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5em;
+  margin: 0;
+  padding: 0.35em 0.75em;
+  border: var(--pm-size-hairline) solid var(--pm-color-line);
+  border-radius: var(--pm-radius-control);
+  background: var(--pm-color-surface);
+}
+.pm-quiz__option label {
+  display: flex;
+  align-items: center;
+  gap: 0.5em;
+  cursor: pointer;
+}
+.pm-quiz__option[data-correct] {
+  border-color: var(--pm-color-ok);
+  background: var(--pm-color-ok-soft);
+}
+.pm-quiz__option[data-correct] .pm-quiz__letter {
+  color: var(--pm-color-ok);
+}
+.pm-quiz__letter {
+  color: var(--pm-color-accent);
+  font-family: var(--pm-font-mono);
+  font-weight: 600;
+}
+.pm-quiz__count {
+  font-variant-numeric: tabular-nums;
+}
+.pm-quiz__tally {
+  margin: 0.25rem 0 0;
+  font-weight: 600;
+}

package/components/PmQuiz.tsx

@@ -0,0 +1,221 @@
+import { Fragment, useState, useRef, useEffect, useMemo, useId } from 'react'
+import type { ReactNode } from 'react'
+import { useMessages } from '@lincyaw/host'
+import {
+  useClassroomStore,
+  useCollection,
+  useGuardedWrite,
+  useParticipation,
+} from '../src/client/composables.ts'
+import {
+  acceptsAnswers,
+  answerId,
+  COLLECTIONS,
+  countedAnswers,
+  isCorrect,
+  lateAnswers,
+  MESSAGES,
+  optionLetter,
+  placeKey,
+  quizSwitched,
+  quizTally,
+  toAnswer,
+  toQuizState,
+} from '../src/domain/index.ts'
+import type { Answer, Place, QuizState } from '../src/domain/index.ts'
+import '../src/client/style.css'
+import './PmQuiz.css'
+export default function PmQuiz(
+  props: {
+    options: string[]
+    correct: number[]
+    place?: Place
+  } & {
+    children?: ReactNode
+    className?: string
+    onDone?(): void
+    onCited?(): void
+    onToggleAnswered?(): void
+    onSend?(): void
+  },
+) {
+  const { options, correct, place } = props
+
+  const { me, status, joined, presenter } = useParticipation()
+  const store = useClassroomStore()
+  const quizzes = useCollection(() => store, COLLECTIONS.quizzes, toQuizState)
+  const answers = useCollection(() => store, COLLECTIONS.answers, toAnswer)
+  const { failure, write } = useGuardedWrite()
+  const t = useMessages(MESSAGES)
+  const name = useId()
+
+  const id = props.place ? placeKey(props.place) : ''
+  const state = quizzes.find((item) => item.id === id)?.value
+  const counted = countedAnswers(
+    id,
+    state,
+    answers.map((item) => item.value),
+  )
+  const late = lateAnswers(
+    id,
+    state,
+    answers.map((item) => item.value),
+  )
+  const result = quizTally(props.options.length, props.correct, counted)
+  const multiple = props.correct.length > 1
+  const open = acceptsAnswers(status, state)
+  const closed = state?.open === false
+  const submitted = me ? answers.find((item) => item.id === answerId(id, me!.id))?.value : undefined
+  const mine = closed ? counted.find((a) => a.participant === me?.id) : submitted
+
+  const [choice, setChoice] = useState<number[]>([])
+  const [tried, setTried] = useState<number[]>()
+  useEffect(() => {
+    if (mine && (closed || choice.length === 0)) setChoice([...mine.choice])
+  }, [mine, closed])
+
+  const canAnswer = joined ? !presenter && open : true
+  const showTally = joined && (presenter || closed)
+  const revealed = joined ? closed : tried !== undefined
+  const letters = (choice: number[]) => choice.map(optionLetter).join(t.quiz.letters)
+
+  const statusText = (() => {
+    const { quiz } = t
+    if (!joined) {
+      if (!tried) return quiz.selfTest
+      return isCorrect(tried, props.correct) ? quiz.right : quiz.wrong(letters(props.correct))
+    }
+    if (presenter)
+      return open ? quiz.answering : closed ? quiz.closed : status === 'active' ? quiz.notOpen : quiz.ended
+    if (closed) {
+      const verdict = mine ? quiz.yours(isCorrect(mine.choice, props.correct)) : ''
+      return `${quiz.closed}${verdict}${late.some((a) => a.participant === me?.id) ? quiz.lateMine : ''}`
+    }
+    if (status !== 'active') return quiz.ended
+    if (!open) return quiz.waiting
+    return submitted ? quiz.submitted(letters(submitted.choice)) : quiz.open
+  })()
+
+  function toggle(i: number): void {
+    if (!multiple) setChoice([i])
+    else setChoice(choice.includes(i) ? choice.filter((c) => c !== i) : [...choice, i].sort((a, b) => a - b))
+  }
+
+  function submit(): void {
+    if (!joined) {
+      setTried([...choice])
+      return
+    }
+    const participant = me
+    if (!store || !participant || !canAnswer) return
+    write(() =>
+      store!.put<Answer>(COLLECTIONS.answers, answerId(id, participant.id), {
+        quizId: id,
+        participant: participant.id,
+        name: participant.name,
+        choice: choice,
+        at: Date.now(),
+      }),
+    )
+  }
+
+  function setOpen(next: boolean): void {
+    if (!store || !props.place) return
+    const quiz = { ...props.place, options: props.options, correct: props.correct, openedAt: state?.openedAt }
+    write(() => store!.put<QuizState>(COLLECTIONS.quizzes, id, quizSwitched(quiz, next, counted, Date.now())))
+  }
+
+  return (
+    <>
+      <div
+        className="pm-quiz pm-classroom-card"
+        data-quiz={id}
+        data-state={open ? 'open' : closed ? 'closed' : 'waiting'}
+      >
+        <div className="pm-quiz__prompt">{props.children}</div>
+        <form
+          className="pm-quiz__form"
+          onSubmit={(event) => {
+            event.preventDefault()
+            submit()
+          }}
+        >
+          <ol className="pm-quiz__options">
+            {options.map((option, i) => (
+              <li
+                key={i}
+                className="pm-quiz__option"
+                data-option={optionLetter(i)}
+                data-correct={revealed && correct.includes(i) ? '' : undefined}
+              >
+                <label>
+                  <input
+                    className="pm-ui-checkbox"
+                    type={multiple ? 'checkbox' : 'radio'}
+                    name={name}
+                    checked={choice.includes(i)}
+                    disabled={!canAnswer}
+                    onChange={(event) => {
+                      toggle(i)
+                    }}
+                  ></input>
+                  <span className="pm-quiz__letter">{optionLetter(i)}</span>
+                  <span>{option}</span>
+                </label>
+                {showTally ? <span className="pm-quiz__count">{t.people(result.counts[i]!)}</span> : null}
+              </li>
+            ))}
+          </ol>
+          <p className="pm-classroom-actions">
+            {!presenter ? (
+              <button
+                type="submit"
+                className="pm-ui-button pm-ui-button--primary pm-ui-button--small"
+                disabled={!canAnswer || choice.length === 0}
+              >
+                {t.quiz.submit}
+              </button>
+            ) : null}
+            {presenter && status === 'active' ? (
+              <>
+                {!open ? (
+                  <button
+                    type="button"
+                    className="pm-ui-button pm-ui-button--primary pm-ui-button--small"
+                    onClick={(event) => {
+                      setOpen(true)
+                    }}
+                  >
+                    {t.quiz.openButton}
+                  </button>
+                ) : (
+                  <button
+                    type="button"
+                    className="pm-ui-button pm-ui-button--small"
+                    onClick={(event) => {
+                      setOpen(false)
+                    }}
+                  >
+                    {t.quiz.closeButton}
+                  </button>
+                )}
+              </>
+            ) : null}
+          </p>
+        </form>
+        <p className="pm-classroom-status" role="status">
+          {statusText}
+        </p>
+        {showTally ? (
+          <p className="pm-quiz__tally">{t.quiz.tally(result.respondents, result.correct)}</p>
+        ) : null}
+        {presenter && late.length ? <p className="pm-quiz__late">{t.quiz.late(late.length)}</p> : null}
+        {failure ? (
+          <p className="pm-classroom-error" role="alert">
+            {failure}
+          </p>
+        ) : null}
+      </div>
+    </>
+  )
+}

package/package.json

@@ -1,6 +1,47 @@
 {
   "name": "@lincyaw/addon-classroom",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "1.0.0-rc.1",
+  "description": "Presmium plugin: classroom features: anchored notes, quizzes, checked exercises, questions, feedback, and predict-then-reveal",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Lincyaw/presmium.git",
+    "directory": "packages/addon-classroom"
+  },
+  "homepage": "https://github.com/Lincyaw/presmium/tree/main/packages/addon-classroom#readme",
+  "bugs": "https://github.com/Lincyaw/presmium/issues",
+  "keywords": [
+    "presmium"
+  ],
+  "type": "module",
+  "engines": {
+    "node": ">=22.19"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    "./domain": "./src/domain/index.ts",
+    "./client": "./src/client/index.ts",
+    "./presmium": "./src/node/presmium.ts",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "components",
+    "src"
+  ],
+  "dependencies": {},
+  "peerDependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@lincyaw/host": "^1.0.0-rc.1",
+    "@lincyaw/kernel": "^1.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@types/react": "18.3.28",
+    "@types/react-dom": "^18.3.7",
+    "@lincyaw/kernel": "1.0.0-rc.1",
+    "@lincyaw/cli": "1.0.0-rc.1",
+    "@lincyaw/host": "1.0.0-rc.1"
+  }
 }

package/src/client/ClassroomOverlays.tsx

@@ -0,0 +1,15 @@
+import { claimFirst } from '@lincyaw/host'
+import { useEffect, useState } from 'react'
+
+import NotesLayer from './NotesLayer.tsx'
+export default function ClassroomOverlays() {
+  const [owns, setOwns] = useState(false)
+  useEffect(() => {
+    const claim = claimFirst('presmium.classroom.notes')
+    const update = () => setOwns(claim.owns.getSnapshot())
+    const stop = claim.owns.subscribe(update)
+    update()
+    return () => { stop(); claim.release() }
+  }, [])
+  return owns ? <NotesLayer /> : null
+}

package/src/client/ClassroomPanel.css

@@ -0,0 +1,32 @@
+.pm-classroom-panel {
+  display: grid;
+  gap: 0.5rem;
+  color: var(--pm-color-ink);
+  font-family: var(--pm-font-sans);
+  font-size: 0.875rem;
+  line-height: 1.5;
+  text-align: left;
+}
+.pm-classroom-panel section {
+  display: grid;
+  gap: 0.35rem;
+  padding-top: 0.5rem;
+  border-top: var(--pm-size-hairline) solid var(--pm-color-line);
+}
+.pm-classroom-panel section:first-child {
+  padding-top: 0;
+  border-top: 0;
+}
+.pm-classroom-panel p {
+  margin: 0;
+}
+.pm-classroom-panel ul {
+  margin: 0.15rem 0 0.35rem;
+  padding-left: 1.2em;
+}
+.pm-classroom-panel li {
+  margin: 0.25rem 0;
+}
+.pm-classroom-panel__where {
+  font-weight: 600;
+}