@instructure/platform-modules 0.1.0

package/dist/adapters/limits.d.ts

@@ -0,0 +1,86 @@
+/**
+ * The transport limits both adapters are bound by, defined once.
+ *
+ * ## What "inlining" means
+ *
+ * A modules page needs two things: the list of modules, and the items inside each
+ * module. There are two ways to get them.
+ *
+ * **Inlined** — ask for the items *in the same request as the module list*, nested
+ * under each module. One round trip for the whole page. On REST that is
+ * `?include[]=items`; on GraphQL it is the nested `moduleItemsConnection`. Cheap
+ * in requests, and the response grows with the total number of items in the
+ * course.
+ *
+ * **On demand** — ask for the module list alone, then fetch a module's items in a
+ * separate request when the user expands it. The first paint costs one request
+ * whatever the course size, and each module the user opens costs one more.
+ *
+ * Neither is right in general: inlining wins on a small course, on-demand wins on
+ * a large one, which is why `itemsMode: 'auto'` measures the course and picks.
+ * "Inlined" always describes *where the items came from*, never whether they were
+ * fetched at all — a module with `items: undefined` was not inlined, and a module
+ * with `items: []` was inlined and is genuinely empty.
+ *
+ * ## Why the ceiling is 100
+ *
+ * Above this many items in a single module, inlining stops being worthwhile — and
+ * on one transport it stops being possible. The two differ, and conflating them is
+ * easy:
+ *
+ * - **REST refuses outright.** `lib/api/v1/context_module.rb` omits the `items`
+ *   key entirely for any module with more than `Api::MAX_PER_PAGE` (100) items.
+ *   Server-side; a client cannot opt out.
+ * - **GraphQL has no per-module rule.** `moduleItemsConnection` is an ordinary
+ *   Relay connection, and nothing in `app/graphql/types/module_type.rb` caps it.
+ *
+ * It would be wrong to conclude GraphQL will inline anything you ask for, though.
+ * Canvas runs a query-complexity analyser, and it charges for the *shape of the
+ * request* rather than the size of the result: `first: 100, itemsFirst: 100`
+ * scores ~1.5M against a 375,000 ceiling and is rejected outright, even on a
+ * course holding thirteen items. So the ceiling is real on both transports — just
+ * enforced differently, and on different things. See `INLINE_QUERY_NODE_BUDGET`
+ * for the measurements.
+ *
+ * The GraphQL adapter therefore applies this same 100 as a deliberate *policy*,
+ * so both transports fall back to a per-module fetch at the same point and the
+ * hooks see one behaviour rather than two.
+ */
+export declare const INLINE_ITEM_LIMIT = 100;
+/**
+ * Ceiling on `pageSize × inlineItemsFirst` for a single inline request.
+ *
+ * Canvas runs a GraphQL complexity analyser and rejects anything over 375,000.
+ * Complexity is charged on the **shape of the request, not the size of the
+ * result** — so a course with 13 items is rejected just as readily as one with
+ * 13,000 if the query asks for `first: 100, itemsFirst: 100`.
+ *
+ * Measured against a real Canvas (`/api/graphql`, this document, Aug 2026):
+ *
+ *   first × itemsFirst   complexity    verdict
+ *   100 × 100            1,512,106     rejected
+ *   100 ×  50              757,106     rejected
+ *   100 ×  25              379,606     rejected, barely
+ *   100 ×  20                    —     accepted
+ *    25 × 100              378,031     rejected, barely
+ *    10 × 100                    —     accepted
+ *
+ * That is ~151 per requested item node, so the budget is the largest round
+ * product comfortably under 375,000/151 ≈ 2,483. Kept as a product rather than
+ * two separate caps because the analyser multiplies: 100×20 and 10×100 both fit,
+ * 25×100 does not.
+ *
+ * If a page genuinely needs more than this, it is not an inline page — the
+ * request is split and the items fetched on demand, which is what
+ * `resolveItemsMode` is for.
+ *
+ * This is a GraphQL fact, and it lives here rather than in the GraphQL adapter
+ * for two reasons. It is the *default* the hooks assume when an adapter declines
+ * to declare its own (`ModulesDataAdapter.inlineNodeBudget`), and importing it
+ * from `adapters/canvasGraphql` was making the transport-agnostic `hooks/` layer
+ * depend on one specific transport — which also dragged `queries.ts` and its two
+ * module-scope `gql` parses into any bundle that only wanted the in-memory
+ * adapter.
+ */
+export declare const INLINE_QUERY_NODE_BUDGET = 2000;
+//# sourceMappingURL=limits.d.ts.map

package/dist/adapters/limits.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"limits.d.ts","sourceRoot":"","sources":["../../src/adapters/limits.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+CG;AACH,eAAO,MAAM,iBAAiB,MAAM,CAAA;AAEpC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,wBAAwB,OAAO,CAAA"}

package/dist/adapters/types.d.ts

