@ivanbard/dd2l 0.1.0 → 0.1.1

package/ui/canvas-contract.js

@@ -0,0 +1,41 @@
+export const canvasSchema = {
+  type: 'object', additionalProperties: false,
+  properties: {
+    title: { type: 'string', maxLength: 160 },
+    answer: { type: 'string', maxLength: 6000 },
+    html: { type: 'string', maxLength: 60_000 },
+    css: { type: 'string', maxLength: 20_000 },
+    js: { type: 'string', maxLength: 60_000 },
+  },
+  required: ['title', 'answer', 'html', 'css', 'js'],
+};
+
+export function validCanvas(value) {
+  const fields = { title: 160, answer: 6000, html: 60_000, css: 20_000, js: 60_000 };
+  return !!value && typeof value === 'object' && !Array.isArray(value) &&
+    Object.keys(value).length === 5 && Object.entries(fields).every(([key, size]) =>
+      typeof value[key] === 'string' && value[key].length <= size) && !!value.title.trim() && !!value.html.trim();
+}
+
+export function validCanvasState(value) {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return false;
+  const queue = [[value, 0]];
+  let nodes = 0;
+  while (queue.length) {
+    const [item, depth] = queue.pop();
+    if (++nodes > 4000 || depth > 12) return false;
+    if (item === null || typeof item === 'boolean' || typeof item === 'string') continue;
+    if (typeof item === 'number') { if (!Number.isFinite(item)) return false; continue; }
+    if (typeof item !== 'object') return false;
+    if (Object.keys(item).some(key => ['__proto__', 'constructor', 'prototype'].includes(key))) return false;
+    for (const child of Object.values(item)) queue.push([child, depth + 1]);
+  }
+  try { return JSON.stringify(value).length <= 32_000; } catch { return false; }
+}
+
+export function validCanvasContext(value) {
+  return value === null || (!!value && typeof value === 'object' && !Array.isArray(value) &&
+    Object.keys(value).every(key => ['program', 'state', 'error'].includes(key)) &&
+    (value.error === undefined || (typeof value.error === 'string' && value.error.length <= 600)) &&
+    validCanvas(value.program) && validCanvasState(value.state));
+}

package/ui/canvas-runtime.js

