@skillcdn/console 0.3.1 → 0.3.2

package/src/components/ui.tsx

@@ -145,6 +145,31 @@ export function PersonChip(props: { readonly person: RestPerson; readonly size?:
   );
 }
 
+/** How many of a task's workers are shown as pictures before the rest are a count. */
+const WORKERS_SHOWN = 3;
+
+/** The people at work on a task (ADR-0037), as pictures side by side with a count of the rest; nothing while nobody is. */
+export function Workers(props: {
+  readonly workers: readonly RestPerson[];
+  readonly size?: "xs" | "sm";
+  /** How many are shown as pictures; the rest are a count. */
+  readonly shown?: number;
+}) {
+  if (props.workers.length === 0) {
+    return null;
+  }
+  const shown = props.shown ?? WORKERS_SHOWN;
+  const rest = props.workers.length - shown;
+  return (
+    <span className="sc-workers" title={props.workers.map(personName).join(", ")}>
+      {props.workers.slice(0, shown).map((worker) => (
+        <Avatar key={worker.id} person={worker} size={props.size ?? "sm"} />
+      ))}
+      {rest > 0 && <span className="sc-workers-more">+{rest}</span>}
+    </span>
+  );
+}
+
 /** The words of the vocabulary as people read them, in English: the default pack's. */
 export const STATE_LABELS: Readonly<Record<TaskState, string>> = {
   idea: "Idea",

package/src/components/work.tsx

@@ -1,13 +1,13 @@
 import type { RestTask, RestWork, WeekStart } from "../api.js";
-import { addDays, today as todayOf } from "../dates.js";
-import { useWords } from "../i18n/index.js";
+import { deviceLanguage, firstDayOfWeek, today as todayOf, weekOf } from "../dates.js";
+import { useLanguage, useWords } from "../i18n/index.js";
 import { Week } from "./calendar.js";
 import { ProjectMark } from "./projects.js";
 import { TaskList } from "./task-list.js";
 import { PersonChip, Time } from "./ui.js";
 
 // What is on a person's plate (ADR-0019), across the projects they may see: the week at the
-// top, with the open tasks assigned to them on its days, and what of theirs was done or
+// top, with the open tasks they work on on its days, and what of theirs was done or
 // dropped on them, as a project's calendar shows it; below, the open tasks by when they are
 // due, and the decisions that wait for a person. Takes its data as props and nothing from the
 // network; the week shown is the address's (ADR-0010).
@@ -35,8 +35,10 @@ export interface WorkListProps {
 export function WorkList(props: WorkListProps) {
   const words = useWords();
   const work = words.work;
+  const { tag } = useLanguage();
   const now = props.today ?? todayOf();
-  const weekEnd = addDays(now, 6);
+  // This week ends with the week's last day, as the workspace begins its weeks (ADR-0039).
+  const weekEnd = weekOf(now, firstDayOfWeek(deviceLanguage(tag), props.weekStart)).at(-1) ?? now;
   const { tasks, decisions } = props.work;
   const closed = props.work.closed ?? [];
   const projectOf = new Map([...tasks, ...closed].map((item) => [item.task.id, item.project]));

package/src/console.tsx

@@ -600,6 +600,28 @@ function TaskPage(props: {
     (fetched !== undefined && (fetched.id === route.id || fetched.number === route.number)
       ? fetched
       : undefined);
+  // The task this one is part of: among the board's, or asked for by itself when it was put away.
+  const parentId = task?.parentId ?? null;
+  const parentOnBoard =
+    parentId === null ? undefined : data.tasks.find((candidate) => candidate.id === parentId);
+  const [parentFetched, setParentFetched] = useState<RestTask | undefined>(undefined);
+  const parentWanted =
+    parentId !== null && parentOnBoard === undefined && data.projectLoaded ? parentId : undefined;
+  useEffect(() => {
+    if (parentWanted === undefined) {
+      return;
+    }
+    const controller = new AbortController();
+    fetchTask(parentWanted, controller.signal)
+      .then((found) => {
+        if (!controller.signal.aborted) {
+          setParentFetched(found);
+        }
+      })
+      .catch(() => undefined);
+    return () => controller.abort();
+  }, [parentWanted, fetchTask]);
+  const parent = parentOnBoard ?? (parentFetched?.id === parentId ? parentFetched : undefined);
   const [history, setHistory] = useState<readonly RestEvent[] | undefined>(undefined);
   const [comments, setComments] = useState<readonly RestComment[] | undefined>(undefined);
   const { taskHistory, taskComments } = data.actions;
@@ -653,6 +675,9 @@ function TaskPage(props: {
       task={task}
       people={data.people.filter(inWorkspace)}
       tasks={data.tasks}
+      parent={parent}
+      findTasks={data.actions.findTasks}
+      findGoals={data.actions.findGoals}
       decisions={data.decisions}
       runs={data.runs}
       comments={comments}
@@ -805,9 +830,9 @@ function ProjectPage(props: {
         <section className="sc-panel sc-panel-form" aria-label={words.task.newAria}>
           <TaskForm
             people={data.people.filter(inWorkspace)}
-            parents={data.tasks}
+            findTasks={data.actions.findTasks}
             categories={data.categories}
-            goals={data.goals}
+            findGoals={data.actions.findGoals}
             busy={busy}
             onSubmit={(input: RestTaskInput) =>
               void act(async () => {
@@ -907,6 +932,7 @@ function ProjectPage(props: {
             <Workload
               tasks={shown}
               today={now}
+              weekStart={weekStartOf(data.me?.workspace)}
               personHref={(person) =>
                 boardHref(key, person === undefined ? {} : { person: person.id })
               }
@@ -1796,7 +1822,7 @@ function WorkspaceSettingsPage(props: {
 }
 
 /** A file a person chose, as the client sends it: its name, its bytes and the type the browser says. */
-/** Whether a person is in: who a picker of assignees and of members offers (ADR-0022). */
+/** Whether a person is in: who a picker of workers and of members offers (ADR-0022). */
 const inWorkspace = (person: { readonly status: "active" | "deactivated" }): boolean =>
   person.status === "active";
 

package/src/data.ts

@@ -24,6 +24,7 @@ import {
   type RestGoal,
   type RestGoalInput,
   type RestGoalPatch,
+  type RestGoals,
   type RestListing,
   type RestListingInput,
   type RestMe,
@@ -107,6 +108,18 @@ export interface ConsoleActions {
     page: { readonly limit: number; readonly offset: number },
     signal?: AbortSignal,
   ): Promise<RestTasks>;
+  /** What words find among the current tasks of the project, a page at a time, for a picker (ADR-0037); the first page of them for no words. */
+  findTasks(
+    query: string,
+    page: { readonly limit: number; readonly offset: number },
+    signal?: AbortSignal,
+  ): Promise<RestTasks>;
+  /** What words find among the open goals of the project, a page at a time, for a picker. */
+  findGoals(
+    query: string,
+    page: { readonly limit: number; readonly offset: number },
+    signal?: AbortSignal,
+  ): Promise<RestGoals>;
   raiseDecision(input: RestDecisionInput): Promise<RestDecision>;
   answerDecision(id: string, input: RestAnswerInput): Promise<RestDecision>;
   /** Grows a decision's record: its context, or what followed. */
@@ -265,6 +278,32 @@ async function readTasks(
   return { items };
 }
 
+/** How many pages of the roadmap are read before it is shown as it stands. */
+const GOALS_MAX_PAGES = 20;
+
+/**
+ * The goals of a project, whole: page after page while the server says there is more, since
+ * the roadmap, the calendar and the filters draw them all.
+ */
+async function readGoals(
+  scope: ProjectClient,
+  signal: AbortSignal | undefined,
+): Promise<{ readonly items: RestGoal[] }> {
+  const items: RestGoal[] = [];
+  for (let page = 0; page < GOALS_MAX_PAGES; page += 1) {
+    const result = await scope.goals({ limit: LIST_LIMIT, offset: page * LIST_LIMIT }, signal);
+    items.push(...result.items);
+    if (!result.more) {
+      break;
+    }
+  }
+  return { items };
+}
+
+/** The words of a search as the API takes them: none for a blank. */
+const searchWordsOf = (query: string): { readonly q?: string } =>
+  query.trim() === "" ? {} : { q: query.trim() };
+
 /** How many pages of the decisions are read before the record is shown as it stands. */
 const DECISIONS_MAX_PAGES = 20;
 
@@ -353,7 +392,7 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
           scope.get(signal),
           readTasks(scope, signal),
           readDecisions(scope, signal),
-          scope.goals({}, signal),
+          readGoals(scope, signal),
           scope.runs(undefined, signal),
           scope.members(signal),
         ]);
@@ -608,6 +647,10 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
         return archived;
       },
       archivedTasks: (page, signal) => scope().tasks({ archived: true, ...page }, signal),
+      findTasks: (query, page, signal) =>
+        scope().tasks({ archived: false, ...searchWordsOf(query), ...page }, signal),
+      findGoals: (query, page, signal) =>
+        scope().goals({ open: true, ...searchWordsOf(query), ...page }, signal),
       async raiseDecision(input) {
         const decision = await scope().raiseDecision(input);
         await refreshProject();

package/src/i18n/en.ts

@@ -121,6 +121,11 @@ export const en = {
       next: "Next page",
       range: (from: number, to: number, of: number) => `${from}-${to} of ${of}`,
     },
+    picker: {
+      nothingFound: "Nothing matches",
+      searching: "Searching",
+      more: "Show more",
+    },
   },
 
   nav: {
@@ -304,7 +309,7 @@ export const en = {
     },
     partOf: "Part of",
     owner: "Owner",
-    assignee: "Assignee",
+    workers: "Workers",
     written: "Written",
     changed: "Changed",
     state: "State",
@@ -338,8 +343,11 @@ export const en = {
       bodyPlaceholder: "What is to be done, in Markdown.",
       state: "State",
       priority: "Priority",
-      assignee: "Assignee",
+      workers: "Workers",
+      addWorker: "Add a worker",
       partOf: "Part of",
+      searchTasks: "Search by number or title",
+      searchGoals: "Search by title",
       category: "Category",
       noCategory: "No category",
       goal: "Goal",
@@ -425,7 +433,7 @@ export const en = {
       person: "Person",
       open: "Open",
       inProgress: "In progress",
-      dueSoon: "Due in 7 days",
+      dueThisWeek: "Due this week",
       overdue: "Overdue",
       unassigned: "Nobody's yet",
     },
@@ -497,8 +505,8 @@ export const en = {
     loading: "Loading your work",
     couldNotLoad: "Your work could not be loaded.",
     empty: {
-      title: "Nothing is assigned to you",
-      body: "A task assigned to you in any project you may see shows up here.",
+      title: "Nothing is on your plate",
+      body: "A task you work on, in any project you may see, shows up here.",
     },
     overdue: "Overdue",
     thisWeek: "Due this week",
@@ -609,7 +617,7 @@ export const en = {
       title: "the title",
       body: "the body",
       priority: "the priority",
-      assigneeId: "the assignee",
+      workers: "the workers",
       parentId: "what it is part of",
       links: "the links",
       name: "the name",
@@ -861,8 +869,8 @@ export const en = {
     loadingWork: "Loading the work",
     couldNotLoadWork: "The work could not be loaded.",
     noWork: {
-      title: (name: string) => `Nothing is assigned to ${name}`,
-      body: "An open task assigned to them, in a project you may see, shows up here.",
+      title: (name: string) => `Nothing is on ${name}'s plate`,
+      body: "An open task they work on, in a project you may see, shows up here.",
     },
     notOverseen: {
       title: "Not yours to see",

package/src/i18n/ko.ts

@@ -83,6 +83,11 @@ export const ko: Messages = {
       next: "다음",
       range: (from, to, of) => `${of}건 중 ${from}-${to}`,
     },
+    picker: {
+      nothingFound: "맞는 것이 없습니다",
+      searching: "검색 중",
+      more: "더 보기",
+    },
   },
 
   nav: {
@@ -264,7 +269,7 @@ export const ko: Messages = {
     },
     partOf: "상위 작업:",
     owner: "담당자",
-    assignee: "배정",
+    workers: "작업자",
     written: "작성",
     changed: "변경",
     state: "상태",
@@ -298,8 +303,11 @@ export const ko: Messages = {
       bodyPlaceholder: "무엇을 할지, Markdown으로.",
       state: "상태",
       priority: "우선순위",
-      assignee: "배정",
+      workers: "작업자",
+      addWorker: "작업자 추가",
       partOf: "상위 작업",
+      searchTasks: "번호나 제목으로 검색",
+      searchGoals: "제목으로 검색",
       category: "카테고리",
       noCategory: "카테고리 없음",
       goal: "목표",
@@ -385,9 +393,9 @@ export const ko: Messages = {
       person: "사람",
       open: "열림",
       inProgress: "진행 중",
-      dueSoon: "7일 내 마감",
+      dueThisWeek: "이번 주 마감",
       overdue: "기한 지남",
-      unassigned: "아직 배정 없음",
+      unassigned: "아직 작업자 없음",
     },
   },
 
@@ -456,8 +464,8 @@ export const ko: Messages = {
     loading: "내 작업을 불러오는 중",
     couldNotLoad: "내 작업을 불러올 수 없습니다.",
     empty: {
-      title: "내게 배정된 작업이 없습니다",
-      body: "볼 수 있는 어느 프로젝트에서든 내게 배정된 작업이 여기에 나타납니다.",
+      title: "내가 맡은 작업이 없습니다",
+      body: "볼 수 있는 어느 프로젝트에서든 내가 작업자인 작업이 여기에 나타납니다.",
     },
     overdue: "기한 지남",
     thisWeek: "이번 주 마감",
@@ -567,7 +575,7 @@ export const ko: Messages = {
       title: "제목",
       body: "본문",
       priority: "우선순위",
-      assigneeId: "배정",
+      workers: "작업자",
       parentId: "상위 작업",
       links: "링크",
       name: "이름",
@@ -816,8 +824,8 @@ export const ko: Messages = {
     loadingWork: "작업을 불러오는 중",
     couldNotLoadWork: "작업을 불러올 수 없습니다.",
     noWork: {
-      title: (name) => `${name}에게 배정된 작업이 없습니다`,
-      body: "내가 볼 수 있는 프로젝트에서 그 사람에게 배정된 열린 작업이 여기에 나타납니다.",
+      title: (name) => `${name}에게 맡겨진 작업이 없습니다`,
+      body: "내가 볼 수 있는 프로젝트에서 그 사람이 작업자인 열린 작업이 여기에 나타납니다.",
     },
     notOverseen: {
       title: "볼 수 없는 작업입니다",

package/src/index.ts

@@ -102,6 +102,13 @@ export {
   PeopleList,
   type PeopleListProps,
 } from "./components/people.js";
+export {
+  PICKER_PAGE_LIMIT,
+  Picker,
+  type PickerPage,
+  type PickerProps,
+  type PickerSearch,
+} from "./components/picker.js";
 export {
   clampScale,
   FITTED,
@@ -168,7 +175,14 @@ export {
 } from "./components/shell.js";
 export { SignIn, type SignInProps } from "./components/sign-in.js";
 export { SkillList, type SkillListProps } from "./components/skills.js";
-export { TaskForm, type TaskFormProps } from "./components/task-form.js";
+export {
+  type GoalSearch,
+  goalLabel,
+  TaskForm,
+  type TaskFormProps,
+  type TaskSearch,
+  taskLabel,
+} from "./components/task-form.js";
 export { TaskList, type TaskListProps } from "./components/task-list.js";
 export { TaskView, type TaskViewProps } from "./components/task-view.js";
 export {
@@ -204,6 +218,7 @@ export {
   STATE_LABELS,
   StateBadge,
   Time,
+  Workers,
 } from "./components/ui.js";
 export { WorkList, type WorkListProps } from "./components/work.js";
 export {

package/src/limits.ts

@@ -9,6 +9,8 @@ export const MAX_QUESTION_LENGTH = 500;
 export const MAX_BODY_LENGTH = 20_000;
 /** The links of a task: a repository, a pull request, a document. */
 export const MAX_LINKS = 20;
+/** How many people may be at work on one task at a time (ADR-0037): a crew, not a mailing list. */
+export const MAX_WORKERS = 20;
 export const MAX_LINK_LABEL_LENGTH = 120;
 export const MAX_URL_LENGTH = 2048;
 /** The options of a decision, and how a person words each. */

package/src/schemas.ts

@@ -39,6 +39,7 @@ import {
   MAX_TOKEN_DAYS,
   MAX_TOKEN_NAME_LENGTH,
   MAX_URL_LENGTH,
+  MAX_WORKERS,
   MIN_OPTIONS,
 } from "./limits.js";
 import { hasForbiddenCodePoint } from "./text.js";
@@ -480,8 +481,10 @@ export const restTaskSchema = z.object({
   body: z.string(),
   state: z.enum(TASK_STATES),
   priority: z.enum(TASK_PRIORITIES),
+  /** Whose task it is: one person, whoever wrote it. */
   owner: restPersonSchema,
-  assignee: z.nullable(restPersonSchema),
+  /** The people at work on it (ADR-0037), in the order they came to it; `[]` while nobody is. */
+  workers: z.array(restPersonSchema),
   /** The task this one is part of, or `null`. */
   parentId: z.nullable(uuid),
   /** The category the task is sorted into, as the workspace keeps it, or `null`. */
@@ -530,7 +533,8 @@ export const restTaskInputSchema = z.object({
   body: z.optional(body),
   state: z.optional(z.enum(TASK_STATES)),
   priority: z.optional(z.enum(TASK_PRIORITIES)),
-  assigneeId: z.optional(z.nullable(uuid)),
+  /** The people to be at work on it, each one who may work in the project, in place of those there were; `[]` for nobody. */
+  workerIds: z.optional(z.array(uuid).check(z.maxLength(MAX_WORKERS))),
   parentId: z.optional(z.nullable(uuid)),
   /** The key of a category of the workspace, or `null` for none. */
   category: z.optional(z.nullable(categoryKey)),
@@ -549,7 +553,7 @@ export const restTaskPatchSchema = z.object({
   body: z.optional(body),
   state: z.optional(z.enum(TASK_STATES)),
   priority: z.optional(z.enum(TASK_PRIORITIES)),
-  assigneeId: z.optional(z.nullable(uuid)),
+  workerIds: z.optional(z.array(uuid).check(z.maxLength(MAX_WORKERS))),
   parentId: z.optional(z.nullable(uuid)),
   category: z.optional(z.nullable(categoryKey)),
   goalId: z.optional(z.nullable(uuid)),
@@ -596,8 +600,8 @@ export const restGoalSchema = z.object({
 });
 export type RestGoal = z.infer<typeof restGoalSchema>;
 
-/** `GET /api/v1/projects/<key>/goals`: the roadmap, the active goals first. */
-export const restGoalsSchema = z.object({ items: z.array(restGoalSchema) });
+/** `GET /api/v1/projects/<key>/goals`: a page of the roadmap, the active goals first, and whether there is more after it. */
+export const restGoalsSchema = z.object({ items: z.array(restGoalSchema), more: z.boolean() });
 export type RestGoals = z.infer<typeof restGoalsSchema>;
 
 /** What `POST /api/v1/projects/<key>/goals` is sent: the title, and the rest with defaults. */
@@ -686,8 +690,8 @@ const projectRef = z.object({
 
 /**
  * `GET /api/v1/work`: what is on the asker's plate across the projects they may see (ADR-0019):
- * the open tasks assigned to them, and the decisions that wait for a person, each with its
- * project; and, for the week on the plate, `closed`, the tasks assigned to them that are done
+ * the open tasks they work on, and the decisions that wait for a person, each with its
+ * project; and, for the week on the plate, `closed`, the tasks they work on that are done
  * or dropped and not yet put away. Left out by a console older than it.
  */
 export const restWorkSchema = z.object({

package/src/styles/console.css

@@ -1238,6 +1238,150 @@ table {
   justify-self: start;
 }
 
+/* The workers of a task on its form: each a chip with the way to take them off, and the way to add one. */
+.sc-chips {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-2);
+}
+
+.sc-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--sc-space-1);
+  min-height: var(--sc-control-size);
+  padding: 0 var(--sc-space-1) 0 var(--sc-space-2);
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-md);
+  background: var(--sc-color-bg-inset);
+  font-size: var(--sc-text-sm);
+}
+
+.sc-chip-remove,
+.sc-picker-clear {
+  display: inline-grid;
+  flex: none;
+  place-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border: 0;
+  border-radius: var(--sc-radius-sm);
+  background: transparent;
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-md);
+  line-height: 1;
+  cursor: pointer;
+}
+
+.sc-chip-remove:hover:not(:disabled),
+.sc-picker-clear:hover:not(:disabled) {
+  background: var(--sc-color-bg-raised);
+  color: var(--sc-color-text);
+}
+
+.sc-chip-remove:focus-visible,
+.sc-picker-clear:focus-visible {
+  outline: var(--sc-focus-ring);
+}
+
+.sc-chips .sc-chip-add {
+  width: auto;
+  min-width: 10rem;
+}
+
+/* A picker: the field that searches a listing, its page of results under it, and the choice in its place. */
+.sc-picker {
+  position: relative;
+  min-width: 0;
+}
+
+.sc-picker-chosen {
+  display: flex;
+  align-items: center;
+  gap: var(--sc-space-2);
+  min-height: var(--sc-control-size);
+  padding: var(--sc-space-1) var(--sc-space-1) var(--sc-space-1) var(--sc-space-3);
+  border: 1px solid var(--sc-color-border-strong);
+  border-radius: var(--sc-radius-md);
+  background: var(--sc-color-field);
+  font-size: var(--sc-text-sm);
+}
+
+.sc-picker-value {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.sc-picker-list {
+  position: absolute;
+  z-index: 40;
+  top: calc(100% + var(--sc-space-1));
+  right: 0;
+  left: 0;
+  max-height: 18rem;
+  margin: 0;
+  padding: var(--sc-space-1);
+  overflow-y: auto;
+  list-style: none;
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-md);
+  background: var(--sc-color-bg-inset);
+  box-shadow: var(--sc-shadow-stage);
+  font-size: var(--sc-text-sm);
+}
+
+/* Where the window has no room below the field, and more above, the list stands above it. */
+.sc-picker-list-above {
+  top: auto;
+  bottom: calc(100% + var(--sc-space-1));
+}
+
+.sc-picker-option {
+  padding: var(--sc-space-2);
+  overflow: hidden;
+  border-radius: var(--sc-radius-sm);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.sc-picker-option-active {
+  background: var(--sc-color-bg-raised);
+}
+
+.sc-picker-note {
+  padding: var(--sc-space-2);
+}
+
+/* The workers of a task on a card or a row: pictures side by side, and how many more. */
+.sc-workers {
+  display: inline-flex;
+  align-items: center;
+}
+
+.sc-workers > * + * {
+  margin-left: -0.375rem;
+}
+
+.sc-workers-more {
+  margin-inline: var(--sc-space-1);
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-xs);
+  font-weight: var(--sc-weight-medium);
+}
+
+.sc-worker-list {
+  display: grid;
+  gap: var(--sc-space-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
 .sc-form-actions {
   display: flex;
   flex-wrap: wrap;
@@ -2906,8 +3050,10 @@ table {
   white-space: nowrap;
 }
 
-/* Lit a little under the pointer by its colour, not by a filter, which would light the card within it too. */
-.sc-calendar-bar:hover {
+/* The task under the pointer is lit a little by its colour, in every piece of its bar and in
+   every week it crosses, never one piece alone; by its colour and not by a filter, which would
+   light the card within it too. */
+.sc-calendar-bar-pointed {
   background: color-mix(in srgb, var(--sc-category-fill), white 12%);
 }
 
@@ -2925,6 +3071,18 @@ table {
   border-end-end-radius: var(--sc-radius-full);
 }
 
+/* The title of a bar with more days in the week runs along the bar as far as its days reach,
+   less the room of its end, instead of stopping at the first day's edge: above every piece,
+   the one under the pointer included, and under the cards; the pointer goes through it to the
+   piece of the day beneath. The days are the first piece's own custom property. */
+.sc-calendar-task-title-spanning {
+  position: relative;
+  z-index: 25;
+  flex: none;
+  max-width: calc(var(--sc-span, 1) * 100% - 2.25rem);
+  pointer-events: none;
+}
+
 .sc-calendar-bar.sc-calendar-late {
   border-color: color-mix(in srgb, var(--sc-color-danger) 70%, transparent);
   color: var(--sc-color-danger);
@@ -3365,18 +3523,12 @@ table {
   position: relative;
 }
 
-/* The item under the pointer rises above its neighbours, which would otherwise paint over its card. */
-.sc-calendar-task:hover,
-.sc-calendar-task:focus-visible,
-.sc-calendar-bar:hover,
-.sc-calendar-bar:focus-visible {
-  z-index: 20;
-}
-
+/* The card rises above its neighbours and above a title running along a bar; the item under the
+   pointer itself stays in its layer, so that nothing of it covers such a title. */
 .sc-task-tip {
   position: absolute;
   left: 0;
-  z-index: 20;
+  z-index: 30;
   width: max-content;
   max-width: 20rem;
   padding: var(--sc-space-2) var(--sc-space-3);

package/src/vocabulary.ts

@@ -30,6 +30,9 @@ export const GOAL_STATES = ["planned", "active", "done", "dropped"] as const;
 
 export type GoalState = (typeof GOAL_STATES)[number];
 
+/** The states a goal is still open in: planned, or being worked towards. */
+export const OPEN_GOAL_STATES: readonly GoalState[] = ["planned", "active"];
+
 /**
  * The colours a category, or a project's mark, may be shown in: names, so that a custom console
  * paints them in its own tokens and no value a person typed reaches a stylesheet.