@@ -0,0 +1,87 @@
+import { ModuleItemsPage, ModulesPage } from '../types/domain';
+/**
+ * The seam between this package and a host's transport.
+ *
+ * An adapter owns exactly three things: how a request is made, what fields it
+ * asks for, and how the response becomes the domain model. It owns nothing
+ * about caching, pagination policy, or React — those live in the hooks, so
+ * that swapping GraphQL for REST changes one file and no behaviour.
+ *
+ * Contract every adapter must honour:
+ *
+ *   - **Return a real `pageInfo`.** The GraphQL adapter passes through
+ *     `endCursor`; the REST adapter derives it from the `Link` header. An
+ *     adapter that hardcodes `hasNextPage: false` silently truncates, which is
+ *     the live bug in Canvas Career's modules path today.
+ *   - **Honour `signal`.** Collapsing a module aborts its in-flight request.
+ *   - **Never invent a cursor.** Pass back what the server gave you; do not
+ *     synthesise offsets client-side.
+ *   - **Normalise fully.** Output must satisfy the Zod schemas. No transport
+ *     detail (`_id`, `quiz_lti`, snake_case) may reach a caller.
+ */
+export interface ModulesDataAdapter {
+    listModules(args: ListModulesArgs): Promise<ModulesPage>;
+    listModuleItems(args: ListModuleItemsArgs): Promise<ModuleItemsPage>;
+    /**
+     * The largest `modules × itemsPerModule` product this transport will accept in
+     * one inline request, or `undefined` for "no transport limit of my own".
+     *
+     * The transport declares its own ceiling rather than the hooks assuming one.
+     * Canvas GraphQL has a complexity analyser that rejects the *shape* of a large
+     * inline query (@see INLINE_QUERY_NODE_BUDGET); the in-memory double has no
+     * such constraint; REST will have a different one again, bounded by
+     * `Api::MAX_PER_PAGE` and response size rather than by query complexity.
+     *
+     * `resolveItemsMode` reads this to decide whether an inline page is deliverable.
+     * When it is `undefined` the hook falls back to the GraphQL budget, which is
+     * the conservative choice: guessing too low costs one extra request per opened
+     * module, guessing too high gets the whole query rejected.
+     */
+    readonly inlineNodeBudget?: number;
+}
+export interface ListModulesArgs {
+    courseId: string;
+    /** `null`/omitted requests the first page. */
+    cursor?: string | null;
+    pageSize: number;
+    /**
+     * Ask the server to inline each module's items in the same round trip.
+     *
+     * A request, not a guarantee. Canvas REST drops the `items` key for any module
+     * over `Api::MAX_PER_PAGE` (100) items; the GraphQL path has no such server
+     * rule but this package applies the same ceiling on purpose, so both transports
+     * behave alike. Either way an adapter must report an accurate `itemCount` and
+     * leave `items` **undefined** for a module it did not inline, never `[]`.
+     *
+     * @see INLINE_ITEM_LIMIT in `adapters/limits.ts` for why the number is 100 and
+     * which half of it Canvas actually enforces.
+     */
+    includeItems: boolean;
+    /**
+     * How many items to request per module when `includeItems` is true.
+     *
+     * Omit to let the adapter use its own ceiling. Supply it when the caller has
+     * *measured* what the page needs — `useModulesPageData` does, from the `auto`
+     * probe — because a transport may charge for what the query asks for rather
+     * than for what exists. @see INLINE_QUERY_NODE_BUDGET
+     */
+    inlineItemsFirst?: number;
+    /**
+     * How many modules to request when inlining.
+     *
+     * Omit to use `pageSize`. Supply it when the caller has measured that page 1 is
+     * the whole list, because the complexity budget is charged on
+     * `first x inlineItemsFirst` — asking for 100 modules when the course has 2 is
+     * what forces `inlineItemsFirst` to be clamped below what the page needs.
+     */
+    inlineFirst?: number;
+    signal?: AbortSignal;
+}
+export interface ListModuleItemsArgs {
+    courseId: string;
+    moduleId: string;
+    cursor?: string | null;
+    pageSize: number;
+    signal?: AbortSignal;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/adapters/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/adapters/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAEnE;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,WAAW,kBAAkB;IACjC,WAAW,CAAC,IAAI,EAAE,eAAe,GAAG,OAAO,CAAC,WAAW,CAAC,CAAA;IACxD,eAAe,CAAC,IAAI,EAAE,mBAAmB,GAAG,OAAO,CAAC,eAAe,CAAC,CAAA;IACpE;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAA;CACnC;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAA;IAChB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,QAAQ,EAAE,MAAM,CAAA;IAChB;;;;;;;;;;;OAWG;IACH,YAAY,EAAE,OAAO,CAAA;IACrB;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;;OAOG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,WAAW,CAAA;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,MAAM,CAAA;IAChB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,QAAQ,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,WAAW,CAAA;CACrB"}

package/dist/cache/index.d.ts

@@ -0,0 +1,3 @@
+export { moduleItemsPrefix, modulesKeys, modulesListPrefix, type ModuleItemsKey, type ModuleItemsKeyOptions, type ModulesAllKey, type ModulesCourseKey, type ModulesKeyFactory, type ModulesListKey, type ModulesListKeyOptions, type ModulesView, } from './keys';
+export { invalidateCourse, invalidateModuleItems, invalidateModuleList } from './invalidate';
+//# sourceMappingURL=index.d.ts.map

package/dist/cache/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/cache/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,iBAAiB,EACjB,WAAW,EACX,iBAAiB,EACjB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,KAAK,aAAa,EAClB,KAAK,gBAAgB,EACrB,KAAK,iBAAiB,EACtB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,KAAK,WAAW,GACjB,MAAM,QAAQ,CAAA;AACf,OAAO,EAAE,gBAAgB,EAAE,qBAAqB,EAAE,oBAAoB,EAAE,MAAM,cAAc,CAAA"}

package/dist/cache/invalidate.d.ts

@@ -0,0 +1,52 @@
+import { QueryClient } from '@tanstack/react-query';
+import { ModuleItemsKeyOptions, ModulesListKeyOptions } from './keys';
+/**
+ * Invalidation helpers.
+ *
+ * ## What is deliberately missing
+ *
+ * There is no `invalidateOnExpand` / `invalidateOnCollapse`, and there must
+ * never be one. **Expanding or collapsing a module invalidates nothing.**
+ *
+ * Expansion is UI state. It says which rows are visible; it says nothing about
+ * whether the server's copy of the data changed. Canvas's modules page ties the
+ * two together, so every collapse invalidates the module list, every
+ * invalidation re-walks every page that has been loaded, and a course with
+ * thirty modules re-fetches the world each time a teacher tidies the screen.
+ * That is the refetch loop this package exists to not have.
+ *
+ * The equivalents here:
+ *   - collapse → cancel that module's in-flight item request (an abort, not an
+ *     invalidation — see `useModulesPageData`), and leave the cached pages alone
+ *   - re-expand → a cache hit, no request
+ *
+ * Invalidate when the *data* changed: a mutation, a websocket nudge, an
+ * explicit user refresh. Not when a disclosure arrow moved.
+ */
+/**
+ * One module's items. Use after reordering, adding, or deleting items.
+ *
+ * Omit `opts` — the default — to hit every variant of that module's items, which
+ * is what a mutation wants: adding an item changes the module for the student
+ * view and the teacher view alike, at every page size any consumer rendered
+ * with. Pass `opts` only to target the exact query one hook instance holds.
+ */
+export declare function invalidateModuleItems(queryClient: QueryClient, courseId: string, moduleId: string, opts?: ModuleItemsKeyOptions): Promise<void>;
+/**
+ * The module list for a course.
+ *
+ * Omit `opts` to hit every list variant (all page sizes, both views, inline and
+ * on-demand) — which is almost always what you want, since a mutation that adds
+ * or removes a module invalidates all of them. Pass `opts` only to target the
+ * exact query a specific hook instance is rendering.
+ */
+export declare function invalidateModuleList(queryClient: QueryClient, courseId: string, opts?: ModulesListKeyOptions): Promise<void>;
+/**
+ * Everything for a course: the list and every module's items.
+ *
+ * The blunt instrument. Reasonable after a bulk operation (publish all, import
+ * a course package); wasteful after a single-item edit, which should use
+ * `invalidateModuleItems`.
+ */
+export declare function invalidateCourse(queryClient: QueryClient, courseId: string): Promise<void>;
+//# sourceMappingURL=invalidate.d.ts.map

package/dist/cache/invalidate.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"invalidate.d.ts","sourceRoot":"","sources":["../../src/cache/invalidate.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EAIL,KAAK,qBAAqB,EAC1B,KAAK,qBAAqB,EAC3B,MAAM,QAAQ,CAAA;AAEf;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH;;;;;;;GAOG;AACH,wBAAgB,qBAAqB,CACnC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,EAChB,IAAI,CAAC,EAAE,qBAAqB,GAC3B,OAAO,CAAC,IAAI,CAAC,CAKf;AAED;;;;;;;GAOG;AACH,wBAAgB,oBAAoB,CAClC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,MAAM,EAChB,IAAI,CAAC,EAAE,qBAAqB,GAC3B,OAAO,CAAC,IAAI,CAAC,CAGf;AAED;;;;;;GAMG;AACH,wBAAgB,gBAAgB,CAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAE1F"}

package/dist/cache/keys.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Query keys for the modules page.
+ *
+ * One factory, one shape, one place to look when you need to know what a given
+ * invalidation will hit. Every key is a `readonly` tuple so TanStack Query keeps
+ * the key type narrow instead of widening it to `unknown[]`, and so a typo in a
+ * literal segment is a compile error rather than a silent cache miss.
+ *
+ * The hierarchy is deliberate — each level is a prefix of the next, which is
+ * what makes `invalidateCourse` able to reach every query for a course without
+ * enumerating them:
+ *
+ *   ['platform-modules']
+ *   ['platform-modules', courseId]
+ *   ['platform-modules', courseId, 'list', opts]
+ *   ['platform-modules', courseId, 'module', moduleId, 'items', opts]
+ */
+/**
+ * Which Canvas audience the page is rendered for.
+ *
+ * It is not passed to the adapter — a host configures its adapter for the
+ * current user already — but it *is* part of every key, because a teacher sees
+ * unpublished content a student does not. Two views must never share a cache
+ * entry.
+ */
+export type ModulesView = 'student' | 'teacher';
+/**
+ * Everything that changes what a list request returns, and therefore has to
+ * partition the cache. `includeItems` is here because the inline and on-demand
+ * shapes of the same page are genuinely different payloads.
+ */
+export interface ModulesListKeyOptions {
+    view?: ModulesView;
+    pageSize?: number;
+    includeItems?: boolean;
+}
+/**
+ * The items equivalent, and it exists for the same two reasons the list one does.
+ *
+ * `view` because `published` is a per-*item* field, so the teacher/student
+ * argument above applies to items verbatim: a teacher's page of items includes
+ * unpublished rows a student's does not.
+ *
+ * `pageSize` because these are infinite queries. The cache entry is an
+ * `InfiniteData` whose `pages` were each fetched at some size; two consumers
+ * rendering the same module with different `itemPageSize` would otherwise share
+ * one entry whose pages were fetched at mixed sizes, and neither could say what
+ * `pages[n]` contains.
+ */
+export interface ModuleItemsKeyOptions {
+    view?: ModulesView;
+    pageSize?: number;
+}
+export type ModulesAllKey = readonly ['platform-modules'];
+export type ModulesCourseKey = readonly ['platform-modules', string];
+export type ModulesListKey = readonly ['platform-modules', string, 'list', ModulesListKeyOptions];
+export type ModuleItemsKey = readonly [
+    'platform-modules',
+    string,
+    'module',
+    string,
+    'items',
+    ModuleItemsKeyOptions
+];
+export interface ModulesKeyFactory {
+    readonly all: ModulesAllKey;
+    course(courseId: string): ModulesCourseKey;
+    list(courseId: string, opts?: ModulesListKeyOptions): ModulesListKey;
+    items(courseId: string, moduleId: string, opts?: ModuleItemsKeyOptions): ModuleItemsKey;
+}
+export declare const modulesKeys: ModulesKeyFactory;
+/**
+ * The prefix shared by every list key for a course, regardless of `opts`.
+ * Used to invalidate "the module list" without knowing which page size or view
+ * the caller happened to render with.
+ */
+export declare function modulesListPrefix(courseId: string): readonly ['platform-modules', string, 'list'];
+/**
+ * The prefix shared by every items key for one module, regardless of `opts`.
+ *
+ * This is the one to reach for when acting on "that module's items" without
+ * knowing which view or page size rendered them — invalidating after a mutation,
+ * or cancelling in flight requests on collapse.
+ */
+export declare function moduleItemsPrefix(courseId: string, moduleId: string): readonly ['platform-modules', string, 'module', string, 'items'];
+//# sourceMappingURL=keys.d.ts.map

package/dist/cache/keys.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"keys.d.ts","sourceRoot":"","sources":["../../src/cache/keys.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;GAgBG;AAEH;;;;;;;GAOG;AACH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,CAAA;AAE/C;;;;GAIG;AACH,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,OAAO,CAAA;CACvB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,qBAAqB;IACpC,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,MAAM,aAAa,GAAG,SAAS,CAAC,kBAAkB,CAAC,CAAA;AACzD,MAAM,MAAM,gBAAgB,GAAG,SAAS,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAA;AACpE,MAAM,MAAM,cAAc,GAAG,SAAS,CAAC,kBAAkB,EAAE,MAAM,EAAE,MAAM,EAAE,qBAAqB,CAAC,CAAA;AACjG,MAAM,MAAM,cAAc,GAAG,SAAS;IACpC,kBAAkB;IAClB,MAAM;IACN,QAAQ;IACR,MAAM;IACN,OAAO;IACP,qBAAqB;CACtB,CAAA;AAID,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,GAAG,EAAE,aAAa,CAAA;IAC3B,MAAM,CAAC,QAAQ,EAAE,MAAM,GAAG,gBAAgB,CAAA;IAC1C,IAAI,CAAC,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,qBAAqB,GAAG,cAAc,CAAA;IACpE,KAAK,CAAC,QAAQ,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,qBAAqB,GAAG,cAAc,CAAA;CACxF;AAED,eAAO,MAAM,WAAW,EAAE,iBAOzB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,CAAC,kBAAkB,EAAE,MAAM,EAAE,MAAM,CAAC,CAEjG;AAED;;;;;;GAMG;AACH,wBAAgB,iBAAiB,CAC/B,QAAQ,EAAE,MAAM,EAChB,QAAQ,EAAE,MAAM,GACf,SAAS,CAAC,kBAAkB,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAElE"}

package/dist/components/FilterChips.d.ts

@@ -0,0 +1,19 @@
+import { ReactElement } from 'react';
+import { ModulesFilterId } from './labels';
+/**
+ * The filter row.
+ *
+ * InstUI has no chip/tag component available in this repo, so these are small
+ * pill-shaped Buttons carrying `aria-pressed` — a toggle group in behaviour,
+ * radio-ish in appearance, which is what the mock draws. Selection is single,
+ * not multi: the mock shows exactly one chip active.
+ */
+export interface FilterChipsProps {
+    value: ModulesFilterId;
+    onChange: (filter: ModulesFilterId) => void;
+    /** Per-chip match counts, rendered when supplied. Cheap: module-level only. */
+    counts?: Partial<Record<ModulesFilterId, number>>;
+}
+/** @see FilterChipsProps */
+export declare function FilterChips({ value, onChange, counts }: FilterChipsProps): ReactElement;
+//# sourceMappingURL=FilterChips.d.ts.map

package/dist/components/FilterChips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChips.d.ts","sourceRoot":"","sources":["../../src/components/FilterChips.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,YAAY,EAAS,MAAM,OAAO,CAAA;AAEhD,OAAO,EAAmC,KAAK,eAAe,EAAsB,MAAM,UAAU,CAAA;AAEpG;;;;;;;GAOG;AAEH,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,eAAe,CAAA;IACtB,QAAQ,EAAE,CAAC,MAAM,EAAE,eAAe,KAAK,IAAI,CAAA;IAC3C,+EAA+E;IAC/E,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAAC,CAAA;CAClD;AAED,4BAA4B;AAC5B,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,gBAAgB,GAAG,YAAY,CAoDvF"}

package/dist/components/ModuleCard.d.ts

@@ -0,0 +1,32 @@
+import { NamedExoticComponent } from 'react';
+import { ModuleItemsState } from '../hooks';
+import { Module } from '../types';
+export interface ModuleCardProps {
+    module: Module;
+    expanded: boolean;
+    onToggle: (moduleId: string) => void;
+    /** The hook's per-module item state. Only read when `expanded`. */
+    itemsState: ModuleItemsState;
+    today: Date;
+    /** Show the `inline` vs `onDemand` provenance line. Dev affordance, off by default. */
+    showDiagnostics?: boolean;
+    /**
+     * Heading level for the module name. Defaults to `'h3'`, one below
+     * `ModulesList`'s default of `h2`.
+     *
+     * The name was bold `Text`, which meant a 120-module course offered a screen
+     * reader no heading list to navigate by — the only heading in the tree was the
+     * page title.
+     */
+    headingLevel?: 'h2' | 'h3' | 'h4';
+}
+/**
+ * Memoised, which is only useful because its props are now stable.
+ *
+ * `itemsState` comes from `useModulesPageData`'s per-module cache and `onToggle`
+ * from a ref-backed `useCallback`, so a card re-renders when *its own* module
+ * changes and not when a sibling's items arrive. Both of those had to be fixed
+ * first — a `memo` over freshly-built props is pure overhead.
+ */
+export declare const ModuleCard: NamedExoticComponent<ModuleCardProps>;
+//# sourceMappingURL=ModuleCard.d.ts.map

package/dist/components/ModuleCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleCard.d.ts","sourceRoot":"","sources":["../../src/components/ModuleCard.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAQ,KAAK,oBAAoB,EAAwC,MAAM,OAAO,CAAA;AAC7F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAChD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AA+BtC,MAAM,WAAW,eAAe;IAC9B,MAAM,EAAE,MAAM,CAAA;IACd,QAAQ,EAAE,OAAO,CAAA;IACjB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,mEAAmE;IACnE,UAAU,EAAE,gBAAgB,CAAA;IAC5B,KAAK,EAAE,IAAI,CAAA;IACX,uFAAuF;IACvF,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAClC;AAgVD;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,EAAE,oBAAoB,CAAC,eAAe,CAAwB,CAAA"}

package/dist/components/ModuleItemRow.d.ts

@@ -0,0 +1,17 @@
+import { NamedExoticComponent } from 'react';
+import { ModuleItem } from '../types';
+export interface ModuleItemRowProps {
+    item: ModuleItem;
+    /** Injected so relative dates ("yesterday") are deterministic. */
+    today: Date;
+}
+/**
+ * Memoised because it is the hottest component in the package.
+ *
+ * `item` is a stable reference out of the query cache and `today` is pinned per
+ * mount, so the default shallow comparison is enough. It is what stops one
+ * module's observer publishing from re-rendering every other module's rows —
+ * ~3000 of them on a 30-module course with everything expanded.
+ */
+export declare const ModuleItemRow: NamedExoticComponent<ModuleItemRowProps>;
+//# sourceMappingURL=ModuleItemRow.d.ts.map

package/dist/components/ModuleItemRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModuleItemRow.d.ts","sourceRoot":"","sources":["../../src/components/ModuleItemRow.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAQ,KAAK,oBAAoB,EAAqB,MAAM,OAAO,CAAA;AAC1E,OAAO,EAA+B,KAAK,UAAU,EAAuB,MAAM,UAAU,CAAA;AA6D5F,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,UAAU,CAAA;IAChB,kEAAkE;IAClE,KAAK,EAAE,IAAI,CAAA;CACZ;AA0GD;;;;;;;GAOG;AACH,eAAO,MAAM,aAAa,EAAE,oBAAoB,CAAC,kBAAkB,CAA2B,CAAA"}

package/dist/components/ModulesList.d.ts

@@ -0,0 +1,69 @@
+import { ReactElement } from 'react';
+import { UseModulesPageDataResult } from '../hooks';
+import { ModulesFilterId } from './labels';
+/**
+ * The student modules page, approximating the Modules Foundation design.
+ *
+ * What it is: course header, a module-name search, an expand/collapse menu, the
+ * module-level filter row, and a stack of module cards.
+ *
+ * What it deliberately is not:
+ *
+ *   - **No progress strip.** The `01 02 03 …` paginated bar under the filters in
+ *     the mock is out of scope; the user deferred it.
+ *   - **No item-level search.** See `moduleMatchesSearch`: in `onDemand` mode the
+ *     items of collapsed modules are not loaded, so searching them would silently
+ *     under-report. The input filters module *names* and says so on its label.
+ * Everything renderable comes from `useModulesPageData`; this component owns
+ * only view state (search text, active filter), never data. Expanding a module
+ * still invalidates nothing.
+ */
+/** Requests served by the adapter so far, split by operation. */
+export interface ModulesRequestCounts {
+    listModules: number;
+    listModuleItems: number;
+}
+export interface ModulesListProps {
+    /** The whole result of `useModulesPageData`, passed straight through. */
+    data: UseModulesPageDataResult;
+    /** Course title in the header. */
+    courseName?: string;
+    /** The crumb above the title, e.g. "Math". Purely decorative. */
+    courseContext?: string;
+    /**
+     * "Now", injected so relative dates and the "Due this week" filter are
+     * deterministic in stories and tests. The fixtures use a fixed 2025-01-06
+     * epoch, so a story that wants sensible dates should pin this.
+     */
+    today?: Date;
+    /**
+     * Live counts from `createInMemoryAdapter`'s `onRequest`. When supplied, a
+     * dev banner renders them. It is the most useful thing on screen for
+     * reviewing this MVP — "does this scale" as a number rather than a devtools
+     * exercise — and a host with a real adapter simply omits the prop.
+     */
+    requestCounts?: ModulesRequestCounts;
+    /** Also show items-mode and per-module item provenance. Defaults to `requestCounts !== undefined`. */
+    showDiagnostics?: boolean;
+    /** Which chip starts active. Uncontrolled after mount — the chips own it. */
+    initialFilter?: ModulesFilterId;
+    /**
+     * Element for the outer container. Defaults to `'div'`.
+     *
+     * Deliberately not `'main'` by default: Canvas's own layout already ships
+     * `role="main"` (`application.html.erb:267`), so a Canvas host rendering this
+     * would get two main landmarks. A host that owns its whole page can opt in with
+     * `as="main"`.
+     */
+    as?: 'div' | 'main' | 'section';
+    /**
+     * Heading level for the course title. Defaults to `'h2'`.
+     *
+     * Also not `h1` by default, and for the same reason: a host page usually already
+     * has one. `ModuleCard` renders one level below this.
+     */
+    headingLevel?: 'h1' | 'h2' | 'h3';
+}
+/** @see ModulesListProps */
+export declare function ModulesList({ data, courseName, courseContext, today, requestCounts, showDiagnostics, initialFilter, as, headingLevel, }: ModulesListProps): ReactElement;
+//# sourceMappingURL=ModulesList.d.ts.map

package/dist/components/ModulesList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModulesList.d.ts","sourceRoot":"","sources":["../../src/components/ModulesList.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,KAAK,YAAY,EAA+C,MAAM,OAAO,CAAA;AACtF,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,UAAU,CAAA;AAIxD,OAAO,EAGL,KAAK,eAAe,EAErB,MAAM,UAAU,CAAA;AAGjB;;;;;;;;;;;;;;;;GAgBG;AAEH,iEAAiE;AACjE,MAAM,WAAW,oBAAoB;IACnC,WAAW,EAAE,MAAM,CAAA;IACnB,eAAe,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,gBAAgB;IAC/B,yEAAyE;IACzE,IAAI,EAAE,wBAAwB,CAAA;IAC9B,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,iEAAiE;IACjE,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB;;;;OAIG;IACH,KAAK,CAAC,EAAE,IAAI,CAAA;IACZ;;;;;OAKG;IACH,aAAa,CAAC,EAAE,oBAAoB,CAAA;IACpC,sGAAsG;IACtG,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,6EAA6E;IAC7E,aAAa,CAAC,EAAE,eAAe,CAAA;IAC/B;;;;;;;OAOG;IACH,EAAE,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/B;;;;;OAKG;IACH,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;CAClC;AA0DD,4BAA4B;AAC5B,wBAAgB,WAAW,CAAC,EAC1B,IAAI,EACJ,UAAU,EACV,aAAa,EACb,KAAK,EACL,aAAa,EACb,eAA6C,EAC7C,aAAqB,EACrB,EAAU,EACV,YAAmB,GACpB,EAAE,gBAAgB,GAAG,YAAY,CAqSjC"}

package/dist/components/ModulesList.stories.d.ts

@@ -0,0 +1,138 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ReactElement } from 'react';
+import { InMemoryFixture, ItemsMode } from '../index';
+import { ModulesFilterId } from './labels';
+/**
+ * The Modules Foundation design over the real data layer.
+ *
+ * Harness: `createInMemoryAdapter` over a fixture, a
+ * `QueryClient` whose identity survives a re-render, and the adapter's
+ * `onRequest` feeding a live counter. Nothing is mocked — the adapter is a real
+ * implementation of the contract, including declining to inline a module above
+ * `INLINE_ITEM_LIMIT` as Canvas REST does — so the request count in the dev
+ * banner is the genuine cost of what is on screen.
+ *
+ * The counter is the most useful thing here. Switch `itemsMode` to `onDemand`,
+ * hit "Expand all" on the large course, and watch what the design costs.
+ */
+declare const FIXTURES: Record<string, () => InMemoryFixture>;
+/**
+ * The four scales, as either audience.
+ *
+ * The teacher shape comes from `buildFixture`'s own `view` option rather than
+ * being derived here by stripping fields. That matters for what the story shows:
+ * a teacher sees unpublished modules and items — which is the whole reason the
+ * teacher view exists — and no progress, because Canvas resolves `progression`
+ * to null for a viewer with no progression record. Deriving it by deletion used
+ * to produce the one combination Canvas cannot: an unpublished module with a
+ * progress bar beside it.
+ */
+type ProgressMode = 'student' | 'teacher';
+interface ModulesListStoryProps {
+    fixture: keyof typeof FIXTURES;
+    itemsMode: ItemsMode;
+    progressMode: ProgressMode;
+    initialFilter: ModulesFilterId;
+    /** Modules per `listModules` request. Canvas caps this at 100. */
+    pageSize: number;
+    /** Items per `listModuleItems` request. Canvas caps this at 100. */
+    itemPageSize: number;
+    itemConcurrency: number;
+    /** Expand these module ids on mount, so a story shows item rows without a click. */
+    initialExpandedModuleIds: string[];
+    /**
+     * Which i18n bridge to render through.
+     *
+     * `none` is a host that has not wired i18n: the package interpolates the
+     * English source keys itself. `pseudo` is the standard pre-translation audit —
+     * every string is bracketed and padded, so an untranslated literal is visible
+     * on sight and a layout that cannot survive a longer language shows up before
+     * a translator is ever involved.
+     */
+    i18n: 'none' | 'pseudo';
+}
+/**
+ * Its own `QueryClient`, deliberately — the global preview decorator builds one
+ * in its render body, and these stories are about cache behaviour.
+ */
+declare function ModulesListHarness(props: ModulesListStoryProps): ReactElement;
+declare const meta: Meta<typeof ModulesListHarness>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+/**
+ * The design, near enough: 5 modules × 8 items with module 1 open.
+ *
+ * `auto` resolves to `inline`, so opening any other module costs zero extra
+ * requests — the counter in the dev banner stays put as you click around.
+ */
+export declare const Default: Story;
+/**
+ * 120 modules × 25 items. `auto` resolves to `onDemand` and first paint is a
+ * single request no matter how big the course is.
+ *
+ * The point of this story is the button at the bottom: `hasNextPage` is true,
+ * it says so, and the remaining 20 modules are one click away rather than gone.
+ * Canvas Career shows 100 and says nothing.
+ */
+export declare const LargeCourse: Story;
+/**
+ * 3 modules, the middle one 250 items, pinned to `inline` — the Canvas fallback
+ * in miniature. Modules 1 and 3 come back with items attached; module 2 is over
+ * `INLINE_ITEM_LIMIT` so the server omits its items and that *one module* falls
+ * back to a per-module fetch, then pages 100 at a time. "Load more items" stays
+ * on the card until all 250 are loaded.
+ */
+export declare const FatModuleInlineFallback: Story;
+/** No modules. The empty state. */
+export declare const EmptyCourse: Story;
+/**
+ * Teacher / anonymous: `progress` is undefined on every module and `status` on
+ * every item.
+ *
+ * The card renders no progress bar and no status pill, and nowhere does it say
+ * "0%" — "we did not fetch progress" and "the student has done none of it" are
+ * different facts. Every filter chip except "All" correctly matches nothing,
+ * because a module-level filter has nothing to read.
+ */
+export declare const TeacherViewNoProgress: Story;
+/** `progress.status === 'in_progress'`. */
+export declare const FilterInProgress: Story;
+/** `progress.status` is `all_submitted` or `all_graded`. */
+export declare const FilterComplete: Story;
+/**
+ * `progress.latestDueAt` within 7 days of the injected "today" (2025-01-08).
+ *
+ * On the small fixture rather than the large one, deliberately: `latestDueAt` is
+ * the *latest* due date in a module, and a 25-item module's latest date is
+ * always months out, so the large course legitimately has nothing in a 7-day
+ * window. A story that only ever showed the empty state would prove nothing
+ * about the chip.
+ */
+export declare const FilterDueThisWeek: Story;
+/** `progress.missingCount > 0`. */
+export declare const FilterMissing: Story;
+/**
+ * Every module status and every item status on one screen.
+ *
+ * `courseSmall` is sized to `MODULE_STATUS_CYCLE.length` precisely so it can
+ * show all six `ModuleStatus` values; expanding every module then shows every
+ * `ModuleItemStatus` too, so a reviewer can check the whole pill mapping in one
+ * screenshot. Note the mock's single green "All items complete" pill is split
+ * here into "All items complete" (`all_submitted`) and "All items graded"
+ * (`all_graded`), because the domain distinguishes them and the view should not
+ * quietly collapse the two.
+ */
+export declare const StatusCoverage: Story;
+/**
+ * Every user-visible string, bracketed and padded.
+ *
+ * This is the story that makes the i18n seam reviewable rather than asserted: a
+ * string rendering *without* `⟦ ⟧` never went through `t`. Padding to ~135%
+ * approximates German, so it also shows whether the card header, the chip row
+ * and the "Load more" button survive a longer language.
+ *
+ * The one deliberate exception is the dev diagnostics banner, which is developer
+ * text and is documented as untranslated in `ModuleCard`.
+ */
+export declare const PseudoLocalised: Story;
+//# sourceMappingURL=ModulesList.stories.d.ts.map