@@ -0,0 +1,158 @@
+// This function is embedded by the server in a dedicated opaque-origin frame.
+export function canvasRuntime(validState) {
+  'use strict';
+  function workerRuntime() {
+    let run, state, sources, initial;
+    self.onmessage = ({ data }) => {
+      try {
+        if (data.type === 'init') {
+          state = data.state;
+          sources = data.sources;
+          initial = data.html;
+          run = new Function('state', 'event', 'sources', `"use strict";\n${data.js}`);
+        }
+        const event = data.event || { type: 'init', action: '', target: {}, values: {} };
+        const inputs = { ...state.inputs, ...(event.type === 'init' ? {} : event.values) };
+        state.inputs = inputs;
+        const result = run(state, event, sources) || {};
+        state = result.state || state;
+        state.inputs = { ...inputs, ...state.inputs };
+        initial = result.html ?? initial;
+        self.postMessage({ type: 'render', html: initial, state });
+      } catch (error) { self.postMessage({ type: 'error', message: String(error.message).slice(0, 500) }); }
+    };
+  }
+
+  const root = document.getElementById('canvas');
+  const style = document.getElementById('generated-style');
+  const tags = new Set('a article aside b blockquote br button caption circle code col colgroup dd defs details div dl dt ellipse em fieldset figcaption figure footer form g h1 h2 h3 h4 h5 h6 header hr i input label legend li line lineargradient main marker nav ol optgroup option p path polygon polyline pre progress rect section select small span stop strong sub summary sup svg table tbody td text textarea th thead time tr tspan ul'.split(' '));
+  const attributes = new Set('id class title role style name type value checked selected disabled readonly required min max step minlength maxlength placeholder rows cols multiple for open colspan rowspan scope datetime tabindex viewbox d x y x1 x2 y1 y2 cx cy r rx ry width height points fill stroke stroke-width stroke-linecap stroke-linejoin transform opacity offset stop-color marker-end preserveaspectratio'.split(' '));
+  let port, worker, timer, pending = 0, state = {}, snapshotRequests = [], active = false, rendered = false, currentHtml = '';
+  const send = data => port?.postMessage(data);
+
+  function sanitize(html) {
+    const template = document.createElement('template');
+    template.innerHTML = html;
+    const visit = parent => {
+      for (const node of [...parent.children]) {
+        if (!tags.has(node.localName.toLowerCase()) || !['http://www.w3.org/1999/xhtml', 'http://www.w3.org/2000/svg'].includes(node.namespaceURI)) { node.remove(); continue; }
+        for (const attribute of [...node.attributes]) {
+          const name = attribute.name.toLowerCase();
+          if (!attributes.has(name) && !name.startsWith('aria-') && !['data-action', 'data-source'].includes(name)) node.removeAttribute(attribute.name);
+        }
+        if (node.localName === 'input' && !['text', 'number', 'range', 'checkbox', 'radio', 'search', 'email', 'time', 'date', 'color', 'button', 'submit'].includes(node.type)) node.type = 'text';
+        if (['input', 'textarea', 'select', 'form'].includes(node.localName)) node.setAttribute('autocomplete', 'off');
+        if (node.localName === 'textarea' || (node.localName === 'input' && ['text', 'search', 'email'].includes(node.type))) {
+          node.maxLength = node.maxLength > 0 ? Math.min(4000, node.maxLength) : 4000;
+        }
+        visit(node);
+      }
+    };
+    visit(template.content);
+    return template.content;
+  }
+
+  function controls() {
+    const values = {};
+    for (const field of root.querySelectorAll('input,textarea,select')) {
+      const key = field.name || field.id;
+      if (!key || ['__proto__', 'constructor', 'prototype'].includes(key)) continue;
+      if (field.type === 'radio' && !field.checked && values[key]?.checked) continue;
+      values[key] = { value: field.value.slice(0, 4000), checked: !!field.checked };
+      if (field.localName === 'select' && field.multiple) values[key].values = [...field.selectedOptions].map(option => option.value);
+    }
+    return values;
+  }
+
+  function restore() {
+    for (const field of root.querySelectorAll('input,textarea,select')) {
+      const saved = state.inputs?.[field.name || field.id];
+      if (!saved) continue;
+      if (field.type === 'radio') { field.checked = !!saved.checked && field.value === saved.value; continue; }
+      if (field.localName === 'select' && field.multiple && Array.isArray(saved.values)) {
+        for (const option of field.options) option.selected = saved.values.includes(option.value);
+        continue;
+      }
+      field.value = saved.value;
+      if (['checkbox', 'radio'].includes(field.type)) field.checked = saved.checked;
+    }
+  }
+
+  function snapshots() {
+    if (!pending) for (const id of snapshotRequests.splice(0)) send({ type: 'snapshot', id, state });
+  }
+
+  function stop(message) {
+    worker?.terminate();
+    worker = null;
+    clearTimeout(timer);
+    pending = 0;
+    if (!rendered) root.textContent = 'The workspace could not run. Open Sources or describe what to fix.';
+    send({ type: 'error', message });
+    snapshots();
+  }
+
+  function dispatch(data) {
+    if (!worker) return;
+    if (++pending > 100) { stop('Too many workspace updates. Restart the workspace to continue.'); return; }
+    if (!timer) timer = setTimeout(() => stop('The generated workspace took too long to respond. Your last saved progress is retained.'), 2000);
+    worker.postMessage(data);
+  }
+
+  addEventListener('message', event => {
+    if (active || event.source !== parent || !event.ports[0] || event.data?.type !== 'canvas-init') return;
+    active = true;
+    port = event.ports[0];
+    state = validState(event.data.state) ? event.data.state : {};
+    style.textContent = event.data.program.css;
+    root.textContent = 'Opening workspace…';
+    port.onmessage = ({ data }) => {
+      if (data.type === 'snapshot') { snapshotRequests.push(data.id); snapshots(); }
+    };
+    const url = URL.createObjectURL(new Blob([`(${workerRuntime.toString()})()`], { type: 'text/javascript' }));
+    worker = new Worker(url);
+    URL.revokeObjectURL(url);
+    worker.onmessage = ({ data }) => {
+      if (data.type === 'error') { stop(`Workspace error: ${data.message}`); return; }
+      if (data.type !== 'render' || typeof data.html !== 'string' || data.html.length > 120_000 || !validState(data.state)) {
+        stop('The workspace returned an invalid update. Your last saved progress is retained.'); return;
+      }
+      const focused = document.activeElement;
+      const focusKey = focused?.name || focused?.id;
+      const selection = [focused?.selectionStart, focused?.selectionEnd];
+      state = data.state;
+      pending = Math.max(0, pending - 1);
+      // Older worker results must not replace controls while newer input is queued.
+      if (!pending) {
+        if (data.html !== currentHtml) { root.replaceChildren(sanitize(data.html)); currentHtml = data.html; }
+        if (!rendered) requestAnimationFrame(() => requestAnimationFrame(() => send({ type: 'ready' })));
+        rendered = true;
+        restore();
+      }
+      if (!pending && focusKey) {
+        const field = [...root.querySelectorAll('input,textarea,select,button')].find(item => (item.name || item.id) === focusKey);
+        field?.focus({ preventScroll: true });
+        try { if (selection[0] != null) field?.setSelectionRange(...selection); } catch {}
+      }
+      clearTimeout(timer); timer = null;
+      if (pending) timer = setTimeout(() => stop('The workspace stopped responding. Your last saved progress is retained.'), 2000);
+      send({ type: 'state', state });
+      snapshots();
+    };
+    worker.onerror = () => stop('The generated workspace could not run. Your sources remain available.');
+    dispatch({ type: 'init', ...event.data.program, state, sources: event.data.sources });
+    new ResizeObserver(() => send({ type: 'height', height: Math.min(1600, Math.max(360, document.documentElement.scrollHeight)) })).observe(root);
+  });
+
+  for (const type of ['click', 'input', 'change', 'submit']) root.addEventListener(type, event => {
+    if (type === 'submit') event.preventDefault();
+    if (!event.isTrusted && !['input', 'change'].includes(type)) return;
+    const source = event.target.closest('[data-source]');
+    if (type === 'click' && source) { event.preventDefault(); send({ type: 'source', id: source.dataset.source }); return; }
+    const target = event.target;
+    const action = target.closest('[data-action]')?.dataset.action || '';
+    if (type === 'click' && !action) return;
+    dispatch({ type: 'event', event: { type, action: action.slice(0, 160),
+      target: { id: target.id, name: target.name || '', value: String(target.value || '').slice(0, 4000), checked: !!target.checked }, values: controls() } });
+  });
+}

