@ivanbard/dd2l 0.0.0-stage → 0.1.0

package/ui/assets/logo.svg

@@ -0,0 +1,13 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="logo">
+<circle id="Ellipse 6" cx="4.33333" cy="4.33333" r="4.33333" fill="white" fill-opacity="0.1"/>
+<circle id="Ellipse 7" cx="15" cy="4.33333" r="4.33333" fill="white"/>
+<circle id="Ellipse 8" cx="25.6667" cy="4.33333" r="4.33333" fill="white" fill-opacity="0.1"/>
+<circle id="Ellipse 3" cx="4.33333" cy="15" r="4.33333" fill="white"/>
+<circle id="Ellipse 4" cx="15" cy="15" r="4.33333" fill="white"/>
+<circle id="Ellipse 5" cx="25.6667" cy="15" r="4.33333" fill="white"/>
+<circle id="Ellipse 9" cx="4.33333" cy="25.6667" r="4.33333" fill="white" fill-opacity="0.1"/>
+<circle id="Ellipse 10" cx="15" cy="25.6667" r="4.33333" fill="white"/>
+<circle id="Ellipse 11" cx="25.6667" cy="25.6667" r="4.33333" fill="white" fill-opacity="0.1"/>
+</g>
+</svg>

package/ui/assets/new-chat.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#bababa"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" />
+  <path d="M18.375 2.625a1 1 0 0 1 3 3l-9.013 9.014a2 2 0 0 1-.853.505l-2.873.84a.5.5 0 0 1-.62-.62l.84-2.873a2 2 0 0 1 .506-.852z" />
+</svg>

package/ui/assets/search.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#bababa"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <circle cx="11" cy="11" r="8" />
+  <path d="m21 21-4.3-4.3" />
+</svg>

package/ui/assets/send.svg

@@ -0,0 +1,8 @@
+<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Send-Greyed">
+<circle id="Ellipse 1" cx="16" cy="16" r="16" fill="#525252"/>
+<g id="Arrow up">
+<path id="Icon" d="M16 21.6V10.4M21.6 16L16 10.4L10.4 16" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke="#353535"/>
+</g>
+</g>
+</svg>

package/ui/assets/settings.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="#bababa"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z" />
+  <circle cx="12" cy="12" r="3" />
+</svg>

package/ui/assets/widget-announcements.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" fill="none">
+  <defs><pattern id="dots" width="4" height="4" patternUnits="userSpaceOnUse"><circle cx="1" cy="1" r=".9" fill="#c2c3ae"/></pattern></defs>
+  <g fill="url(#dots)"><circle cx="160" cy="72" r="47"/><circle cx="244" cy="133" r="47"/><circle cx="212" cy="231" r="47"/><circle cx="108" cy="231" r="47"/><circle cx="76" cy="133" r="47"/></g>
+</svg>

package/ui/assets/widget-shortcuts.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320" fill="none">
+  <defs><pattern id="dots" width="4" height="4" patternUnits="userSpaceOnUse"><circle cx="1" cy="1" r=".9" fill="#c9c0ad"/></pattern></defs>
+  <path d="M40 99h81L39 181l35 35 82-82v81h49V50H40z" fill="url(#dots)"/>
+  <path d="M143 154h65l-66 66 28 28 66-66v65h39V115H143z" fill="url(#dots)" opacity=".4"/>
+</svg>

package/ui/index.html

