@skillcdn/console 0.1.19 → 0.1.21

package/src/index.ts

@@ -33,7 +33,6 @@ export {
   type CommentDraft,
   CommentForm,
   type CommentFormProps,
-  isPicture,
   TaskThread,
   type TaskThreadProps,
   type ThreadItem,
@@ -72,6 +71,7 @@ export {
   type FolderViewProps,
 } from "./components/documents.js";
 export { describeEvent, EventFeed, type EventFeedProps } from "./components/event-feed.js";
+export { isPicture } from "./components/files.js";
 export {
   GoalForm,
   type GoalFormProps,

package/src/rules.ts

@@ -23,8 +23,9 @@ export const REFERENCE_RULES = [
   "",
   "## Start here, every time",
   "",
-  "1. These rules come with the task: `console take` prints them under it, and `console rules` reads them any time. Read them before anything is made. The task says where the work is and what it links to; `console task <number>` shows a task in full, with its plan, its decisions, the runs on it and the discussion on it, without taking it. A task put away (archived) once done or dropped is out of the listings and the board, and opens by its number still. How the board is worked is the skill working-the-board, shipped with the command (`console skills` says where it is); these rules say what this organization asks, not how the command works.",
+  "1. These rules come with the task: `console take` prints them under it, and `console rules` reads them any time. Read them before anything is made. The task says where the work is and what it links to; `console task <number>` shows a task in full, with its plan, its decisions, the runs on it and the discussion on it, without taking it. A task put away (archived) is out of the listings and the board, and opens by its number still. How the board is worked is the skill working-the-board, shipped with the command: read it before the first command of a run (`console skills` prints where it is); these rules say what this organization asks, not how the command works.",
   "2. Act as the person whose token the command holds, and no further. What they may not do, the console refuses; that step goes back to them in a report, never around them.",
+  '3. Work given in chat, with no task on the board yet, goes on the board before it is done: write it (`console task new "<title>" --body <markdown>`), tell the person its number, take it (`console take <number>`) and work it as any task, without asking whether to. Until the task is written, the board is only read.',
   "",
   "## The organization's skills",
   "",

package/src/styles/console.css

@@ -710,6 +710,42 @@ table {
   letter-spacing: -0.02em;
 }
 
+/* The ways a page offers at its head, side by side. */
+.sc-page-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-2);
+}
+
+/* A page's name with a word about it beside: on one line where the window is wide, so that the
+   head stays low over the board; under the name where it is not. */
+.sc-page-heading {
+  display: flex;
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+  align-items: baseline;
+  min-width: 0;
+  column-gap: var(--sc-space-4);
+  row-gap: var(--sc-space-1);
+}
+
+.sc-page-lead {
+  flex: 1 1 16rem;
+  min-width: 0;
+  margin: 0;
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-sm);
+}
+
+@media (min-width: 60rem) {
+  .sc-page-lead {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+
 .sc-lead {
   max-width: var(--sc-width-prose);
   margin-bottom: var(--sc-space-5);
@@ -778,6 +814,12 @@ table {
   pointer-events: none;
 }
 
+/* A column's frame stands in front of what scrolls within it: a card scrolling out goes under
+   the lit edge, never over it. The other panes do not scroll, and keep the rim under the content. */
+.sc-column::before {
+  z-index: 1;
+}
+
 .sc-panel {
   margin-bottom: var(--sc-space-5);
   padding: var(--sc-space-5);
@@ -1342,28 +1384,6 @@ table {
   flex: 1;
 }
 
-/* Moving a task from its card: a quiet control, as wide as the card. */
-.sc-card-move select {
-  width: 100%;
-  min-height: 1.75rem;
-  padding: 0 var(--sc-space-2);
-  border: 1px solid transparent;
-  border-radius: var(--sc-radius-sm);
-  background: transparent;
-  color: var(--sc-color-text-faint);
-  font-size: var(--sc-text-xs);
-  transition:
-    border-color var(--sc-transition),
-    color var(--sc-transition);
-}
-
-.sc-card-move select:hover,
-.sc-card-move select:focus {
-  border-color: var(--sc-color-border-strong);
-  background: var(--sc-color-field);
-  color: var(--sc-color-text);
-}
-
 /* One task, and a page of the documents: the text in a column for reading, the facts beside it
    where the window is wide enough, under it where it is not. */
 
@@ -2166,8 +2186,9 @@ table {
   font-size: var(--sc-text-sm);
 }
 
-/* A picture in a comment is a thumbnail, no taller than a few lines, that opens large over the
-   page; a picture that only comes over https stays where it is, as small. */
+/* A picture in a comment, or handed in on a run, is a thumbnail, no taller than a few lines, that
+   opens large over the page; a picture that only comes over https, or one on a page of the
+   documents, stays where it is, as the text has it. */
 .sc-picture-thumb {
   display: inline-block;
   padding: 0;
@@ -2279,7 +2300,8 @@ table {
   font-size: var(--sc-text-sm);
 }
 
-.sc-comment-picture {
+.sc-comment-picture,
+.sc-artifact-picture {
   display: grid;
   gap: var(--sc-space-1);
   justify-items: start;
@@ -2290,7 +2312,8 @@ table {
   gap: var(--sc-space-2);
 }
 
-.sc-comment-chosen {
+.sc-comment-chosen,
+.sc-chosen-files {
   display: flex;
   flex-wrap: wrap;
   gap: var(--sc-space-2);
@@ -2300,7 +2323,8 @@ table {
   font-size: var(--sc-text-sm);
 }
 
-.sc-comment-chosen-file {
+.sc-comment-chosen-file,
+.sc-chosen-file {
   display: inline-flex;
   align-items: center;
   gap: var(--sc-space-1);
@@ -2318,13 +2342,15 @@ table {
   gap: var(--sc-space-2);
 }
 
-.sc-comment-form-actions label {
+.sc-comment-form-actions label,
+.sc-file-choice {
   position: relative;
   cursor: pointer;
 }
 
 /* The file input is the label's: there for the keyboard and the screen reader, not seen. */
-.sc-comment-file-input {
+.sc-comment-file-input,
+.sc-file-input {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -2520,6 +2546,14 @@ table {
   opacity: 0.85;
 }
 
+/* The pictures for a page, under its body: the way to add one, and what becomes of it. */
+.sc-doc-form-pictures {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-2);
+}
+
 .sc-doc-attach {
   display: flex;
   flex-wrap: wrap;
@@ -2600,13 +2634,6 @@ table {
   }
 }
 
-/* Where there is no pointer to hover with, the control on a card is as tall as a finger needs. */
-@media (hover: none) {
-  .sc-card-move select {
-    min-height: 2rem;
-  }
-}
-
 /* The schedule, the roadmap and the categories (ADR-0019). */
 
 /* The colours a category may be shown in: names, painted here and nowhere else. Each is a
@@ -3775,14 +3802,40 @@ table {
   }
 }
 
-/* A card is dragged to another column by its grip, which shows on the card under the pointer
-   and always to a finger; the column under the dragged card says it would take it, and a ghost
-   of the card follows the pointer. The keyboard keeps the select. */
+/* A card is dragged to another column from anywhere on it but its menu, its title included: with
+   a mouse at once, under a finger once it has rested a moment, so that a finger that moves
+   scrolls. The column under the dragged card says it would take it, and the card itself, whole,
+   follows the pointer while a faded one keeps its place. */
 .sc-card {
   position: relative;
 }
 
-.sc-card-grip {
+.sc-card-movable {
+  cursor: grab;
+}
+
+/* A finger resting on a card is neither selecting its words nor asking for the page's menu. */
+@media (pointer: coarse) {
+  .sc-card-movable {
+    -webkit-touch-callout: none;
+    user-select: none;
+  }
+}
+
+.sc-card-dragging {
+  opacity: 0.4;
+}
+
+.sc-board-dragging,
+.sc-board-dragging .sc-card,
+.sc-board-dragging .sc-card * {
+  cursor: grabbing;
+  user-select: none;
+}
+
+/* The card's menu: three dots in the corner, seen on the card under the pointer or with the
+   focus, and always to a finger; the menu itself stands over the page, clipped by no column. */
+.sc-card-menu-button {
   position: absolute;
   top: var(--sc-space-1);
   right: var(--sc-space-1);
@@ -3796,36 +3849,66 @@ table {
   border-radius: var(--sc-radius-sm);
   background: none;
   color: var(--sc-color-text-faint);
-  font-size: var(--sc-text-sm);
-  letter-spacing: -0.15em;
-  cursor: grab;
+  cursor: pointer;
   opacity: 0;
-  touch-action: none;
-  transition: opacity var(--sc-transition);
+  transition:
+    opacity var(--sc-transition),
+    background var(--sc-transition),
+    color var(--sc-transition);
 }
 
-.sc-card:hover .sc-card-grip,
-.sc-card:focus-within .sc-card-grip,
-.sc-card.sc-card-dragging .sc-card-grip {
+.sc-card-menu-button svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Shown on the card under the pointer or with the focus, while the menu is open, and on the card
+   in hand, which is the card as it was hovered: its menu's dots, and the room they take. */
+.sc-drag-ghost .sc-card-menu-button,
+.sc-card:hover .sc-card-menu-button,
+.sc-card:focus-within .sc-card-menu-button,
+.sc-card-menu-button[aria-expanded="true"] {
   opacity: 1;
 }
 
+.sc-card-menu-button:hover,
+.sc-card-menu-button[aria-expanded="true"] {
+  background: var(--sc-color-bg-inset);
+  color: var(--sc-color-text);
+}
+
+.sc-card-menu-button:focus-visible {
+  outline: 2px solid var(--sc-color-accent);
+  outline-offset: 1px;
+}
+
 @media (pointer: coarse) {
-  .sc-card-grip {
+  .sc-card-menu-button {
     opacity: 1;
   }
 }
 
-.sc-card:has(.sc-card-grip) .sc-card-title {
+.sc-card:has(.sc-card-menu-button) .sc-card-title {
   padding-right: 1.75rem;
 }
 
-.sc-card-dragging {
-  opacity: 0.5;
+.sc-card-menu {
+  position: fixed;
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  min-width: 8rem;
+  padding: var(--sc-space-1);
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-md);
+  background: var(--sc-color-bg-inset);
+  box-shadow: var(--sc-shadow-stage);
+  font-size: var(--sc-text-sm);
 }
 
-.sc-board-dragging {
-  user-select: none;
+.sc-card-menu .sc-menu-link {
+  padding: calc(var(--sc-space-1) + 1px) var(--sc-space-2);
+  border-radius: var(--sc-radius-sm);
 }
 
 .sc-column-over {
@@ -3838,17 +3921,16 @@ table {
   top: 0;
   left: 0;
   z-index: 50;
-  max-width: 18rem;
-  padding: var(--sc-space-2) var(--sc-space-3);
-  border: 1px solid var(--sc-color-accent);
-  border-radius: var(--sc-radius-lg);
-  background: var(--sc-color-bg-raised);
-  box-shadow: var(--sc-glow);
-  color: var(--sc-color-text);
-  font-size: var(--sc-text-sm);
   pointer-events: none;
 }
 
+.sc-drag-ghost .sc-card {
+  border-color: var(--sc-color-accent);
+  background: var(--sc-color-bg-raised);
+  box-shadow: var(--sc-shadow-stage);
+  transform: scale(1.02);
+}
+
 /* A goal's page reads as the board does: the facts in a row at its head, then a switch between
    the views of its tasks, then the view, which takes the rest of the height as the board does. */
 .sc-goal-page {
@@ -3941,21 +4023,3 @@ table {
 .sc-goal-view-list {
   display: block;
 }
-
-/* The done and dropped columns lead to the archive (ADR-0029), beside their count. */
-.sc-column-meta {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sc-space-2);
-}
-
-.sc-column-archive {
-  color: var(--sc-color-text-muted);
-  font-size: var(--sc-text-xs);
-  text-decoration: none;
-}
-
-.sc-column-archive:hover {
-  color: var(--sc-color-text);
-  text-decoration: underline;
-}