package/ui/canvas.js

@@ -0,0 +1,96 @@
+import { validCanvas, validCanvasState } from './canvas-contract.js';
+
+export function createCanvas(target, report) {
+  let program, state = {}, frame, port, requestId = 0, generation = 0, lastError = '';
+  const snapshots = new Map();
+  const inspector = document.getElementById('canvas-source');
+  let sourceRequest;
+
+  function clear() {
+    generation++;
+    sourceRequest?.abort();
+    port?.close(); port = null;
+    for (const { reject, timer } of snapshots.values()) { clearTimeout(timer); reject(new Error('Workspace changed. Please send your request again.')); }
+    snapshots.clear();
+    frame?.remove(); frame = null;
+    target.hidden = true;
+    inspector.hidden = true;
+    inspector.replaceChildren();
+    program = undefined; state = {}; lastError = '';
+  }
+
+  async function inspect(id, sources, current) {
+    if (!sources.some(source => source.id === id)) return;
+    sourceRequest?.abort();
+    const controller = sourceRequest = new AbortController();
+    try {
+      const response = await fetch(`/api/source?${new URLSearchParams({ id })}`, { signal: controller.signal });
+      const source = await response.json();
+      if (!response.ok) throw new Error(source.error || 'This source is no longer available.');
+      if (generation !== current || sourceRequest !== controller) return;
+      const title = document.createElement('h3'); title.textContent = source.title; title.tabIndex = -1;
+      const status = document.createElement('p'); status.className = 'source-meta';
+      status.textContent = `${source.courseName} · ${source.stale ? 'Stale cache' : 'Cached'} · ${source.lastSuccess || 'Retrieval date unknown'}`;
+      const text = document.createElement('p'); text.className = 'assignment-text'; text.textContent = source.text;
+      const link = document.createElement('a'); link.textContent = 'Open in Brightspace ↗';
+      link.href = source.url; link.target = '_blank'; link.rel = 'noopener noreferrer';
+      inspector.replaceChildren(title, status, text, link); inspector.hidden = false; title.focus();
+    } catch (error) { if (error.name !== 'AbortError' && generation === current) report(error.message); }
+  }
+
+  function render(next, sources, savedState = state) {
+    if (!validCanvas(next) || !validCanvasState(savedState)) throw new Error('The generated workspace could not be verified.');
+    clear();
+    program = next; state = savedState;
+    const current = generation;
+    frame = document.createElement('iframe');
+    frame.title = next.title;
+    frame.className = 'generated-canvas';
+    frame.dataset.ready = 'false';
+    frame.inert = true;
+    frame.setAttribute('sandbox', 'allow-scripts');
+    frame.setAttribute('referrerpolicy', 'no-referrer');
+    frame.setAttribute('allow', "camera 'none'; microphone 'none'; geolocation 'none'; clipboard-read 'none'; clipboard-write 'none'");
+    frame.addEventListener('load', () => {
+      const channel = new MessageChannel();
+      port = channel.port1;
+      port.onmessage = ({ data }) => {
+        if (generation !== current || !data || typeof data !== 'object') return;
+        if (['state', 'snapshot'].includes(data.type) && validCanvasState(data.state)) {
+          state = data.state;
+          if (data.type === 'snapshot' && snapshots.has(data.id)) {
+            const pending = snapshots.get(data.id); snapshots.delete(data.id); clearTimeout(pending.timer);
+            pending.resolve({ program, state: structuredClone(state), error: lastError });
+          }
+        } else if (data.type === 'ready') {
+          frame.inert = false;
+          frame.focus({ preventScroll: true });
+          frame.dataset.ready = 'true';
+        }
+        else if (data.type === 'height' && Number.isFinite(data.height)) frame.style.height = `${Math.min(1600, Math.max(360, data.height))}px`;
+        else if (data.type === 'error' && typeof data.message === 'string') {
+          frame.inert = true;
+          lastError = data.message.slice(0, 600); report(lastError);
+        }
+        else if (data.type === 'source' && typeof data.id === 'string') inspect(data.id, sources, current);
+      };
+      frame.contentWindow.postMessage({ type: 'canvas-init', program,
+        state, sources: sources.map(({ id, title, courseName, category, excerpt, dueDate, stale }) => ({ id, title, courseName, category, text: excerpt, dueDate, stale })) }, '*', [channel.port2]);
+    }, { once: true });
+    frame.src = '/canvas-frame';
+    target.replaceChildren(frame); target.hidden = false;
+  }
+
+  function snapshot() {
+    if (!program) return Promise.resolve(null);
+    if (!port) return Promise.reject(new Error('The workspace is still loading. Please try again.'));
+    const id = ++requestId;
+    return new Promise((resolve, reject) => {
+      const timer = setTimeout(() => { snapshots.delete(id); reject(new Error('The workspace is still updating. Please try again.')); }, 3000);
+      snapshots.set(id, { resolve, reject, timer });
+      port.postMessage({ type: 'snapshot', id });
+    });
+  }
+
+  return { render, clear, snapshot };
+}

