@inf-monkeys-tech/monkeys-design 2.0.249 → 2.0.250

package/dist/styles/loading-motion.css

@@ -0,0 +1,26 @@
+/* Progress remains observable when ambient motion is reduced. */
+:is(
+  [data-monkeys-component="button"][data-loading="true"],
+  [data-monkeys-component="loading-state"],
+  [data-monkeys-component="spinner"],
+  [data-monkeys-component="workbench-task-outputs"],
+  [data-monkeys-component="workbench-task-spreadsheet"]
+) :is(.animate-spin, .motion-safe\:animate-spin) {
+  animation: monkeys-loading-spin 1s linear infinite;
+}
+@keyframes monkeys-loading-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  :is(
+    [data-monkeys-component="button"][data-loading="true"],
+    [data-monkeys-component="loading-state"],
+    [data-monkeys-component="spinner"],
+    [data-monkeys-component="workbench-task-outputs"],
+    [data-monkeys-component="workbench-task-spreadsheet"]
+  ) :is(.animate-spin, .motion-safe\:animate-spin) {
+    animation-duration: 3s;
+  }
+}

package/dist/styles/task-record.css

@@ -24,12 +24,12 @@
   overflow: hidden;
 }
 
-/* In List View, prompt text fills the space reserved before record actions. */
+/* List prompts reserve three lines independently of the space between rows. */
 .monkeys-task-record[data-record-layout="horizontal"]
   .monkeys-task-record-prompt:not([data-expanded="true"]) {
-  flex: 1 1 0%;
-  min-block-size: 0;
-  block-size: 0;
+  flex: 0 0 auto;
+  min-block-size: 3lh;
+  block-size: auto;
 }
 
 /* Reserve scrollbar space below fixed squares rather than shrinking their height. */
@@ -47,6 +47,9 @@
   margin-inline-end: auto;
 }
 .monkeys-task-output-frame > *,
+.monkeys-task-measurements,
+.monkeys-task-record[data-record-layout="horizontal"]
+  .monkeys-task-measurements,
 .monkeys-task-record[data-record-layout="horizontal"]
   .monkeys-task-output-frame
   > * {
@@ -80,13 +83,6 @@
   min-width: 0;
   min-height: calc(var(--monkeys-task-preview-size, 15rem) + 1.5rem);
 }
-.monkeys-task-measurements {
-  min-width: 0;
-  width: 100%;
-}
-.monkeys-task-measurements {
-  height: var(--monkeys-task-preview-size, 15rem);
-}
 .monkeys-task-record[data-record-layout="vertical"] [data-record-part="media"] {
   container-type: inline-size;
 }
@@ -212,8 +208,9 @@
 /* Bound collapsed details independently of prompt content and output type. */
 .monkeys-task-record[data-record-layout="horizontal"]
   [data-record-part="details"] {
-  min-block-size: 21rem;
-  block-size: 21rem;
+  min-block-size: 17rem;
+  block-size: 17rem;
+  justify-content: space-between;
 }
 .monkeys-task-record[data-record-layout="horizontal"]
   [data-record-part="details"]:has(> .monkeys-task-record-prompt[data-expanded="true"]) {
@@ -235,10 +232,29 @@
   margin-block-end: 0;
   align-content: start;
 }
+.monkeys-task-record[data-record-layout="horizontal"]
+  .monkeys-task-record-metadata {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: flex-start;
+  gap: calc(var(--global-spacing) / 2);
+}
 .monkeys-task-record[data-record-layout="horizontal"]
   [data-record-part="details"]
   > :last-child {
-  align-content: end;
+  align-content: normal;
+  margin-block-start: 0;
+}
+.monkeys-task-record[data-record-layout="horizontal"]
+  .monkeys-task-record-heading
+  h2 {
+  font-weight: 600;
+}
+.monkeys-task-record[data-record-layout="horizontal"]
+  .monkeys-task-record-heading
+  time {
+  font-weight: 600;
 }
 .monkeys-task-record[data-record-layout="horizontal"]
   .monkeys-task-output-frame
@@ -275,12 +291,6 @@
   overflow: auto;
 }
 
-.monkeys-task-record[data-record-layout="horizontal"]
-  .monkeys-task-measurements {
-  width: min(100%, 20rem);
-  margin-inline: auto;
-}
-
 .monkeys-task-record[data-record-layout="horizontal"]
   [data-record-part="media"] {
   container-type: inline-size;
@@ -288,8 +298,8 @@
 
 .monkeys-task-record[data-record-layout="horizontal"]
   .monkeys-task-media-panel {
-  --monkeys-task-preview-size: min(21rem, 100cqw);
-  min-height: 21rem;
+  --monkeys-task-preview-size: min(17rem, 100cqw);
+  min-height: 17rem;
 }
 
 .monkeys-task-record[data-record-layout="horizontal"]
@@ -302,7 +312,9 @@
 /* A lone result should use the available square instead of the multi-result column width. */
 .monkeys-task-record[data-record-layout="horizontal"]
   .monkeys-task-output-frame
-  > :only-child {
+  > :only-child,
+.monkeys-task-record[data-record-layout="horizontal"]
+  .monkeys-task-measurements {
   width: min(var(--monkeys-task-preview-size), 100%);
   min-width: min(var(--monkeys-task-preview-size), 100%);
   max-width: min(var(--monkeys-task-preview-size), 100%);
@@ -313,6 +325,18 @@
 /* Multiple squares share the same media height, with a separate scrollbar row. */
 .monkeys-task-record[data-record-layout="horizontal"]
   .monkeys-task-output-frame:has(> :nth-child(2)) {
-  --monkeys-task-preview-size: min(19.5rem, calc(100cqw - 1.5rem));
+  --monkeys-task-preview-size: min(17rem, calc(100cqw - 1.5rem));
   block-size: calc(var(--monkeys-task-preview-size) + 1.5rem);
 }
+
+/* List resources start at the media column edge; Grid keeps its existing alignment. */
+.monkeys-task-record[data-record-layout="horizontal"]
+  .monkeys-task-output-frame
+  > :first-child,
+.monkeys-task-record[data-record-layout="horizontal"]
+  .monkeys-task-output-frame
+  > :last-child,
+.monkeys-task-record[data-record-layout="horizontal"]
+  .monkeys-task-measurements {
+  margin-inline: 0;
+}