@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="color-scheme" content="dark">
+  <title>dd2l · Your coursework</title>
+  <link rel="icon" href="/assets/logo.svg" type="image/svg+xml">
+  <link rel="stylesheet" href="/style.css">
+  <script type="module" src="/app.js"></script>
+</head>
+<body>
+  <a class="skip-link" href="#prompt">Skip to search</a>
+  <aside class="sidebar" aria-label="Main navigation">
+    <a class="brand" href="/" aria-label="dd2l home"><img src="/assets/logo.svg" alt="" width="30" height="30"></a>
+    <nav>
+      <button class="icon-button" id="new-chat" type="button" title="New search" aria-label="New search"><img src="/assets/new-chat.svg" alt="" width="16" height="16"></button>
+      <button class="icon-button" id="search-nav" type="button" title="Search coursework" aria-label="Search coursework"><img src="/assets/search.svg" alt="" width="16" height="16"></button>
+      <button class="icon-button" id="courses-nav" type="button" title="Courses" aria-label="Courses"><img src="/assets/courses.svg" alt="" width="16" height="16"></button>
+    </nav>
+    <div class="utilities">
+      <button class="icon-button" id="settings-nav" type="button" title="Connection status" aria-label="Connection status"><img src="/assets/settings.svg" alt="" width="16" height="16"></button>
+      <button class="profile" id="profile" type="button" title="Local profile" aria-label="Local profile"><img src="/assets/avatar.svg" alt="" width="40" height="40"><span>U</span></button>
+    </div>
+  </aside>
+  <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>
+      <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">
+          <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">
+          <label class="sr-only" for="course">Course</label>
+          <select id="course" name="course"><option value="">All courses</option></select>
+          <span id="course-loading" class="loading-slot"></span>
+          <label class="sr-only" for="model">Search mode or model</label>
+          <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>
+      </form>
+      <p id="model-sharing" class="model-sharing" hidden>Sending with this model shares your question and matching coursework with OpenAI.</p>
+      <p id="notice" class="notice" role="status" hidden></p>
+    </section>
+    <section id="home-widgets" class="home-widgets" aria-labelledby="widgets-heading">
+      <div class="widgets-heading"><div><p class="eyebrow">YOUR SPACE</p><h2 id="widgets-heading">At a glance <span id="widget-loading" class="loading-slot"></span></h2></div>
+        <div class="widget-actions"><button id="refresh-widgets" type="button">Refresh cache view</button><button id="add-widget" type="button" hidden>+ Add widget</button><button id="customize-widgets" type="button" aria-pressed="false">Customize</button></div>
+      </div>
+      <p id="widget-help" class="widget-help">From your cached coursework.</p>
+      <div id="widget-grid" class="widget-grid"></div>
+      <p id="widget-status" class="widget-status" role="status"></p>
+    </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="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>
+      <div id="result-list"></div>
+    </section>
+  </main>
+  <dialog id="panel" aria-labelledby="panel-title">
+    <header><h2 id="panel-title"></h2><span id="panel-loading" class="loading-slot"></span><button id="close-panel" type="button" aria-label="Close panel">×</button></header>
+    <div id="panel-body"></div>
+  </dialog>
+</body>
+</html>

package/ui/loading.js

@@ -0,0 +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);
+  };
+}

package/ui/style.css