package/ui/index.html

@@ -26,11 +26,11 @@
   <span id="demo-badge" class="demo-badge" hidden>Demo · sample coursework</span>
   <main id="workspace" class="workspace">
     <section class="home" aria-labelledby="heading">
-      <h1 id="heading">What are we looking for today?</h1>
+      <h1 id="heading">What do you want to work on?</h1>
       <form id="search-form" class="composer" role="search">
         <div class="prompt-field">
           <label class="sr-only" for="prompt">Search your cached coursework</label>
-          <input id="prompt" name="q" type="search" maxlength="500" autocomplete="off" aria-describedby="search-help">
+          <input id="prompt" name="q" type="search" maxlength="500" autocomplete="off" placeholder="Describe your task or goal…" aria-describedby="search-help">
           <button id="send" type="submit" disabled aria-label="Search"><img src="/assets/send.svg" alt="" width="32" height="32"><span id="busy" hidden></span></button>
         </div>
         <div class="composer-footer">
@@ -41,9 +41,10 @@
           <select id="model" name="model" aria-describedby="search-help"><option value="">Local search</option></select>
           <span id="model-loading" class="loading-slot"></span>
         </div>
-        <span id="search-help" class="sr-only">Find source excerpts by keyword, or connect ChatGPT in Settings to ask a question.</span>
+        <span id="search-help" class="sr-only">Select a ChatGPT model for an adaptive workspace around any coursework goal. Local search uses keywords and assignment matching.</span>
       </form>
