@ivanbard/dd2l 0.0.0-stage → 0.1.1

package/ui/style.css

@@ -0,0 +1,241 @@
+: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%; }
+}
+.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

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

package/ui/widgets.js

@@ -0,0 +1,252 @@
+import { defaults, fits, firstSpace, restore, sizes } from './widget-layout.js';
+import { startLoading } from './loading.js';
+
+const $ = id => document.getElementById(id);
+const names = { deadlines: 'Upcoming deadlines', announcements: 'Class announcements', shortcuts: 'Your shortcuts' };
+const node = (tag, text, cls) => {
+  const el = document.createElement(tag);
+  if (text !== undefined) el.textContent = text;
+  if (cls) el.className = cls;
+  return el;
+};
+const button = (label, action, cls) => {
+  const el = node('button', label, cls);
+  el.type = 'button';
+  el.addEventListener('click', action);
+  return el;
+};
+const date = value => new Date(value).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' });
+
+export function createWidgets(browse) {
+  let data, layout = [], pins = [], editing = false, storageKey;
+  const message = text => { $('widget-status').textContent = text; };
+  function save() {
+    try { localStorage.setItem(storageKey, JSON.stringify({ layout, pins })); }
+    catch { message('Your changes work for this visit, but this browser could not save them.'); }
+  }
+  function move(widget, change) {
+    const next = { ...widget, ...change };
+    if (!fits(layout, next)) { message('That space is occupied or outside the grid. Move another widget first.'); return; }
+    Object.assign(widget, next);
+    message(`${names[widget.type]} moved to column ${widget.x + 1}, row ${widget.y + 1}.`);
+    render(); save();
+    $(`widget-${widget.type}`)?.focus();
+  }
+  function place(tile, widget) {
+    tile.className = `widget widget-${widget.type} col-${widget.x} row-${widget.y} size-${widget.size}`;
+    const [w, h] = sizes[widget.size];
+    tile.style.gridColumnEnd = `span ${w}`;
+    tile.style.gridRowEnd = `span ${h}`;
+  }
+  function customize(tile, widget) {
+    tile.tabIndex = 0;
+    tile.setAttribute('aria-describedby', 'widget-help');
+    tile.addEventListener('keydown', event => {
+      if (event.target !== tile && !event.target.classList.contains('widget-resize')) return;
+      const delta = { ArrowLeft: [-1, 0], ArrowRight: [1, 0], ArrowUp: [0, -1], ArrowDown: [0, 1] }[event.key];
+      if (!delta) return;
+      event.preventDefault();
+      const [dx, dy] = delta, [w, h] = sizes[widget.size];
+      move(widget, event.shiftKey || event.target !== tile ? { size: `${w + dx}x${h + dy}` } : { x: widget.x + dx, y: widget.y + dy });
+    });
+    tile.addEventListener('click', event => {
+      if (event.target.closest('.widget-item, .shortcut-link')) { event.preventDefault(); event.stopPropagation(); }
+    }, true);
+    tile.addEventListener('pointerdown', event => {
+      const edge = event.target.closest('.widget-resize')?.dataset.edge;
+      if (event.button !== 0 || (!edge && event.target.closest('button:not(.widget-drag):not(.widget-item):not(.shortcut-link), a, input, select'))) return;
+      event.preventDefault();
+      tile.focus({ preventScroll: true });
+      const grid = $('widget-grid'), rect = tile.getBoundingClientRect();
+      const cell = (grid.getBoundingClientRect().width + 16) / 4;
+      const startX = event.clientX, startY = event.clientY, scrollX = window.scrollX, scrollY = window.scrollY;
+      const [w, h] = sizes[widget.size];
+      const preview = node('div');
+      preview.setAttribute('aria-hidden', 'true');
+      let next = { ...widget }, changed = false;
+      grid.append(preview);
+      function update(e) {
+        const dx = e.clientX - startX + window.scrollX - scrollX, dy = e.clientY - startY + window.scrollY - scrollY;
+        changed ||= Math.abs(dx) + Math.abs(dy) > 4;
+        const left = edge?.includes('w') ? dx : 0, top = edge?.includes('n') ? dy : 0;
+        const width = Math.max(80, rect.width + (edge?.includes('e') ? dx : -left));
+        const height = Math.max(80, rect.height + (edge?.includes('s') ? dy : -top));
+        tile.style.transform = `translate(${edge ? left : dx}px, ${edge ? top : dy}px)`;
+        if (edge) { tile.style.width = `${width}px`; tile.style.height = `${height}px`; }
+        const x = widget.x + Math.round((edge ? left : dx) / cell);
+        const y = widget.y + Math.round((edge ? top : dy) / 176);
+        next = { ...widget, x, y, size: edge ? `${Math.round((width + 16) / cell)}x${Math.round((height + 16) / 176)}` : widget.size };
+        const valid = fits(layout, next);
+        // Invalid dimensions have no grid span; keep the last cell preview and mark it blocked.
+        if (Object.hasOwn(sizes, next.size) && x >= 0 && x < 4 && y >= 0 && y < 8) place(preview, next);
+        preview.classList.add('widget-preview');
+        preview.classList.toggle('blocked', !valid);
+        tile.classList.toggle('blocked', !valid);
+      }
+      function finish(commit) {
+        tile.removeEventListener('pointermove', update);
+        tile.removeEventListener('pointerup', up);
+        tile.removeEventListener('pointercancel', cancel);
+        tile.removeEventListener('lostpointercapture', cancel);
+        document.removeEventListener('keydown', escape);
+        window.removeEventListener('blur', cancel);
+        preview.remove();
+        if (tile.hasPointerCapture(event.pointerId)) tile.releasePointerCapture(event.pointerId);
+        if (commit && changed) move(widget, next);
+        // A canceled or blocked gesture restores the original geometry without saving.
+        if (tile.isConnected) { tile.removeAttribute('style'); place(tile, widget); }
+      }
+      const up = e => { update(e); finish(true); };
+      const cancel = () => finish(false);
+      const escape = e => { if (e.key === 'Escape') { e.preventDefault(); cancel(); } };
+      tile.setPointerCapture(event.pointerId);
+      tile.classList.add('dragging');
+      tile.addEventListener('pointermove', update);
+      tile.addEventListener('pointerup', up);
+      tile.addEventListener('pointercancel', cancel);
+      tile.addEventListener('lostpointercapture', cancel);
+      document.addEventListener('keydown', escape);
+      window.addEventListener('blur', cancel);
+      update(event);
+    });
+    for (const edge of ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw']) {
+      const grip = button('', () => {}, `widget-resize resize-${edge}`);
+      grip.tabIndex = -1;
+      grip.dataset.edge = edge;
+      grip.setAttribute('aria-label', `Resize ${names[widget.type]} ${edge}`);
+      tile.append(grip);
+    }
+  }
+  function choose(title, items, action) {
+    $('panel-title').textContent = title;
+    $('panel-body').replaceChildren();
+    const filter = node('input');
+    filter.type = 'search';
+    filter.placeholder = 'Find a class or material…';
+    filter.setAttribute('aria-label', 'Find a class or material');
+    const list = node('div');
+    const show = () => {
+      list.replaceChildren();
+      for (const item of items.filter(item => item.label.toLowerCase().includes(filter.value.toLowerCase()))) list.append(button(item.label, () => {
+        action(item); $('panel').close();
+      }, 'course-item'));
+      if (!list.children.length) list.append(node('p', 'No available items.'));
+    };
+    if (items.length > 3) $('panel-body').append(filter);
+    $('panel-body').append(list);
+    filter.addEventListener('input', show);
+    show();
+    $('panel').showModal();
+  }
+  function pinPicker() {
+    const items = [
+      ...data.courses.map(c => ({ key: `course:${c.id}`, label: c.name })),
+      ...data.sources.map(s => ({ key: `source:${s.ref}`, label: `${s.courseName} · ${s.title}` })),
+    ];
+    const unique = [...new Map(items.map(item => [item.key, item])).values()];
+    choose('Pin a class or course material', unique.filter(item => !pins.includes(item.key)), item => {
+      if (pins.length >= 20) { message('You can pin up to 20 shortcuts. Remove one to add another.'); return; }
+      pins.push(item.key); save(); render();
+    });
+  }
+  function sourceRow(source, detail) {
+    const row = button('', () => browse(source.course, source.title), 'widget-item');
+    row.append(node('small', `${source.courseName}${source.stale ? ' · Stale cache' : ''}`), node('strong', source.title));
+    if (detail) row.append(node('span', detail));
+    return row;
+  }
+  function render() {
+    if (!data) return;
+    const grid = $('widget-grid');
+    grid.replaceChildren();
+    grid.classList.toggle('editing', editing);
+    $('customize-widgets').textContent = editing ? 'Done' : 'Customize';
+    $('customize-widgets').setAttribute('aria-pressed', String(editing));
+    $('add-widget').hidden = !editing;
+    $('widget-help').textContent = editing ? 'Drag a widget to move it. Drag its edges or corners to resize. Arrow keys move a focused widget; Shift + arrows resize. Escape cancels a drag. Changes save automatically.' : 'From your cached coursework · Select an item to browse its source.';
+    for (const widget of [...layout].sort((a, b) => a.y - b.y || a.x - b.x)) {
+      const tile = node('article', undefined, `widget widget-${widget.type} col-${widget.x} row-${widget.y} size-${widget.size}`);
+      place(tile, widget);
+      tile.id = `widget-${widget.type}`;
+      tile.tabIndex = -1;
+      tile.setAttribute('aria-label', names[widget.type]);
+      const edition = node('div', undefined, 'widget-edition');
+      edition.append(node('span', { deadlines: '01 / PLANNER', announcements: '02 / BULLETIN', shortcuts: '03 / COLLECTION' }[widget.type]), node('span', 'dd2l'));
+      const mark = node('div', undefined, 'widget-mark');
+      mark.setAttribute('aria-hidden', 'true');
+      if (widget.type === 'deadlines') {
+        const due = data.deadlines[0]?.dueDate;
+        mark.append(node('span', due ? new Date(due).toLocaleDateString([], { day: '2-digit' }) : '—'),
+          node('small', due ? new Date(due).toLocaleDateString([], { month: 'short' }).toUpperCase() : 'NO DUE DATE'));
+      }
+      tile.append(edition, mark);
+      const header = node('header', undefined, 'widget-header');
+      header.append(node('h3', names[widget.type]));
+      if (widget.type === 'shortcuts') header.append(button('+ Pin shortcut', pinPicker, 'pin-shortcut'));
+      if (editing) {
+        const handle = button('⠿', () => {}, 'widget-drag');
+        handle.setAttribute('aria-label', `Drag ${names[widget.type]}`);
+        handle.tabIndex = -1;
+        header.append(handle);
+      }
+      tile.append(header);
+      if (editing) {
+        const controls = node('div', undefined, 'widget-tools');
+        controls.append(button('Remove', () => {
+          layout = layout.filter(w => w !== widget); save(); render(); $('add-widget').focus();
+        }));
+        tile.append(controls);
+      }
+      const body = node('div', undefined, 'widget-body');
+      if (widget.type === 'shortcuts') {
+        for (const pin of pins) {
+          const course = data.courses.find(c => pin === `course:${c.id}`);
+          const source = data.sources.find(s => pin === `source:${s.ref}`);
+          if (!course && !source) continue;
+          const row = node('div', undefined, 'shortcut-row');
+          row.append(button(course?.name || source.title, () => browse(course?.id || source.course, source?.title || ''), 'shortcut-link'));
+          if (editing) {
+            const remove = button('×', () => { pins = pins.filter(p => p !== pin); save(); render(); });
+            remove.setAttribute('aria-label', `Unpin ${course?.name || source.title}`);
+            row.append(remove);
+          }
+          body.append(row);
+        }
+        if (!body.children.length) body.append(node('p', 'Keep the classes and materials you use most within reach.', 'widget-empty'));
+      } else {
+        for (const source of data[widget.type]) body.append(sourceRow(source, widget.type === 'deadlines' ? `Due ${date(source.dueDate)}` : `${source.publishedAt ? date(source.publishedAt) + ' · ' : ''}${source.excerpt}`));
+        if (!body.children.length) body.append(node('p', widget.type === 'deadlines' ? 'No upcoming deadlines in the cache. Sync onQ to check for updates.' : 'No announcements in the cache. Sync onQ to check for updates.', 'widget-empty'));
+      }
+      tile.append(body);
+      if (editing) customize(tile, widget);
+      grid.append(tile);
+    }
+    if (!layout.length) grid.append(node('p', 'Your homescreen is clear. Choose Add widget to get started.', 'widget-empty'));
+  }
+  $('customize-widgets').addEventListener('click', () => { editing = !editing; render(); });
+  $('add-widget').addEventListener('click', () => choose('Add a widget', Object.entries(names)
+    .filter(([type]) => !layout.some(w => w.type === type)).map(([type, label]) => ({ type, label })), ({ type }) => {
+    const widget = firstSpace(layout, type);
+    if (!widget) { message('The grid is full. Remove or resize a widget first.'); return; }
+    layout.push(widget); save(); render();
+  }));
+  return async function refresh() {
+    const finish = startLoading($('widget-loading'), 'Refreshing coursework widgets');
+    $('refresh-widgets').disabled = true;
+    try {
+      const response = await fetch('/api/home');
+      if (!response.ok) throw new Error('Could not refresh widgets. Try again.');
+      const next = await response.json();
+      const key = `dd2l:widgets:v1:${next.scope}`;
+      if (storageKey !== key) {
+        let stored;
+        try { stored = restore(JSON.parse(localStorage.getItem(key))); } catch {}
+        layout = stored?.layout || defaults();
+        pins = stored?.pins || next.courses.slice(0, 2).map(c => `course:${c.id}`);
+        storageKey = key;
+      }
+      data = next; render(); message('Widgets updated from the local cache.');
+    } catch (error) { message(error.message); }
+    finally { finish(); $('refresh-widgets').disabled = false; }
+  };
+}