feat: standardize card library as treegrid widget

react/src/react.css

@@ -679,6 +679,178 @@
   padding: 2px 5px;
   font: 600 16px/1 ui-monospace, monospace;
 }
+
+/* Shared tree-widget presentation: the library uses the same tabular grammar
+   as the classroom tree (tree column, fixed metadata columns, sticky head). */
+.card-library-treegrid {
+  min-height: 0;
+  flex: 1;
+  overflow: auto;
+  margin: 8px;
+  border: 1px solid rgb(31 35 40 / 18%);
+  border-radius: 6px;
+  background: #fff;
+  scrollbar-color: #93a2a8 #edf1f2;
+  scrollbar-width: thin;
+}
+.card-library-treegrid-row {
+  display: grid;
+  min-width: 760px;
+  min-height: 38px;
+  box-sizing: border-box;
+  grid-template-columns: minmax(500px, 1fr) 110px 120px;
+  align-items: stretch;
+  border-bottom: 1px solid rgb(31 35 40 / 9%);
+  color: #273941;
+  font: 500 16px/1.25 ui-monospace, monospace;
+}
+.card-library-treegrid-row > [role="gridcell"],
+.card-library-treegrid-row > [role="columnheader"] {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+  overflow: hidden;
+  padding: 7px 9px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.card-library-treegrid-row > [role="gridcell"] + [role="gridcell"],
+.card-library-treegrid-row > [role="columnheader"] + [role="columnheader"] {
+  border-left: 1px solid rgb(31 35 40 / 9%);
+}
+.card-library-treegrid-head {
+  position: sticky;
+  z-index: 3;
+  top: 0;
+  min-height: 34px;
+  border-bottom-color: rgb(31 35 40 / 20%);
+  background: #eef1f2;
+  color: #3e525b;
+  font-weight: 700;
+  letter-spacing: .045em;
+}
+.card-library-treegrid-row:not(.card-library-treegrid-head):hover {
+  background: rgb(31 35 40 / 4%);
+}
+.card-library-treegrid-row.is-subject {
+  background: #dfe8e5;
+}
+.card-library-treegrid-row.is-level {
+  background: #f5f8f8;
+}
+.card-library-treegrid-row.is-series {
+  background: #f9fbfb;
+}
+.card-library-treegrid-row.is-card {
+  min-height: 42px;
+  background: #fff;
+}
+.card-library-treegrid-row.is-task {
+  background: #fbfcfc;
+}
+.card-library-treegrid-row.is-current {
+  box-shadow: inset 3px 0 #1680a5;
+  background: #e1f1f6;
+}
+.card-library-tree-title {
+  gap: 6px;
+  padding-left: calc(8px + (var(--card-library-depth, 0) * 21px)) !important;
+  font-family: system-ui, sans-serif;
+}
+.card-library-tree-expander {
+  display: inline-grid;
+  width: 24px;
+  height: 24px;
+  flex: none;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  color: #405961;
+  padding: 0;
+  font: 18px/1 ui-monospace, monospace;
+  cursor: pointer;
+}
+.card-library-tree-expander:hover,
+.card-library-tree-expander:focus-visible {
+  background: rgb(22 93 107 / 10%);
+  color: #165d6b;
+  outline: 1px solid rgb(22 93 107 / 28%);
+}
+.card-library-tree-expander.is-empty {
+  cursor: default;
+}
+.card-library-tree-link,
+.card-library-tree-label {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 7px;
+  overflow: hidden;
+  color: #10181c;
+  text-decoration: none;
+  white-space: nowrap;
+}
+.card-library-tree-link:hover,
+.card-library-tree-link:focus-visible {
+  color: #075d7c;
+  outline: none;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.card-library-tree-link strong,
+.card-library-tree-label strong {
+  flex: none;
+  color: inherit;
+  font: 700 16px/1.25 ui-monospace, monospace;
+}
+.card-library-tree-link > span,
+.card-library-tree-label > span {
+  min-width: 0;
+  overflow: hidden;
+  color: inherit;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: 500 16px/1.25 system-ui, sans-serif;
+}
+.card-library-treegrid-row.is-subject .card-library-tree-label strong,
+.card-library-treegrid-row.is-level .card-library-tree-label strong,
+.card-library-treegrid-row.is-series .card-library-tree-label strong {
+  font-family: system-ui, sans-serif;
+  font-weight: 650;
+}
+.card-library-tree-state {
+  display: inline-flex;
+  min-width: 76px;
+  min-height: 24px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid transparent;
+  border-radius: 5px;
+  color: #33474f;
+  padding: 2px 7px;
+  font: 650 14px/1 ui-monospace, monospace;
+  white-space: nowrap;
+}
+.card-library-tree-state[data-state="current"] {
+  border-color: #3184a0;
+  background: #e9f5f8;
+  color: #075d7c;
+}
+.card-library-tree-state[data-state="online"] {
+  border-color: #4b9a7a;
+  background: #edf8f2;
+  color: #176144;
+}
+.card-library-tree-state[data-state="plan"] {
+  border-color: #c59a49;
+  background: #fff7e5;
+  color: #775313;
+}
+.card-library-treegrid-row.is-unavailable .card-library-tree-label,
+.card-library-treegrid-row.is-unavailable .card-library-tree-label strong {
+  color: #10181c;
+}
 .side-toc,
 .side-progress {
   min-height: 0;