-      <p id="model-sharing" class="model-sharing" hidden>Sending with this model shares your question and matching coursework with OpenAI.</p>
+      <p id="model-sharing" class="model-sharing" hidden>Adaptive workspace · The model can request read-only Brightspace discovery. Sending shares your goal, workspace progress, course previews and retrieved excerpts with OpenAI.</p>
+      <p id="adaptive-help" class="model-sharing">For adaptive workspaces, connect ChatGPT in Settings and select a model. Local search uses keyword matching.</p>
       <p id="notice" class="notice" role="status" hidden></p>
     </section>
     <section id="home-widgets" class="home-widgets" aria-labelledby="widgets-heading">
@@ -54,11 +55,21 @@
       <div id="widget-grid" class="widget-grid"></div>
       <p id="widget-status" class="widget-status" role="status"></p>
     </section>
+    <section id="canvas-workspace" class="results canvas-workspace" aria-labelledby="canvas-title" hidden>
+      <header class="canvas-heading"><h2 id="canvas-title" tabindex="-1">Your workspace</h2><div class="widget-actions">
+        <button id="canvas-sources" type="button" aria-expanded="false" aria-controls="assignment-workspace">Sources</button>
+        <button id="canvas-restart" type="button">Restart progress</button>
+      </div></header>
+      <p class="retrieval-note">AI-generated workspace · Verify requirements against the linked coursework. Progress is kept for this visit.</p>
+      <div id="canvas-host" hidden></div>
+      <aside id="canvas-source" class="canvas-source" aria-label="Verified coursework source" hidden></aside>
+    </section>
     <section id="ai-answer" class="results" aria-label="AI answer" hidden>
       <h2 id="ai-answer-title" tabindex="-1">Your answer</h2><p id="answer-text"></p>
       <div id="answer-view" class="answer-view" hidden></div>
       <h3 class="answer-sources-heading">Sources</h3><div id="answer-sources"></div>
     </section>
+    <section id="assignment-workspace" class="results assignment-workspace" aria-labelledby="assignment-heading" hidden></section>
     <section id="results" class="results" aria-label="Coursework results" hidden>
       <div class="results-heading"><h2 id="results-title" tabindex="-1">Sources</h2><span id="result-count"></span></div>
       <p class="retrieval-note">Matching excerpts from your local inventory. These are source materials, not an AI-generated answer.</p>

package/ui/loading.js