@@ -0,0 +1,226 @@
+:root { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro', 'Segoe UI', sans-serif; color: #fff; background: #222; color-scheme: dark; font-synthesis: none; }
+* { box-sizing: border-box; }
+body { margin: 0; min-width: 320px; }
+button, input, select { font: inherit; }
+button, a, select { -webkit-tap-highlight-color: transparent; }
+button { cursor: pointer; }
+button:disabled { cursor: default; }
+button, select { color: inherit; }
+button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, h2:focus-visible { outline: 2px solid #75c9e2; outline-offset: 4px; }
+[hidden] { display: none !important; }
+.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+.skip-link { position: fixed; top: -80px; left: 75px; z-index: 5; background: #333; color: white; padding: 12px; }
+.skip-link:focus { top: 12px; }
+.sidebar { position: fixed; inset: 0 auto 0 0; width: 60px; height: 100dvh; background: #1a1a1a; border-right: 1px solid #5e5e5e66; display: flex; flex-direction: column; align-items: center; z-index: 2; }
+.brand { display: grid; place-items: center; width: 44px; height: 44px; margin-top: 12px; }
+.brand img, .icon-button img { display: block; }
+nav { margin-top: 20px; display: grid; gap: 8px; }
+.icon-button { width: 44px; height: 44px; padding: 14px; border: 0; border-radius: 10px; background: transparent; transition: background .15s ease; }
+.icon-button:hover, .icon-button[aria-current] { background: #ffffff0c; }
+.utilities { margin-top: auto; display: flex; align-items: center; flex-direction: column; gap: 12px; padding-bottom: 9px; }
+.profile { display: grid; place-items: center; position: relative; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; border-radius: 50%; }
+.profile img, .profile span { grid-area: 1 / 1; }
+.profile span { font-size: 20px; }
+.workspace { padding: 88px 48px 64px 108px; }
+.home { width: min(560px, 100%); margin: 0 auto; }
+h1 { font-size: 24px; line-height: 29px; font-weight: 400; text-align: center; margin: 0 0 6px; letter-spacing: -.4px; }
+.composer { height: 128px; padding: 20px; border-radius: 42px; background: linear-gradient(137deg, #313131 -10%, #1a1a1a 86%); box-shadow: 5px 7px 13.5px 8px #0004; }
+.prompt-field { height: 44px; border-radius: 22px; background: #2f2f2f; border: 1px solid #5e5e5e66; display: flex; align-items: center; padding: 5px 7px 5px 15px; transition: border-color .15s ease; }
+.prompt-field:focus-within { border-color: #818181; }
+input { min-width: 0; width: 100%; border: 0; outline: none; color: #fff; background: transparent; font-size: 16px; }
+input:focus-visible { outline: none; }
+input::-webkit-search-cancel-button { display: none; }
+#send { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border: 0; padding: 0; background: transparent; border-radius: 50%; transition: filter .15s ease, transform .15s ease; }
+#send img { display: block; }
+.composer[aria-busy=true] #send img { display: none; }
+#send:not(:disabled) { filter: brightness(2); }
+#send:not(:disabled):hover { transform: translateY(-1px); filter: brightness(2.6); }
+.composer-footer { position: relative; display: flex; align-items: center; gap: 4px; margin-top: 12px; height: 32px; }
+.composer-footer select { min-width: 0; max-width: 55%; }
+.composer-footer #model { margin-left: auto; max-width: 45%; }
+.loading-slot:empty { display: none; }
+.loading-slot { display: inline-flex; vertical-align: middle; flex-shrink: 0; }
+.dot-loader { display: inline-grid; grid-template-columns: repeat(5, 3px); grid-template-rows: repeat(5, 3px); gap: 2.25px; width: 24px; height: 24px; flex: 0 0 24px; vertical-align: middle; color: inherit; }
+.dot-loader > span { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .24; animation: dot-origin-wave 1500ms ease-in-out infinite; animation-delay: calc(var(--ring) * 240ms); will-change: opacity; }
+@keyframes dot-origin-wave { 0%, 100% { opacity: .1; } 34% { opacity: 1; } 60% { opacity: .24; } }
+#panel-loading { margin-left: auto; margin-right: 12px; }
+.account-action[aria-busy=true] { display: flex; align-items: center; gap: 12px; }
+select { appearance: none; field-sizing: content; max-width: min(350px, 85%); padding: 8px 30px 8px 12px; border: 0; border-radius: 8px; font-size: 13px; line-height: 16px; background: transparent url('/assets/chevron.svg') right 10px center / 14px 14px no-repeat; color: #bababa; cursor: pointer; text-overflow: ellipsis; }
+select:hover { background-color: #ffffff08; }
+option { background: #292929; color: white; }
+#busy { color: #bababa; font-size: 12px; }
+.notice { color: #bababa; font-size: 13px; line-height: 1.6; margin: 24px 12px 0; text-align: center; }
+.demo-badge { position: fixed; right: 20px; top: 18px; color: #aaa; font-size: 12px; }
+.workspace.has-results { padding-top: 64px; }
+.has-results .home { width: min(680px, 100%); transform: none; }
+.has-results h1 { font-size: 20px; margin-bottom: 18px; }
+.results { max-width: 680px; margin: 44px auto 0; animation: reveal .18s ease-out; }
+.results-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
+h2 { font-size: 18px; font-weight: 500; margin: 0; }
+#result-count, .retrieval-note, .source-meta { font-size: 12px; color: #aaa; line-height: 1.6; }
+.retrieval-note { margin: 12px 0 22px; }
+.source { padding: 22px 0; border-top: 1px solid #ffffff12; }
+.source h3 { font-size: 16px; font-weight: 500; margin: 8px 0 12px; }
+.source p { font-size: 14px; color: #d0d0d0; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 14px; }
+.source a { color: #a7d7e5; text-decoration: none; font-size: 12px; }
+.source a:hover { text-decoration: underline; }
+.stale { color: #e6c58a; }
+.empty { padding: 24px 0; color: #bababa; line-height: 1.7; font-size: 14px; }
+dialog { width: min(460px, calc(100% - 40px)); max-height: 80dvh; padding: 24px; color: #eee; background: #262626; border: 1px solid #484848; border-radius: 20px; box-shadow: 0 20px 80px #0008; }
+dialog::backdrop { background: #0007; }
+dialog header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; }
+#close-panel { width: 32px; height: 32px; background: transparent; border: 0; border-radius: 8px; color: #bbb; font-size: 24px; }
+#close-panel:hover { background: #ffffff0c; }
+#panel-body { color: #bbb; font-size: 14px; line-height: 1.7; }
+#panel-body p { margin: 12px 0; }
+.course-item { display: block; width: 100%; text-align: left; background: transparent; border: 0; border-top: 1px solid #ffffff12; padding: 16px 4px; color: #eee; line-height: 1.6; }
+.course-item:hover { background: #ffffff06; }
+.course-item small { display: block; color: #999; }
+code { background: #1a1a1a; border-radius: 4px; padding: 3px 6px; font-size: 12px; }
+.model-sharing { color: #aaa; font-size: 11px; line-height: 1.5; margin: 18px 12px 0; }
+#panel-body a { color: #a7d7e5; }
+.account-action { border: 1px solid #555; background: #333; color: #eee; border-radius: 8px; padding: 10px 14px; }
+.account-action { display: block; margin: 12px 0; }
+#answer-text { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; color: #ddd; }
+.auth-page { min-height: 100svh; display: grid; place-items: center; padding: 40px 24px; }
+.auth-content { width: min(480px, 100%); }
+.auth-brand { display: inline-flex; align-items: center; gap: 12px; color: #eee; text-decoration: none; font-size: 20px; margin-bottom: 64px; }
+.auth-brand img { display: block; }
+.auth-status { color: #a7d7e5; font-size: 13px; margin: 0 0 16px; }
+.auth-content h1 { text-align: left; font-size: 32px; line-height: 1.2; letter-spacing: -.6px; margin: 0; }
+.auth-message { color: #bbb; font-size: 15px; line-height: 1.7; margin: 20px 0 32px; }
+.auth-return { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; border: 1px solid #555; border-radius: 12px; background: #303030; color: #eee; text-decoration: none; }
+.auth-return:hover { background: #383838; border-color: #777; }
+.auth-usage { display: inline-block; margin-top: 24px; color: #aaa; font-size: 13px; text-underline-offset: 4px; }
+@keyframes reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
+.home-widgets { max-width: 1120px; margin: 64px auto 0; }
+.has-results .home-widgets { display: none; }
+.widgets-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
+.eyebrow { color: #999; font: 10px / 1.4 ui-monospace, 'Cascadia Mono', monospace; letter-spacing: 1px; margin: 0 0 8px; }
+#widgets-heading { font-size: 25px; font-weight: 400; letter-spacing: -.5px; }
+.widget-actions { display: flex; flex-wrap: wrap; gap: 8px; }
+.widget-actions button, .widget-tools button, .pin-shortcut, .shortcut-row > button:not(.shortcut-link) { background: #ffffff08; border: 1px solid #ffffff1c; border-radius: 8px; color: #ddd; padding: 9px 12px; font-size: 12px; }
+.widget-actions button:hover, .widget-tools button:hover, .pin-shortcut:hover { background: #ffffff14; }
+#customize-widgets[aria-pressed=true] { background: #a7d7e5; color: #17252a; }
+.widget-help, .widget-status { font-size: 12px; color: #aaa; line-height: 1.6; }
+.widget-help { margin: 16px 0 24px; }
+.widget-status { min-height: 20px; }
+.widget-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 160px; gap: 16px; }
+.widget { container-type: inline-size; position: relative; isolation: isolate; min-width: 0; display: flex; flex-direction: column; border: 1px solid #ffffff12; border-radius: 7px; background: #171819; padding: 18px 22px; overflow: hidden; box-shadow: inset 0 1px #ffffff0c, 0 2px 3px #0003, 0 12px 24px -12px #0009; transition: border-color .2s, box-shadow .2s, translate .2s; animation: reveal .25s ease-out; }
+.widget::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22; background: repeating-linear-gradient(0deg, transparent 0 2px, #ffffff0b 2px 3px), repeating-linear-gradient(91deg, transparent 0 3px, #0004 3px 4px); }
+.widget:hover, .widget:focus-within { border-color: #ffffff30; box-shadow: inset 0 1px #ffffff12, 0 3px 5px #0004, 0 18px 32px -12px #000a; }
+.widget:not(.widget-preview):hover { translate: 0 -2px; }
+.editing .widget:not(.widget-preview):hover { translate: none; }
+.widget-edition { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 10px; flex-shrink: 0; margin-bottom: 12px; color: #a3a5a5; font: 9px / 1 ui-monospace, 'Cascadia Mono', monospace; letter-spacing: 1.2px; }
+.widget-edition span:last-child { letter-spacing: -.5px; font-weight: 700; }
+.widget-mark { position: absolute; z-index: -1; pointer-events: none; right: -16px; top: 6%; width: 52%; height: 90%; opacity: .5; background-position: center; background-size: contain; background-repeat: no-repeat; }
+.widget-announcements .widget-mark { background-image: url('/assets/widget-announcements.svg'); }
+.widget-shortcuts .widget-mark { background-image: url('/assets/widget-shortcuts.svg'); right: -32px; }
+.widget-deadlines .widget-mark { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #b1d9e8; opacity: .7; transform: rotate(-7deg); }
+.widget-deadlines .widget-mark span { font-size: clamp(72px, 28cqi, 180px); font-weight: 850; letter-spacing: -.09em; line-height: .78; background: radial-gradient(circle, #b1d9e8 1px, transparent 1.2px) 0 0 / 3px 3px; background-clip: text; color: transparent; }
+.widget-deadlines .widget-mark small { margin-top: 12px; padding-left: 12px; font: 10px / 1 ui-monospace, monospace; letter-spacing: 7px; }
+.widget-header { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; margin-top: auto; margin-bottom: 9px; flex-shrink: 0; }
+.widget h3 { color: #dededb; font-size: clamp(17px, 4.4cqi, 25px); line-height: 1.05; letter-spacing: -.8px; font-weight: 750; margin: 0; }
+.widget-body { position: relative; width: 72%; overflow: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: #555 transparent; }
+.widget-item { display: block; text-align: left; width: 100%; background: none; border: 0; border-top: 1px solid #ffffff12; padding: 12px 0; color: #eee; }
+.widget-item:first-child { border-top: 0; padding-top: 2px; }
+.widget-item:hover strong { color: #a7d7e5; }
+.widget-item small, .widget-item strong, .widget-item span { display: block; overflow-wrap: anywhere; }
+.widget-item small { font: 10px / 1.5 ui-monospace, 'Cascadia Mono', monospace; color: #b1b3b3; margin-bottom: 4px; }
+.widget-item strong { font-size: 14px; font-weight: 500; line-height: 1.4; }
+.widget-item span { color: #c3c4c2; font-size: 12px; line-height: 1.6; margin-top: 4px; }
+.widget-empty { font-size: 13px; line-height: 1.6; color: #aaa; margin: 0 0 12px; }
+.shortcut-row { display: flex; align-items: center; gap: 8px; border-top: 1px solid #ffffff12; }
+.shortcut-row:first-child { border-top: 0; }
+.shortcut-link { flex: 1; min-width: 0; background: none; border: 0; text-align: left; color: #d0d1ce; font: 11px / 1.5 ui-monospace, 'Cascadia Mono', monospace; padding: 8px 0; overflow-wrap: anywhere; }
+.shortcut-link::after { content: ' ↗'; color: #a7d7e5; }
+.pin-shortcut { white-space: nowrap; }
+.widget .pin-shortcut, .widget-tools button { color: #bfc0bb; font: 9px / 1.4 ui-monospace, monospace; border-radius: 3px; padding: 5px 7px; background: #ffffff06; }
+.editing { min-height: 688px; background: repeating-linear-gradient(0deg, #ffffff03 0px, #ffffff03 160px, transparent 160px, transparent 176px); border-radius: 18px; }
+.widget-tools { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 12px; flex-shrink: 0; }
+.widget-tools button { padding: 5px 8px; }
+.widget-drag { cursor: grab; touch-action: none; background: none; border: 0; color: #aaa; font-size: 24px; padding: 0 6px; }
+.editing .widget { cursor: grab; touch-action: none; user-select: none; animation: none; }
+.editing .widget.dragging { z-index: 4; cursor: grabbing; border-color: #a7d7e5; box-shadow: 0 16px 40px #0008; will-change: transform; transition: none; }
+.widget-preview { pointer-events: none; background: #a7d7e51a; border: 1px dashed #a7d7e5; box-shadow: none; animation: none; }
+.widget-preview::before { display: none; }
+.widget-preview.blocked { background: #e8909014; border-color: #e89090; }
+.widget.dragging.blocked { border-color: #e89090; }
+.widget-resize { position: absolute; z-index: 2; padding: 0; border: 0; background: transparent; touch-action: none; }
+.widget-resize:hover, .widget-resize:focus-visible { background: #a7d7e550; }
+.resize-n, .resize-s { left: 14px; right: 14px; height: 10px; cursor: ns-resize; }
+.resize-n { top: 0; } .resize-s { bottom: 0; }
+.resize-e, .resize-w { top: 14px; bottom: 14px; width: 10px; cursor: ew-resize; }
+.resize-e { right: 0; } .resize-w { left: 0; }
+.resize-ne, .resize-nw, .resize-se, .resize-sw { width: 16px; height: 16px; }
+.resize-ne, .resize-sw { cursor: nesw-resize; } .resize-nw, .resize-se { cursor: nwse-resize; }
+.resize-ne { top: 0; right: 0; } .resize-nw { top: 0; left: 0; }
+.resize-se { bottom: 0; right: 0; border-right: 2px solid #a7d7e580; border-bottom: 2px solid #a7d7e580; border-radius: 0 0 7px 0; }
+.resize-sw { bottom: 0; left: 0; }
+.col-0 { grid-column-start: 1; } .col-1 { grid-column-start: 2; } .col-2 { grid-column-start: 3; } .col-3 { grid-column-start: 4; }
+.row-0 { grid-row-start: 1; } .row-1 { grid-row-start: 2; } .row-2 { grid-row-start: 3; } .row-3 { grid-row-start: 4; }
+.row-4 { grid-row-start: 5; } .row-5 { grid-row-start: 6; } .row-6 { grid-row-start: 7; } .row-7 { grid-row-start: 8; }
+.size-small { grid-column-end: span 1; grid-row-end: span 1; }
+.size-wide { grid-column-end: span 2; grid-row-end: span 1; }
+.size-large { grid-column-end: span 2; grid-row-end: span 2; }
+.size-full { grid-column-end: span 4; grid-row-end: span 2; }
+#ai-answer { max-width: 1000px; }
+#ai-answer-title { font-size: 28px; font-weight: 700; letter-spacing: -.7px; overflow-wrap: anywhere; }
+#answer-text { max-width: 720px; }
+.answer-view { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 16px; margin: 28px 0 40px; }
+.widget.generated-card { min-height: 0; max-height: none; padding: 24px; }
+.generated-card::after { content: ''; pointer-events: none; position: absolute; z-index: -1; right: -20px; top: 0; width: 180px; height: 180px; background: url('/assets/widget-announcements.svg') center / contain no-repeat; opacity: .07; }
+.generated-card.answer-checklist::after { background-image: url('/assets/widget-shortcuts.svg'); }
+.generated-card .widget-edition { margin-bottom: 28px; }
+.generated-card .widget-header { margin: 0 0 14px; }
+.generated-card h3 { font-size: 23px; line-height: 1.2; overflow-wrap: anywhere; }
+.generated-card p, .generated-card li { font-size: 14px; color: #d0d1ce; line-height: 1.65; overflow-wrap: anywhere; }
+.answer-progress, .answer-session-note { color: #aaa; font: 11px / 1.5 ui-monospace, monospace; }
+.answer-checklist { list-style: none; margin: 4px 0 20px; padding: 0; }
+.answer-checklist li { border-top: 1px solid #ffffff12; padding: 16px 0; }
+.answer-checklist label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
+.answer-checklist input { appearance: auto; flex: 0 0 18px; width: 18px; height: 18px; margin: 3px 0 0; accent-color: #a7d7e5; }
+.answer-checklist input:focus-visible { outline: 2px solid #a7d7e5; outline-offset: 4px; }
+.answer-checklist .completed label span { text-decoration: line-through; color: #888; }
+.answer-references { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+.answer-references a { color: #b1d9e8; font: 10px / 1.5 ui-monospace, monospace; text-decoration: none; padding: 3px 6px; border: 1px solid #ffffff1a; border-radius: 3px; }
+.answer-references a:hover { background: #ffffff09; text-decoration: underline; }
+.answer-checklist .answer-references { margin-left: 30px; }
+.answer-comparison { grid-column: 1 / -1; }
+.answer-table-scroll { overflow-x: auto; }
+.answer-table-scroll table { border-collapse: collapse; width: 100%; min-width: 420px; text-align: left; color: #d0d1ce; font-size: 13px; }
+.answer-table-scroll th, .answer-table-scroll td { padding: 16px 12px; border-top: 1px solid #ffffff16; vertical-align: top; overflow-wrap: anywhere; max-width: 320px; white-space: pre-wrap; }
+.answer-table-scroll thead th { font: 10px / 1.5 ui-monospace, monospace; color: #aaa; }
+.answer-table-scroll tbody th { font-weight: 500; }
+.answer-table-scroll .answer-references { margin: 0; }
+.answer-source-cards > section { padding: 18px 0; border-top: 1px solid #ffffff12; }
+.answer-source-cards h4 { margin: 0 0 8px; font-size: 16px; letter-spacing: -.3px; }
+.answer-source-cards p { margin: 0; white-space: pre-wrap; }
+.answer-sources-heading { font: 11px / 1.5 ui-monospace, monospace; color: #aaa; margin: 32px 0 12px; }
+#answer-sources { max-width: 720px; }
+#answer-sources .source { scroll-margin-top: 24px; }
+@container (max-width: 300px) {
+  .widget-mark { opacity: .17; width: 65%; }
+  .widget-body { width: 100%; }
+  .widget h3 { font-size: 17px; letter-spacing: -.4px; }
+}
+@media (max-width: 760px) {
+  .widget-grid { display: flex; flex-direction: column; min-height: 0; }
+  .widget { max-height: 360px; min-height: 160px; }
+  .widget.size-large, .widget.size-full { min-height: 260px; }
+  .home-widgets { overflow-x: auto; }
+  .widget-grid.editing { display: grid; width: 800px; min-height: 688px; }
+  .widget-grid.editing .widget { min-height: 0; max-height: none; }
+  .widgets-heading { align-items: flex-start; flex-direction: column; gap: 14px; }
+  .home-widgets { margin-top: 40px; }
+}
+@media (max-width: 700px) {
+  .workspace { padding: 80px 20px 40px 80px; }
+  .home { transform: none; }
+  h1 { font-size: 20px; line-height: 1.4; margin-bottom: 14px; letter-spacing: -.3px; }
+  .composer { padding: 16px; height: 120px; border-radius: 32px; }
+  .workspace.has-results { padding-top: 72px; }
+  select { max-width: 90%; }
+}
+@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

@@ -0,0 +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;
+}