thursday-agent 0.16.0 → 0.17.0

package/skills/artifact/runtime/sheet/sheet.css

@@ -0,0 +1,499 @@
+/* A sheet: the grid fills the window under the page's head, with a formula line over it and
+   the sheets' tabs and the picked cells' sum under it. Colours are the shell's, so it reads in
+   light and dark alike. */
+html,
+body {
+  height: 100%;
+}
+body {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  overflow: hidden;
+  background: var(--sh-paper);
+  color: var(--sh-ink);
+  font-family: var(--sh-font);
+}
+
+.ss-bar {
+  display: flex;
+  flex: none;
+  align-items: stretch;
+  height: 32px;
+  border-bottom: 1px solid var(--sh-line);
+  font-size: 13px;
+}
+.ss-ref {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 76px;
+  border-right: 1px solid var(--sh-line);
+  color: var(--sh-ink-2);
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+.ss-fx {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  color: var(--sh-ink-3);
+  font-family: Georgia, serif;
+  font-style: italic;
+}
+.ss-formula {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--sh-ink);
+  font-family: ui-monospace, "SF Mono", Menlo, monospace;
+  font-size: 12.5px;
+  text-overflow: ellipsis;
+  outline: none;
+}
+
+.ss-grid {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  outline: none;
+}
+.ss-grid table {
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-size: 13px;
+}
+.ss-grid :is(th, td) {
+  height: 26px;
+  box-sizing: border-box;
+  padding: 0 8px;
+  border-right: 1px solid var(--sh-line);
+  border-bottom: 1px solid var(--sh-line);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: cell;
+  user-select: none;
+}
+.ss-grid td {
+  background: var(--sh-paper);
+}
+.ss-grid td.num {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.ss-grid td.err {
+  color: var(--sh-bad);
+}
+/* Column letters and row numbers stay in view; the header row stays under the letters */
+.ss-grid thead th {
+  position: sticky;
+  z-index: 2;
+  background: var(--sh-soft);
+}
+.ss-grid .ss-letters th {
+  top: 0;
+  color: var(--sh-ink-3);
+  font-size: 11px;
+  font-weight: 500;
+  text-align: center;
+}
+.ss-grid .ss-names th {
+  top: 26px;
+  color: var(--sh-ink);
+  font-weight: 650;
+  text-align: left;
+}
+.ss-grid .ss-names th.num {
+  text-align: right;
+}
+.ss-grid .ss-row {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  width: 48px;
+  padding: 0;
+  background: var(--sh-soft);
+  color: var(--sh-ink-3);
+  font-size: 11px;
+  font-weight: 500;
+  text-align: center;
+}
+.ss-grid thead .ss-row {
+  z-index: 3;
+  text-align: center;
+}
+.ss-grid tfoot td,
+.ss-grid tfoot th {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  border-top: 1px solid var(--sh-ink-3);
+  background: var(--sh-soft);
+  font-weight: 650;
+}
+.ss-grid tfoot .ss-row {
+  z-index: 3;
+}
+/* The column's own button: sort and filter */
+.ss-name {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.ss-names th.num .ss-name {
+  flex-direction: row-reverse;
+}
+.ss-name span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.ss-col {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  margin: 0 -4px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--sh-ink-3);
+  cursor: pointer;
+}
+.ss-col:hover,
+.ss-col[aria-expanded="true"] {
+  background: var(--sh-sunk);
+  color: var(--sh-ink);
+}
+.ss-col.on {
+  color: var(--sh-brand);
+}
+.ss-col svg {
+  width: 13px;
+  height: 13px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* What is picked: a wash over the range, a ring on the cell the formula line shows */
+.ss-grid .in {
+  background: var(--sh-brand-soft);
+}
+.ss-grid .at {
+  box-shadow: inset 0 0 0 2px var(--sh-brand);
+}
+/* A cell worked out by a formula, faintly; the cells the picked formula names, each reference in
+   its own colour, edged where the range ends (sheet.js showRefs) */
+.ss-grid td.fx:not(.in) {
+  background: color-mix(in srgb, var(--sh-brand) 5%, var(--sh-paper));
+}
+.ss-grid td[data-ref],
+.ss-grid th[data-ref] {
+  background: color-mix(in srgb, var(--ref) 12%, var(--sh-paper));
+  box-shadow:
+    inset 0 var(--rt, 0) 0 0 var(--ref),
+    inset calc(-1 * var(--rr, 0px)) 0 0 0 var(--ref),
+    inset 0 calc(-1 * var(--rb, 0px)) 0 0 var(--ref),
+    inset var(--rl, 0) 0 0 0 var(--ref);
+}
+.ss-grid .ss-row.in,
+.ss-grid .ss-letters th.in {
+  background: color-mix(in srgb, var(--sh-brand) 16%, var(--sh-soft));
+  color: var(--sh-brand);
+}
+.ss-more {
+  margin: 0;
+  padding: 10px 14px;
+  color: var(--sh-ink-3);
+  font-size: 12px;
+}
+
+.ss-foot {
+  display: flex;
+  flex: none;
+  align-items: stretch;
+  height: 36px;
+  border-top: 1px solid var(--sh-line);
+  background: var(--sh-soft);
+  font-size: 13px;
+}
+.ss-tabs {
+  display: flex;
+  min-width: 0;
+  overflow-x: auto;
+}
+.ss-tabs button {
+  flex: none;
+  padding: 0 16px;
+  border: 0;
+  border-right: 1px solid var(--sh-line);
+  background: transparent;
+  color: var(--sh-ink-2);
+  font: inherit;
+  cursor: pointer;
+}
+.ss-tabs button[aria-selected="true"] {
+  background: var(--sh-paper);
+  color: var(--sh-ink);
+  font-weight: 650;
+  box-shadow: inset 0 -2px 0 var(--sh-ink);
+}
+.ss-gap {
+  flex: 1;
+}
+.ss-stat {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 14px;
+  color: var(--sh-ink-2);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.ss-stat b {
+  color: var(--sh-ink);
+  font-weight: 650;
+}
+
+.ss-menu {
+  position: fixed;
+  z-index: 20;
+  display: flex;
+  flex-direction: column;
+  width: 240px;
+  max-height: min(420px, 70vh);
+  padding: 6px;
+  border: 1px solid var(--sh-line);
+  border-radius: var(--sh-radius);
+  background: var(--sh-paper);
+  box-shadow: var(--sh-shadow);
+  font-size: 13px;
+}
+.ss-menu[hidden] {
+  display: none;
+}
+.ss-menu > button,
+.ss-menu-foot button {
+  padding: 7px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--sh-ink);
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.ss-menu > button:hover,
+.ss-menu-foot button:hover {
+  background: var(--sh-sunk);
+}
+.ss-menu > button.on {
+  color: var(--sh-brand);
+  font-weight: 650;
+}
+.ss-menu hr {
+  width: 100%;
+  margin: 6px 0;
+  border: 0;
+  border-top: 1px solid var(--sh-line);
+}
+.ss-menu input[type="search"] {
+  box-sizing: border-box;
+  width: 100%;
+  height: 30px;
+  padding: 0 8px;
+  border: 1px solid var(--sh-line);
+  border-radius: 6px;
+  background: var(--sh-paper);
+  color: var(--sh-ink);
+  font: inherit;
+}
+.ss-picks {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  margin-top: 6px;
+  overflow-y: auto;
+}
+.ss-picks label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px;
+  border-radius: 6px;
+  cursor: pointer;
+}
+.ss-picks label:hover {
+  background: var(--sh-sunk);
+}
+.ss-picks span {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ss-picks small {
+  color: var(--sh-ink-3);
+}
+.ss-menu-foot {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 6px;
+  padding-top: 6px;
+  border-top: 1px solid var(--sh-line);
+}
+
+@media print {
+  @page {
+    size: landscape;
+    margin: 12mm;
+  }
+  html,
+  body {
+    height: auto;
+    overflow: visible;
+  }
+  .sh-head,
+  .ss-bar,
+  .ss-foot,
+  .ss-menu,
+  .ss-letters,
+  .ss-row,
+  .ss-col {
+    display: none !important;
+  }
+  .ss-grid {
+    overflow: visible;
+  }
+  .ss-grid :is(th, td) {
+    position: static !important;
+  }
+}
+
+/* Editing: the formula line takes typing, the tools sit at its end, and a cell being typed
+   in has a box of its own over it */
+.ss-fx-box {
+  position: relative;
+  display: flex;
+  flex: 1;
+  min-width: 0;
+}
+/* The formula again over the line, its references in their colours; the line's own text hides
+   under it until someone types there */
+.ss-fx-show {
+  position: absolute;
+  inset: 0;
+  display: none;
+  align-items: center;
+  overflow: hidden;
+  white-space: pre;
+  pointer-events: none;
+}
+.ss-fx-box.colored .ss-fx-show {
+  display: flex;
+}
+.ss-fx-box.colored .ss-formula:not(.ss-fx-show) {
+  color: transparent;
+}
+.ss-fx-show b {
+  font-weight: 600;
+}
+.ss-formula:not([readonly]):focus {
+  box-shadow: inset 0 -2px 0 var(--sh-brand);
+}
+.ss-tools {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: 2px;
+  padding: 0 6px;
+  border-left: 1px solid var(--sh-line);
+}
+.ss-tools[hidden] {
+  display: none;
+}
+/* On a narrow screen the tools have a row of their own under the formula line */
+@media (max-width: 720px) {
+  .ss-bar {
+    flex-wrap: wrap;
+    height: auto;
+  }
+  .ss-bar > :not(.ss-tools) {
+    height: 32px;
+  }
+  .ss-tools {
+    order: 1;
+    width: 100%;
+    height: 34px;
+    overflow-x: auto;
+    border-top: 1px solid var(--sh-line);
+    border-left: 0;
+  }
+}
+.ss-format {
+  height: 26px;
+  margin: 0 2px;
+  padding: 0 4px;
+  border: 1px solid var(--sh-line);
+  border-radius: calc(var(--sh-radius) * 0.6);
+  background: var(--sh-paper);
+  color: var(--sh-ink);
+  font: inherit;
+  font-size: 12px;
+}
+.ss-edit {
+  position: absolute;
+  z-index: 4;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0 7px;
+  border: 2px solid var(--sh-brand);
+  background: var(--sh-paper);
+  color: var(--sh-ink);
+  font: inherit;
+  font-size: 13px;
+  outline: none;
+  opacity: 0;
+  pointer-events: none;
+}
+.ss-edit.open {
+  opacity: 1;
+  pointer-events: auto;
+  box-shadow: 0 2px 8px rgb(0 0 0 / 0.12);
+}
+.ss-grid.editing td,
+.ss-grid.editing .ss-names th {
+  cursor: text;
+}
+.ss-note {
+  min-width: 0;
+  line-height: 36px;
+  overflow: hidden;
+  margin-right: 12px;
+  color: var(--sh-ink-3);
+  font-size: 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.ss-note.bad {
+  color: var(--sh-bad);
+}
+@media print {
+  .ss-tools,
+  .ss-edit {
+    display: none;
+  }
+}

package/skills/artifact/runtime/sheet/sheet.html

@@ -0,0 +1,102 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    {{shell.meta}}
+    <meta name="sheet-xlsx" content="{{xlsx.hash}}" />
+    <title>{{title}}</title>
+    <script>
+      // shell.theme
+    </script>
+    <style>
+      /* shell.css */
+      /* sheet.css */
+    </style>
+  </head>
+  <body>
+    <header class="sh-head">
+      {{shell.who}}
+      <span class="sh-title">{{title}}</span>
+      <span class="sh-sub" id="size"></span>
+      <span class="sh-sub" id="state"></span>
+      <span class="sh-gap"></span>
+      <span class="sh-tools">
+        <button type="button" class="sh-b sh-outline" data-reload title="Show the sheet as it is now" hidden>Reload</button>
+        <button type="button" class="sh-b sh-outline" data-edit><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 20h9M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z"/></svg><span class="sh-word">Edit</span></button>
+      </span>
+      {{shell.theme}}
+      <details class="sh-menu">
+        {{shell.export}}
+        <div class="sh-list">
+          <a class="sh-item" id="xlsx" href="{{xlsx.file}}" target="_blank" download>Excel file<small>.xlsx</small></a>
+          <button type="button" class="sh-item" data-csv>This sheet as CSV<small>.csv</small></button>
+          <button type="button" class="sh-item" data-copy-sheet>Copy this sheet<small>to paste</small></button>
+          <button type="button" class="sh-item" data-export="print">Print<small>PDF</small></button>
+          {{shell.download}}
+        </div>
+      </details>
+    </header>
+
+    <div class="ss-bar">
+      <span class="ss-ref" id="ref"></span>
+      <span class="ss-fx" aria-hidden="true">fx</span>
+      <span class="ss-fx-box" id="fx-box">
+        <input class="ss-formula" id="formula" readonly spellcheck="false" autocomplete="off" aria-label="The cell's formula or value" />
+        <span class="ss-formula ss-fx-show" id="fx-show" aria-hidden="true"></span>
+      </span>
+      <span class="ss-tools" id="tools" hidden>
+        <button type="button" class="sh-b sh-sm" data-do="row" title="A row under the one picked">+ Row</button>
+        <button type="button" class="sh-b sh-sm" data-do="unrow" title="Take out the rows picked">− Row</button>
+        <button type="button" class="sh-b sh-sm" data-do="col" title="A column right of the one picked">+ Column</button>
+        <button type="button" class="sh-b sh-sm" data-do="uncol" title="Take out the columns picked">− Column</button>
+        <select class="ss-format" id="format" aria-label="How the column's numbers read">
+          <option value="General">General</option>
+          <option value="0">1234</option>
+          <option value="#,##0">1,234</option>
+          <option value="#,##0.00">1,234.00</option>
+          <option value="0%">12%</option>
+          <option value="0.0%">12.3%</option>
+          <option value="#,##0;[Red]-#,##0">-1,234 in red</option>
+          <option value="yyyy-mm-dd">2026-07-02</option>
+        </select>
+        <span class="sh-rule"></span>
+        <button type="button" class="sh-b sh-sm sh-icon" data-do="undo" title="Undo (⌘Z)" aria-label="Undo"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M9 14 4 9l5-5M4 9h11a5 5 0 0 1 0 10h-3"/></svg></button>
+        <button type="button" class="sh-b sh-sm sh-icon" data-do="redo" title="Redo (⇧⌘Z)" aria-label="Redo"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="m15 14 5-5-5-5M20 9H9a5 5 0 0 0 0 10h3"/></svg></button>
+      </span>
+    </div>
+    <div class="ss-grid" id="grid" tabindex="0" aria-label="Cells">
+      <table id="table"></table>
+      <p class="ss-more" id="more" hidden></p>
+    </div>
+    <footer class="ss-foot">
+      <div class="ss-tabs" id="tabs" role="tablist"></div>
+      <span class="ss-gap"></span>
+      <output class="ss-note" id="note"></output>
+      <output class="ss-stat" id="stat"></output>
+    </footer>
+
+    <div class="ss-menu" id="menu" role="dialog" aria-label="Sort and filter" hidden>
+      <button type="button" data-sort="up">Sort ascending</button>
+      <button type="button" data-sort="down">Sort descending</button>
+      <button type="button" data-sort="none">Rows as written</button>
+      <hr />
+      <input type="search" id="find" placeholder="Find a value" aria-label="Find a value" />
+      <div class="ss-picks" id="picks"></div>
+      <div class="ss-menu-foot">
+        <button type="button" data-pick="all">Show all</button>
+      </div>
+    </div>
+
+    <!-- The workbook the .xlsx beside this page holds, as spreadsheet.mjs read it -->
+    <script type="application/json" id="sheet-data">null</script>
+    <script>
+      // shell.js
+    </script>
+    <script>
+      // formula.mjs
+      // format.mjs
+      // sheet.js
+    </script>
+  </body>
+</html>