@@ -1,33 +1,33 @@
-// Square 12 / Origin Wave, adapted for dd2l from zzzzshawn/matrix. See THIRD_PARTY_NOTICES.md.
-const active = new WeakMap();
-
-export function startLoading(target, label = 'Loading') {
-  let state = active.get(target);
-  if (!state) {
-    const loader = document.createElement('span');
-    loader.className = 'dot-loader';
-    loader.setAttribute('role', 'status');
-    loader.setAttribute('aria-label', label);
-    for (let row = 0; row < 5; row++) for (let col = 0; col < 5; col++) {
-      const dot = document.createElement('span');
-      dot.setAttribute('aria-hidden', 'true');
-      dot.style.setProperty('--ring', Math.abs(row - 1) + Math.abs(col - 1));
-      loader.append(dot);
-    }
-    state = { loader, count: 0, previousBusy: target.getAttribute('aria-busy') };
-    active.set(target, state);
-    target.append(loader);
-    target.setAttribute('aria-busy', 'true');
-  }
-  state.count++;
-  let finished = false;
-  return () => {
-    if (finished) return;
-    finished = true;
-    if (--state.count) return;
-    state.loader.remove();
-    if (state.previousBusy === null) target.removeAttribute('aria-busy');
-    else target.setAttribute('aria-busy', state.previousBusy);
-    active.delete(target);
-  };
-}
+// Square 12 / Origin Wave, adapted for dd2l from zzzzshawn/matrix. See THIRD_PARTY_NOTICES.md.
+const active = new WeakMap();
+
+export function startLoading(target, label = 'Loading') {
+  let state = active.get(target);
+  if (!state) {
+    const loader = document.createElement('span');
+    loader.className = 'dot-loader';
+    loader.setAttribute('role', 'status');
+    loader.setAttribute('aria-label', label);
+    for (let row = 0; row < 5; row++) for (let col = 0; col < 5; col++) {
+      const dot = document.createElement('span');
+      dot.setAttribute('aria-hidden', 'true');
+      dot.style.setProperty('--ring', Math.abs(row - 1) + Math.abs(col - 1));
+      loader.append(dot);
+    }
+    state = { loader, count: 0, previousBusy: target.getAttribute('aria-busy') };
+    active.set(target, state);
+    target.append(loader);
+    target.setAttribute('aria-busy', 'true');
+  }
+  state.count++;
+  let finished = false;
+  return () => {
+    if (finished) return;
+    finished = true;
+    if (--state.count) return;
+    state.loader.remove();
+    if (state.previousBusy === null) target.removeAttribute('aria-busy');
+    else target.setAttribute('aria-busy', state.previousBusy);
+    active.delete(target);
+  };
+}

package/ui/style.css

@@ -222,5 +222,20 @@ code { background: #1a1a1a; border-radius: 4px; padding: 3px 6px; font-size: 12p
   .workspace.has-results { padding-top: 72px; }
   select { max-width: 90%; }
 }
