@skillcdn/console 0.1.14 → 0.1.16

package/src/styles/console.css

@@ -957,6 +957,12 @@ table {
   line-height: 1;
 }
 
+.sc-avatar-xs {
+  width: 0.875rem;
+  height: 0.875rem;
+  font-size: 0.5rem;
+}
+
 .sc-avatar-sm {
   width: 1.5rem;
   height: 1.5rem;
@@ -1065,9 +1071,15 @@ table {
   border-radius: 50%;
 }
 
-@media (prefers-reduced-motion: no-preference) {
+/* The ring turns whatever the motion preference: it says that the page still waits, and a ring
+   that stands still reads as a page that stopped. Where motion is to be reduced it turns slowly. */
+.sc-spinner-ring {
+  animation: sc-spin 700ms linear infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
   .sc-spinner-ring {
-    animation: sc-spin 700ms linear infinite;
+    animation-duration: 1.6s;
   }
 }
 
@@ -1915,6 +1927,30 @@ table {
   font-size: var(--sc-text-sm);
 }
 
+/* What let a person in, when they were deactivated, when a login was let in: beside the name, smaller. */
+.sc-person-note {
+  font-size: var(--sc-text-xs);
+}
+
+/* Those let in and not signed in yet, and those deactivated: sections below everyone in. */
+.sc-people-section {
+  margin-top: var(--sc-space-6);
+}
+
+.sc-person-row-out .sc-person {
+  opacity: 0.7;
+}
+
+.sc-listing-form .sc-field-row {
+  align-items: end;
+}
+
+.sc-field-hint {
+  margin-top: var(--sc-space-2);
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-sm);
+}
+
 /* Projects: what a person may see, each with what they are in it and what waits in it. */
 
 .sc-projects {
@@ -2118,6 +2154,21 @@ table {
   word-break: break-all;
 }
 
+/* A text to copy as it is, with the way to copy it in its corner. */
+.sc-copyable {
+  position: relative;
+}
+
+.sc-copyable .sc-code {
+  padding-right: 5rem;
+}
+
+.sc-copyable .sc-button {
+  position: absolute;
+  top: var(--sc-space-2);
+  right: var(--sc-space-2);
+}
+
 .sc-code-input {
   max-width: 12rem;
   font-family: var(--sc-font-mono);
@@ -2606,12 +2657,12 @@ table {
   font-size: var(--sc-text-xs);
   line-height: 1;
   text-decoration: none;
-  overflow: hidden;
   white-space: nowrap;
 }
 
+/* Lit a little under the pointer by its colour, not by a filter, which would light the card within it too. */
 .sc-calendar-bar:hover {
-  filter: brightness(1.15);
+  background: color-mix(in srgb, var(--sc-category-fill), white 12%);
 }
 
 .sc-calendar-bar-begins {
@@ -2661,15 +2712,6 @@ table {
   margin: 0;
 }
 
-.sc-calendar-task-start {
-  color: var(--sc-color-text-muted);
-}
-
-.sc-calendar-task-start::before {
-  content: "\203A";
-  color: var(--sc-color-text-faint);
-}
-
 /* The button under a list shown a page at a time. */
 .sc-show-more {
   margin-top: var(--sc-space-3);
@@ -2677,6 +2719,7 @@ table {
 
 /* A project's mark: its symbol on its colour. */
 .sc-mark {
+  position: relative;
   display: inline-flex;
   flex: none;
   align-items: center;
@@ -2714,7 +2757,7 @@ table {
   align-items: end;
 }
 
-/* A project's own image, in place of the symbol, filling the mark. */
+/* A project's own image over the symbol, filling the mark; the symbol shows until the image is there. */
 .sc-mark-pictured {
   padding: 0;
   overflow: hidden;
@@ -2722,6 +2765,8 @@ table {
 }
 
 .sc-mark-image {
+  position: absolute;
+  inset: 0;
   display: block;
   width: 100%;
   height: 100%;
@@ -2974,6 +3019,86 @@ table {
   flex: 1 1 10rem;
 }
 
+/* The task under the pointer in full: a card within its item with its title and the facts its page
+   lists, above or below the item, whichever side has more room, and moved left where it would
+   leave the window; the calendar measures that as the pointer arrives, since only the browser
+   knows where the item is. The card lies out of the accessible tree and takes no pointer. */
+.sc-calendar-task,
+.sc-calendar-bar {
+  position: relative;
+}
+
+/* The item under the pointer rises above its neighbours, which would otherwise paint over its card. */
+.sc-calendar-task:hover,
+.sc-calendar-task:focus-visible,
+.sc-calendar-bar:hover,
+.sc-calendar-bar:focus-visible {
+  z-index: 20;
+}
+
+.sc-task-tip {
+  position: absolute;
+  left: 0;
+  z-index: 20;
+  width: max-content;
+  max-width: 20rem;
+  padding: var(--sc-space-2) var(--sc-space-3);
+  border: var(--sc-border);
+  border-radius: var(--sc-radius-md);
+  background: var(--sc-color-bg-inset);
+  box-shadow: var(--sc-shadow-stage);
+  color: var(--sc-color-text);
+  font-size: var(--sc-text-xs);
+  font-weight: var(--sc-weight-normal);
+  line-height: 1.4;
+  text-align: left;
+  text-decoration: none;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  pointer-events: none;
+  animation: sc-task-tip-in 120ms ease-out 100ms backwards;
+}
+
+.sc-task-tip-above {
+  bottom: calc(100% + var(--sc-space-1));
+}
+
+.sc-task-tip-below {
+  top: calc(100% + var(--sc-space-1));
+}
+
+.sc-task-tip-title {
+  margin: 0 0 var(--sc-space-2);
+  font-weight: var(--sc-weight-medium);
+}
+
+.sc-task-tip-facts {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--sc-space-1) var(--sc-space-3);
+  margin: 0;
+}
+
+.sc-task-tip-facts > div {
+  display: contents;
+}
+
+.sc-task-tip-facts dt {
+  color: var(--sc-color-text-faint);
+  font-weight: var(--sc-weight-medium);
+}
+
+.sc-task-tip-facts dd {
+  margin: 0;
+}
+
+/* The card arrives after a moment, so that a pointer passing over the days opens none. */
+@keyframes sc-task-tip-in {
+  from {
+    opacity: 0;
+  }
+}
+
 /* One week on its own, the only row there is: its days are taller than a month's. */
 .sc-week .sc-calendar-cell {
   height: 9rem;
@@ -2990,6 +3115,11 @@ table {
   margin-right: 0;
 }
 
+/* Who has a task, before its title on a project's calendar; a bar has no gap of its own. */
+.sc-calendar-bar .sc-avatar {
+  margin-right: var(--sc-space-1);
+}
+
 /* What is on a person's plate: the week across the page, the lists below it at reading width. */
 .sc-work {
   display: grid;
@@ -3077,8 +3207,7 @@ table {
     padding: 0;
   }
 
-  .sc-calendar-task-title,
-  .sc-calendar-task-start {
+  .sc-calendar-task-title {
     display: none;
   }
 
@@ -3094,7 +3223,9 @@ table {
   }
 
   /* A bar is a line here, too thin for a mark; a task on its day keeps its mark as its dot. */
-  .sc-calendar-bar .sc-mark {
+  .sc-calendar-bar .sc-mark,
+  .sc-calendar-bar .sc-avatar,
+  .sc-calendar-task .sc-avatar {
     display: none;
   }
 
@@ -3102,6 +3233,27 @@ table {
     margin: 0;
   }
 
+  /* No pointer rests on a phone's calendar, and the lists below say the titles. */
+  .sc-task-tip {
+    display: none;
+  }
+
+  /* A text to copy keeps the whole width here; the button that copies it sits below it. */
+  .sc-copyable {
+    display: grid;
+    justify-items: end;
+    gap: var(--sc-space-2);
+  }
+
+  .sc-copyable .sc-code {
+    width: 100%;
+    padding-right: var(--sc-space-4);
+  }
+
+  .sc-copyable .sc-button {
+    position: static;
+  }
+
   .sc-feed-item {
     grid-template-columns: 1fr;
     gap: var(--sc-space-1);
@@ -3122,3 +3274,97 @@ table {
     border-radius: var(--sc-radius-lg);
   }
 }
+
+/* An input with what stands before it: the deployment's origin before a skills address. */
+.sc-input-group {
+  display: flex;
+  align-items: stretch;
+}
+
+.sc-input-prefix {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 var(--sc-space-3);
+  border: 1px solid var(--sc-color-border-strong);
+  border-right: 0;
+  border-radius: var(--sc-radius-md) 0 0 var(--sc-radius-md);
+  background: color-mix(in srgb, var(--sc-color-field) 60%, var(--sc-color-border));
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-sm);
+  white-space: nowrap;
+}
+
+.sc-input-group .sc-input-prefix + .sc-input {
+  border-radius: 0 var(--sc-radius-md) var(--sc-radius-md) 0;
+}
+
+/* The rules (ADR-0023): the facts of the page they are written on stand above the text. */
+.sc-rules-facts {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--sc-space-2);
+  margin: 0 0 var(--sc-space-3);
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-sm);
+}
+
+/* The categories on the settings, as chips, with the way to the page that keeps them. */
+.sc-category-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sc-space-2);
+  margin: 0 0 var(--sc-space-4);
+}
+
+/* The facts of a thing inside a panel: a list in the panel, not a pane of their own. */
+.sc-facts-plain {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: none;
+  backdrop-filter: none;
+  box-shadow: none;
+}
+
+.sc-facts-plain::before {
+  content: none;
+}
+
+/* A fact that needs the whole row: a description. */
+.sc-facts-wide {
+  grid-column: 1 / -1;
+}
+
+/* A section's title with what stands beside it: a way to where the thing is kept. */
+.sc-section-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--sc-space-2) var(--sc-space-4);
+  margin-bottom: var(--sc-space-3);
+}
+
+.sc-section-head .sc-section-title {
+  margin-bottom: 0;
+}
+
+/* The ways to change the rules stand off the text, as a form's actions do. */
+.sc-rules-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--sc-space-2);
+  margin-top: var(--sc-space-4);
+}
+
+/* The rules folded under where they come from, where the page is about something else. */
+.sc-rules-fold > summary {
+  cursor: pointer;
+  color: var(--sc-color-text-muted);
+  font-size: var(--sc-text-sm);
+}
+
+.sc-rules-fold[open] > summary {
+  margin-bottom: var(--sc-space-3);
+}

package/src/vocabulary.ts

@@ -70,6 +70,23 @@ export const PERSON_ROLES = ["admin", "member"] as const;
 
 export type PersonRole = (typeof PERSON_ROLES)[number];
 
+/**
+ * Whether a person is in: `active`, or `deactivated`, which is kept rather than deleted so that
+ * what they did stays theirs (ADR-0022). A deactivated person is refused on every request.
+ */
+export const PERSON_STATUSES = ["active", "deactivated"] as const;
+
+export type PersonStatus = (typeof PERSON_STATUSES)[number];
+
+/**
+ * What let a person in (ADR-0022): the organization at the git host the deployment names,
+ * whose members come and go with it; the Workspace domain the deployment names; or an
+ * administrator, who listed their login on the People page.
+ */
+export const MEMBERSHIP_SOURCES = ["organization", "domain", "listed"] as const;
+
+export type MembershipSource = (typeof MEMBERSHIP_SOURCES)[number];
+
 /** What a person is within a project: an owner configures it, a member works on it. */
 export const PROJECT_ROLES = ["owner", "member"] as const;
 
@@ -115,6 +132,15 @@ export const SKILLS_STATUSES = [
 
 export type SkillsStatus = (typeof SKILLS_STATUSES)[number];
 
+/**
+ * Where the rules that hold on a board come from (ADR-0023): the console's own, since the
+ * organization wrote none; a page the organization or the project wrote; or none, for a
+ * project that adds nothing to the workspace's.
+ */
+export const RULES_SOURCES = ["reference", "written", "none"] as const;
+
+export type RulesSource = (typeof RULES_SOURCES)[number];
+
 /**
  * What can happen to the board. Every change of state is one of these, written down once with
  * who did it: the live feed shows them as they happen, and the audit trail keeps them.
@@ -122,6 +148,10 @@ export type SkillsStatus = (typeof SKILLS_STATUSES)[number];
 export const EVENT_KINDS = [
   "person.joined",
   "person.role_changed",
+  "person.listed",
+  "person.unlisted",
+  "person.deactivated",
+  "person.reactivated",
   "category.created",
   "category.updated",
   "category.removed",