package/dist/components/ModulesList.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModulesList.stories.d.ts","sourceRoot":"","sources":["../../src/components/ModulesList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEtD,OAAO,EAAE,KAAK,YAAY,EAAqB,MAAM,OAAO,CAAA;AAC5D,OAAO,EAQL,KAAK,eAAe,EACpB,KAAK,SAAS,EAGf,MAAM,UAAU,CAAA;AACjB,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,UAAU,CAAA;AAG/C;;;;;;;;;;;;GAYG;AAEH,QAAA,MAAM,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,eAAe,CAKnD,CAAA;AAmBD;;;;;;;;;;GAUG;AAIH,KAAK,YAAY,GAAG,SAAS,GAAG,SAAS,CAAA;AAEzC,UAAU,qBAAqB;IAC7B,OAAO,EAAE,MAAM,OAAO,QAAQ,CAAA;IAC9B,SAAS,EAAE,SAAS,CAAA;IACpB,YAAY,EAAE,YAAY,CAAA;IAC1B,aAAa,EAAE,eAAe,CAAA;IAC9B,kEAAkE;IAClE,QAAQ,EAAE,MAAM,CAAA;IAChB,oEAAoE;IACpE,YAAY,EAAE,MAAM,CAAA;IACpB,eAAe,EAAE,MAAM,CAAA;IACvB,oFAAoF;IACpF,wBAAwB,EAAE,MAAM,EAAE,CAAA;IAClC;;;;;;;;OAQG;IACH,IAAI,EAAE,MAAM,GAAG,QAAQ,CAAA;CACxB;AAqED;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,KAAK,EAAE,qBAAqB,GAAG,YAAY,CAetE;AAgBD,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAkB,CA6BzC,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC;;;;;GAKG;AACH,eAAO,MAAM,OAAO,EAAE,KAErB,CAAA;AAED;;;;;;;GAOG;AACH,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,uBAAuB,EAAE,KAErC,CAAA;AAED,mCAAmC;AACnC,eAAO,MAAM,WAAW,EAAE,KAEzB,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,qBAAqB,EAAE,KAEnC,CAAA;AASD,2CAA2C;AAC3C,eAAO,MAAM,gBAAgB,EAAE,KAE9B,CAAA;AAED,4DAA4D;AAC5D,eAAO,MAAM,cAAc,EAAE,KAE5B,CAAA;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAE/B,CAAA;AAED,mCAAmC;AACnC,eAAO,MAAM,aAAa,EAAE,KAE3B,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAA;AAED;;;;;;;;;;GAUG;AACH,eAAO,MAAM,eAAe,EAAE,KAO7B,CAAA"}