+.assignment-workspace { max-width: 1000px; }
+.assignment-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; margin-top: 16px; }
+.assignment-workspace .widget { padding: 24px; min-width: 0; min-height: 0; max-height: none; height: auto; overflow-wrap: anywhere; }
+.assignment-workspace .assignment-overview { background: #203238; border-color: #547982; }
+.assignment-workspace h3 { margin: 8px 0 16px; }
+.task-section { margin-top: 32px; }
+.canvas-workspace { max-width: 1120px; }
+.canvas-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
+.generated-canvas { display:block; width:100%; height:600px; border:0; border-top:1px solid #ffffff18; margin-top:20px; background:#222; }
+.canvas-source { margin-top:24px; padding:24px 0; border-top:1px solid #ffffff25; }
+.canvas-source a { color:#a7d7e5; }
+.assignment-card h4 { font-size: 17px; margin: 8px 0 16px; }
+.assignment-workspace a { color: #a7d7e5; }
+.assignment-workspace summary { cursor: pointer; padding: 8px 0; }
+.assignment-text { white-space: pre-wrap; line-height: 1.65; max-height: 440px; overflow-y: auto; }
 @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
 @media (prefers-reduced-motion: reduce) { .dot-loader > span { opacity: calc(.95 - var(--ring) * .125); will-change: auto; } }

package/ui/widget-layout.js

@@ -1,39 +1,39 @@
-export const sizes = { small: [1, 1], wide: [2, 1], large: [2, 2], full: [4, 2],
-  ...Object.fromEntries(Array.from({ length: 32 }, (_, i) => {
-    const w = i % 4 + 1, h = Math.floor(i / 4) + 1;
-    return [`${w}x${h}`, [w, h]];
-  })) };
-export const defaults = () => [
-  { type: 'deadlines', x: 0, y: 0, size: 'wide' },
-  { type: 'announcements', x: 2, y: 0, size: 'large' },
-  { type: 'shortcuts', x: 0, y: 1, size: 'wide' },
-];
-
-export function fits(layout, widget) {
-  if (!Object.hasOwn(sizes, widget.size) || !Number.isInteger(widget.x) || !Number.isInteger(widget.y)) return false;
-  const [w, h] = sizes[widget.size];
-  if (widget.x < 0 || widget.x + w > 4 || widget.y < 0 || widget.y + h > 8) return false;
-  return layout.every(other => {
-    if (other.type === widget.type) return true;
-    const [ow, oh] = sizes[other.size];
-    return widget.x + w <= other.x || other.x + ow <= widget.x || widget.y + h <= other.y || other.y + oh <= widget.y;
-  });
-}
-
-export function restore(value) {
-  if (!value || !Array.isArray(value.layout) || value.layout.length > 3 || !Array.isArray(value.pins)) return null;
-  const layout = [];
-  for (const item of value.layout) {
-    if (!item || !['deadlines', 'announcements', 'shortcuts'].includes(item.type) || layout.some(w => w.type === item.type) || !fits(layout, item)) return null;
-    layout.push({ type: item.type, x: item.x, y: item.y, size: item.size });
-  }
-  return { layout, pins: [...new Set(value.pins.filter(pin => typeof pin === 'string' && pin.length < 2000))].slice(0, 20) };
-}
-
-export function firstSpace(layout, type, size = 'wide') {
-  for (let y = 0; y < 8; y++) for (let x = 0; x < 4; x++) {
-    const widget = { type, size, x, y };
-    if (fits(layout, widget)) return widget;
-  }
-  return null;
-}
+export const sizes = { small: [1, 1], wide: [2, 1], large: [2, 2], full: [4, 2],
+  ...Object.fromEntries(Array.from({ length: 32 }, (_, i) => {
+    const w = i % 4 + 1, h = Math.floor(i / 4) + 1;
+    return [`${w}x${h}`, [w, h]];
+  })) };
+export const defaults = () => [
+  { type: 'deadlines', x: 0, y: 0, size: 'wide' },
+  { type: 'announcements', x: 2, y: 0, size: 'large' },
+  { type: 'shortcuts', x: 0, y: 1, size: 'wide' },
+];
+
+export function fits(layout, widget) {
+  if (!Object.hasOwn(sizes, widget.size) || !Number.isInteger(widget.x) || !Number.isInteger(widget.y)) return false;
+  const [w, h] = sizes[widget.size];
+  if (widget.x < 0 || widget.x + w > 4 || widget.y < 0 || widget.y + h > 8) return false;
+  return layout.every(other => {
+    if (other.type === widget.type) return true;
+    const [ow, oh] = sizes[other.size];
+    return widget.x + w <= other.x || other.x + ow <= widget.x || widget.y + h <= other.y || other.y + oh <= widget.y;
+  });
+}
+
+export function restore(value) {
+  if (!value || !Array.isArray(value.layout) || value.layout.length > 3 || !Array.isArray(value.pins)) return null;
+  const layout = [];
+  for (const item of value.layout) {
+    if (!item || !['deadlines', 'announcements', 'shortcuts'].includes(item.type) || layout.some(w => w.type === item.type) || !fits(layout, item)) return null;
+    layout.push({ type: item.type, x: item.x, y: item.y, size: item.size });
+  }
+  return { layout, pins: [...new Set(value.pins.filter(pin => typeof pin === 'string' && pin.length < 2000))].slice(0, 20) };
+}
+
+export function firstSpace(layout, type, size = 'wide') {
+  for (let y = 0; y < 8; y++) for (let x = 0; x < 4; x++) {
+    const widget = { type, size, x, y };
+    if (fits(layout, widget)) return widget;
+  }
+  return null;
+}