@skillcdn/console 0.1.14 → 0.1.15

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;
@@ -1915,6 +1921,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 +2148,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,7 +2651,6 @@ table {
   font-size: var(--sc-text-xs);
   line-height: 1;
   text-decoration: none;
-  overflow: hidden;
   white-space: nowrap;
 }
 
@@ -2661,15 +2705,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);
@@ -2974,6 +3009,56 @@ table {
   flex: 1 1 10rem;
 }
 
+/* A tip of the console's own: what an item says in full, shown the moment the pointer is on it,
+   where its line cut the title short or shows none. The item carries the words in `data-tip`
+   and is marked `data-clipped` when the tip applies. */
+.sc-tip {
+  position: relative;
+}
+
+.sc-tip::after {
+  content: attr(data-tip);
+  position: absolute;
+  bottom: calc(100% + var(--sc-space-1));
+  left: 0;
+  z-index: 20;
+  width: max-content;
+  max-width: 18rem;
+  padding: var(--sc-space-1) var(--sc-space-2);
+  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-medium);
+  line-height: 1.4;
+  text-decoration: none;
+  white-space: normal;
+  overflow-wrap: anywhere;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+}
+
+/* The item under the pointer rises above its neighbours, which would otherwise paint over its tip. */
+.sc-tip[data-clipped]:hover,
+.sc-tip[data-clipped]:focus-visible {
+  z-index: 20;
+}
+
+.sc-tip[data-clipped]:hover::after,
+.sc-tip[data-clipped]:focus-visible::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* In the last columns the tip hangs from the item's right edge, so that it stays on the page. */
+.sc-calendar-cell:nth-last-child(-n + 2) .sc-tip::after {
+  right: 0;
+  left: auto;
+}
+
 /* 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 +3075,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 +3167,7 @@ table {
     padding: 0;
   }
 
-  .sc-calendar-task-title,
-  .sc-calendar-task-start {
+  .sc-calendar-task-title {
     display: none;
   }
 
@@ -3094,7 +3183,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 +3193,27 @@ table {
     margin: 0;
   }
 
+  /* No pointer rests on a phone's calendar; the lists below say the titles. */
+  .sc-tip::after {
+    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 +3234,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",