@mcp-b/react-components 0.17.0 → 0.18.0

package/dist/styles/media-preview-card.css

@@ -0,0 +1,160 @@
+.media-preview-card {
+  position: relative;
+  overflow: clip;
+  padding: 0;
+  isolation: isolate;
+}
+
+.media-preview-card > :is(a, button) {
+  display: grid;
+  min-block-size: 100%;
+  overflow: clip;
+  border-radius: inherit;
+  color: inherit;
+  text-decoration: none;
+}
+
+.media-preview-card:is(:hover, :focus-within) {
+  box-shadow: var(--sigvelo-shadow-md);
+}
+
+.media-preview-card:has(> :is(a, button):focus-visible) {
+  box-shadow: var(--sigvelo-recipe-focus-shadow);
+}
+
+.media-preview-card__media,
+.media-preview-card__placeholder {
+  --media-preview-card-aspect-ratio: 16 / 9;
+
+  position: relative;
+  aspect-ratio: var(--media-preview-card-aspect-ratio);
+  overflow: clip;
+  border-block-end: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border-muted);
+  background: var(--sigvelo-color-neutral-bg-muted);
+}
+
+.media-preview-card__placeholder {
+  display: grid;
+  place-items: center;
+  color: var(--sigvelo-color-text-muted);
+}
+
+.media-preview-card__placeholder > svg {
+  inline-size: var(--sigvelo-text-2xl);
+  block-size: var(--sigvelo-text-2xl);
+}
+
+.media-preview-card__actions {
+  position: absolute;
+  z-index: 1;
+  inset-block-start: var(--sigvelo-spacing-2);
+  inset-inline-end: var(--sigvelo-spacing-2);
+  display: flex;
+  align-items: center;
+  gap: var(--sigvelo-spacing-1);
+}
+
+.media-preview-card__video {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+.media-preview-card__play {
+  position: absolute;
+  inset: 50% auto auto 50%;
+  display: grid;
+  place-items: center;
+  inline-size: var(--sigvelo-control-height-lg);
+  aspect-ratio: 1;
+  border: var(--sigvelo-border-width) var(--sigvelo-border-style)
+    var(--sigvelo-color-neutral-border);
+  border-radius: var(--sigvelo-radius-full);
+  color: var(--sigvelo-color-text);
+  background: color-mix(in oklab, var(--sigvelo-color-surface), transparent 12%);
+  box-shadow: var(--sigvelo-shadow-sm);
+  translate: -50% -50%;
+  scale: 1;
+  transition:
+    opacity var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    scale var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
+  pointer-events: none;
+}
+
+.media-preview-card__play svg {
+  inline-size: var(--sigvelo-text-base);
+  block-size: var(--sigvelo-text-base);
+  translate: var(--sigvelo-motion-distance-xs) 0;
+}
+
+.media-preview-card[data-playing="true"] .media-preview-card__play {
+  opacity: 0;
+  scale: var(--sigvelo-motion-presence-scale);
+}
+
+.media-preview-card .card__content {
+  gap: var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-spacing-3) var(--sigvelo-spacing-4) var(--sigvelo-spacing-4);
+}
+
+.media-preview-card__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  min-inline-size: 0;
+  gap: var(--sigvelo-spacing-1) var(--sigvelo-spacing-3);
+  color: var(--sigvelo-color-text-muted);
+  font-size: var(--sigvelo-text-xs);
+  line-height: var(--sigvelo-leading-snug);
+}
+
+.media-preview-card__fact {
+  display: inline-flex;
+  align-items: center;
+  min-inline-size: 0;
+  gap: var(--sigvelo-spacing-1);
+}
+
+.media-preview-card__fact > svg {
+  flex: 0 0 auto;
+  inline-size: var(--sigvelo-text-sm);
+  block-size: var(--sigvelo-text-sm);
+}
+
+@media (any-pointer: coarse) {
+  .media-preview-card__actions :is(a, button, [role="button"]) {
+    min-inline-size: var(--sigvelo-control-height-xl);
+    min-block-size: var(--sigvelo-control-height-xl);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .media-preview-card,
+  .media-preview-card__video,
+  .media-preview-card__play {
+    transition-duration: var(--sigvelo-duration-reduced);
+  }
+
+  .media-preview-card__play {
+    scale: 1;
+  }
+}
+
+:root[data-motion="reduce"] .media-preview-card__play {
+  scale: 1;
+}
+
+@media (forced-colors: active) {
+  .media-preview-card:has(> :is(a, button):focus-visible) {
+    outline: var(--sigvelo-focus-width) solid Highlight;
+    outline-offset: var(--sigvelo-focus-offset);
+    box-shadow: none;
+  }
+
+  .media-preview-card__play {
+    border-color: buttonborder;
+    background: canvas;
+  }
+}

package/dist/styles/menu.css

@@ -3,13 +3,13 @@
 }
 
 .menu__popup {
-  min-width: 10rem;
-  overflow-y: auto;
+  min-inline-size: var(--sigvelo-recipe-popup-min-inline-size);
+  overflow-block: auto;
 }
 
 .menu__item--inset,
 .menu__group-label--inset {
-  padding-inline-start: 2rem;
+  padding-inline-start: var(--sigvelo-control-height-sm);
 }
 
 .menu__item[data-variant="destructive"] {
@@ -40,22 +40,22 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 1rem;
-  height: 1rem;
+  inline-size: var(--sigvelo-recipe-control-icon-size);
+  block-size: var(--sigvelo-recipe-control-icon-size);
 }
 
 .menu__radio-indicator::before {
   content: "";
-  width: 0.5rem;
-  height: 0.5rem;
+  inline-size: var(--sigvelo-spacing-2);
+  block-size: var(--sigvelo-spacing-2);
   background-color: currentColor;
   border-radius: 50%;
 }
 
 .menu__checkbox-indicator::before {
   content: "";
-  width: var(--sigvelo-spacing-2-5);
-  height: var(--sigvelo-spacing-1-5);
+  inline-size: var(--sigvelo-spacing-2-5);
+  block-size: var(--sigvelo-spacing-1-5);
   border-inline-start: 2px solid currentColor;
   border-block-end: 2px solid currentColor;
   transform: rotate(-45deg) translateY(-1px);
@@ -67,8 +67,8 @@
 
 .menu__submenu-trigger::after {
   content: "";
-  width: 0;
-  height: 0;
+  inline-size: 0;
+  block-size: 0;
   border-top: 4px solid transparent;
   border-bottom: 4px solid transparent;
   border-inline-start: 6px solid currentColor;

package/dist/styles/menubar.css

@@ -1,8 +1,8 @@
 .menubar {
   display: flex;
   align-items: center;
-  gap: 0.25rem;
-  padding: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
+  padding: var(--sigvelo-spacing-1);
   background-color: var(--sigvelo-color-canvas);
   border: var(--sigvelo-border-style) var(--sigvelo-border-width)
     var(--sigvelo-color-neutral-border-muted);
@@ -13,8 +13,9 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding-block: var(--sigvelo-spacing-1-5);
-  padding-inline: var(--sigvelo-spacing-3);
+  min-block-size: var(--sigvelo-control-height-xs);
+  padding-block: 0;
+  padding-inline: var(--sigvelo-control-padding-inline-md);
   font-family: inherit;
   font-size: var(--sigvelo-text-sm);
   font-weight: var(--sigvelo-font-weight-semibold);
@@ -24,8 +25,8 @@
   border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .menubar__trigger:hover {
@@ -44,8 +45,8 @@
 }
 
 .menubar__popup {
-  min-width: 180px;
-  overflow-y: auto;
+  min-inline-size: var(--sigvelo-recipe-popup-min-inline-size);
+  overflow-block: auto;
 }
 
 .menubar__item,
@@ -53,12 +54,12 @@
 .menubar__radio-item,
 .menubar__submenu-trigger {
   justify-content: space-between;
-  gap: 2rem;
+  gap: var(--sigvelo-control-height-sm);
 }
 
 .menubar__item--inset,
 .menubar__group-label--inset {
-  padding-inline-start: 2rem;
+  padding-inline-start: var(--sigvelo-control-height-sm);
 }
 
 .menubar__item[data-variant="destructive"] {
@@ -78,5 +79,5 @@
 }
 
 .menubar__group-label {
-  padding-inline: 0.5rem;
+  padding-inline: var(--sigvelo-spacing-2);
 }

package/dist/styles/message.css

@@ -1,9 +1,9 @@
 .message {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  width: 100%;
-  min-width: 0;
+  gap: var(--sigvelo-spacing-1);
+  inline-size: 100%;
+  min-inline-size: 0;
   font-family: inherit;
   color: var(--sigvelo-color-text);
 }
@@ -20,9 +20,9 @@
 
 .message__content {
   display: inline-block;
-  max-width: min(42rem, 85%);
-  min-width: 0;
-  padding-block: 0.5rem;
+  max-inline-size: min(42rem, 85%);
+  min-inline-size: 0;
+  padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   border-radius: var(--sigvelo-radius-lg);
   font-size: var(--sigvelo-text-sm);
@@ -39,8 +39,8 @@
 
 .message[data-from="assistant"] .message__content {
   display: block;
-  width: min(42rem, 85%);
-  max-width: 100%;
+  inline-size: min(42rem, 85%);
+  max-inline-size: 100%;
   background-color: transparent;
   padding-inline: 0;
 }
@@ -52,12 +52,12 @@
 }
 
 .message__content > * + * {
-  margin-block-start: 0.5rem;
+  margin-block-start: var(--sigvelo-spacing-2);
 }
 
 .message__content :where(pre) {
   overflow-x: auto;
-  overflow-y: clip;
+  overflow-y: auto;
 }
 
 .message__response {
@@ -69,7 +69,7 @@
   display: inline-flex;
   align-items: center;
   gap: var(--sigvelo-spacing-1-5);
-  max-width: 100%;
+  max-inline-size: 100%;
   font-size: var(--sigvelo-text-compact);
   color: inherit;
   text-decoration: none;
@@ -92,7 +92,7 @@
 .message__attachment-zoom {
   display: block;
   min-block-size: 0;
-  max-width: 100%;
+  max-inline-size: 100%;
   padding: 0;
   background: none;
   cursor: zoom-in;
@@ -100,14 +100,14 @@
 
 .message__attachment-image {
   display: block;
-  max-width: 16rem;
-  max-height: 16rem;
+  max-inline-size: 16rem;
+  max-block-size: 16rem;
   border-radius: var(--sigvelo-radius-md);
 }
 
 /* Quiet annotation under a part whose stored content was compacted. */
 .message__compacted {
-  margin-block-start: 0.25rem;
+  margin-block-start: var(--sigvelo-spacing-1);
   font-size: var(--sigvelo-text-xs);
   font-style: italic;
   color: var(--sigvelo-color-text-muted);
@@ -133,10 +133,16 @@
   color: var(--sigvelo-color-text);
 }
 
+@media (any-pointer: coarse) {
+  .message__action {
+    --sigvelo-recipe-button-height: var(--sigvelo-control-height-xl);
+  }
+}
+
 .message__edit-form {
   display: grid;
   gap: var(--sigvelo-spacing-3);
-  width: min(42rem, 85%);
+  inline-size: min(42rem, 85%);
   padding: var(--sigvelo-spacing-3);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-surface);
@@ -155,22 +161,22 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
 }
 
 .message__toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  gap: 0.5rem;
-  width: 100%;
+  gap: var(--sigvelo-spacing-2);
+  inline-size: 100%;
 }
 
 .message__branch {
   display: flex;
   flex-direction: column;
-  gap: 0.25rem;
-  width: 100%;
+  gap: var(--sigvelo-spacing-1);
+  inline-size: 100%;
 }
 
 .message__branch-content {

package/dist/styles/meter.css

@@ -1,8 +1,8 @@
 .meter {
   display: flex;
   flex-direction: column;
-  gap: 0.5rem;
-  width: 100%;
+  gap: var(--sigvelo-spacing-2);
+  inline-size: 100%;
 }
 
 .meter__label {

package/dist/styles/model-selector.css

@@ -6,7 +6,7 @@
 .model-selector__trigger {
   display: inline-flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
 }
 
 .model-selector__trigger-chevron {
@@ -17,8 +17,8 @@
 .model-selector__dialog {
   display: flex;
   flex-direction: column;
-  width: min(32rem, calc(100vw - 2rem));
-  max-height: min(32rem, calc(100vh - 4rem));
+  inline-size: min(32rem, calc(100dvi - var(--sigvelo-spacing-8)));
+  max-block-size: min(32rem, calc(100dvb - var(--sigvelo-spacing-12) - var(--sigvelo-spacing-4)));
   padding: 0;
   overflow: hidden;
   font-family: inherit;
@@ -28,7 +28,7 @@
 .model-selector__search {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
   padding-block: var(--sigvelo-spacing-2);
   padding-inline: var(--sigvelo-spacing-3);
   border-block-end: var(--sigvelo-border-style) var(--sigvelo-border-width)
@@ -42,8 +42,8 @@
 
 .model-selector__input.input {
   flex: 1;
-  min-width: 0;
-  height: auto;
+  min-inline-size: 0;
+  block-size: auto;
   padding: 0;
   border: none;
   outline: none;
@@ -68,7 +68,7 @@
 .model-selector__list {
   flex: 1;
   overflow: auto;
-  padding-block: 0.25rem;
+  padding-block: var(--sigvelo-spacing-1);
 }
 
 .model-selector__group {
@@ -91,7 +91,7 @@
   align-items: center;
   justify-content: flex-start;
   gap: var(--sigvelo-spacing-1-5);
-  width: 100%;
+  inline-size: 100%;
   min-block-size: var(--sigvelo-control-height-xs);
   padding-block: var(--sigvelo-spacing-0-5);
   padding-inline: var(--sigvelo-spacing-3);
@@ -101,7 +101,8 @@
   font-size: var(--sigvelo-text-compact);
   font-weight: var(--sigvelo-font-weight-normal);
   text-align: start;
-  transition: background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: background-color var(--sigvelo-motion-duration-interaction)
+    var(--sigvelo-motion-ease-change);
 }
 
 .model-selector__item:hover:not(:disabled):not([data-disabled]),
@@ -144,7 +145,8 @@
 }
 
 .model-selector__separator {
-  margin: 0.25rem 0;
+  margin-block: var(--sigvelo-spacing-1);
+  margin-inline: 0;
   background-color: var(--sigvelo-color-neutral-border-subtle);
 }
 
@@ -152,8 +154,8 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 1.25rem;
-  height: 1.25rem;
+  inline-size: var(--sigvelo-control-icon-size-xl);
+  block-size: var(--sigvelo-control-icon-size-xl);
   flex-shrink: 0;
   color: var(--sigvelo-color-text);
 }
@@ -161,11 +163,11 @@
 .model-selector__logo-group {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
 }
 
 .model-selector__shortcut {
-  padding-block: 0.0625rem;
+  padding-block: var(--sigvelo-spacing-0-5);
   padding-inline: var(--sigvelo-spacing-1-5);
   font-family: var(--sigvelo-font-mono);
   font-size: var(--sigvelo-text-2xs);

package/dist/styles/motion-reduction.css

@@ -0,0 +1,29 @@
+/*
+ * Motion is a progressive enhancement. The explicit document setting mirrors
+ * the OS preference so Storybook, embedded hosts, and user settings can opt out
+ * without changing component behavior. Opacity and color still communicate
+ * state; spatial, layout, and decorative motion stop immediately.
+ */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    scroll-behavior: auto !important;
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-property:
+      opacity, color, background-color, border-color, text-decoration-color, fill, stroke !important;
+    transition-duration: var(--sigvelo-duration-reduced) !important;
+  }
+}
+
+:root[data-motion="reduce"] *,
+:root[data-motion="reduce"] *::before,
+:root[data-motion="reduce"] *::after {
+  scroll-behavior: auto !important;
+  animation-duration: 0.01ms !important;
+  animation-iteration-count: 1 !important;
+  transition-property:
+    opacity, color, background-color, border-color, text-decoration-color, fill, stroke !important;
+  transition-duration: var(--sigvelo-duration-reduced) !important;
+}

package/dist/styles/navigation-menu.css

@@ -1,12 +1,12 @@
 .navigation-menu {
   position: relative;
-  container-type: inline-size;
 }
 
 .navigation-menu__list {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
-  gap: 0.25rem;
+  gap: var(--sigvelo-spacing-1);
   padding: 0;
   margin: 0;
   list-style: none;
@@ -32,8 +32,8 @@
   border-radius: var(--sigvelo-radius-sm);
   cursor: pointer;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .navigation-menu__trigger:hover {
@@ -52,17 +52,17 @@
 
 .navigation-menu__icon {
   display: inline-flex;
-  transition: transform var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+  transition: rotate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .navigation-menu__trigger[data-popup-open] .navigation-menu__icon {
-  transform: rotate(180deg);
+  rotate: 180deg;
 }
 
 .navigation-menu__content {
   display: grid;
-  gap: 0.5rem;
-  padding: 0.5rem;
+  gap: var(--sigvelo-spacing-2);
+  padding: var(--sigvelo-spacing-2);
 }
 
 .navigation-menu__link {
@@ -75,8 +75,8 @@
   text-decoration: none;
   border-radius: var(--sigvelo-radius-sm);
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .navigation-menu__link:hover {
@@ -96,29 +96,13 @@
 
 .navigation-menu__popup {
   --sigvelo-recipe-surface-padding: 0;
+  --sigvelo-recipe-popup-min-inline-size: 12.5rem;
 
-  min-width: 200px;
-  overflow: hidden;
+  min-inline-size: var(--sigvelo-recipe-popup-min-inline-size);
+  overflow: clip;
 }
 
 .navigation-menu__viewport {
   position: relative;
-  overflow: hidden;
-}
-
-.navigation-menu__arrow {
-  width: 10px;
-  height: 10px;
-  transform: rotate(45deg);
-  background-color: var(--sigvelo-color-surface);
-  border: var(--sigvelo-border-style) var(--sigvelo-border-width)
-    var(--sigvelo-color-neutral-border-muted);
-  border-right: none;
-  border-bottom: none;
-}
-
-@container (max-width: 30rem) {
-  .navigation-menu__list {
-    flex-wrap: wrap;
-  }
+  overflow: clip;
 }

package/dist/styles/number-field.css

@@ -11,7 +11,7 @@
 
 .number-field__input {
   flex: 1;
-  width: 100%;
+  inline-size: 100%;
   text-align: center;
   border-inline: none;
 }
@@ -39,7 +39,7 @@
   inline-size: var(--sigvelo-recipe-control-height);
   block-size: var(--sigvelo-recipe-control-height);
   font-family: inherit;
-  font-size: var(--sigvelo-text-base);
+  font-size: var(--sigvelo-recipe-control-icon-size);
   font-weight: var(--sigvelo-font-weight-semibold);
   color: var(--sigvelo-color-text);
   background-color: var(--sigvelo-color-canvas);
@@ -47,9 +47,11 @@
     var(--sigvelo-color-neutral-border-muted);
   cursor: pointer;
   user-select: none;
+  translate: 0;
   transition:
-    background-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard),
-    border-color var(--sigvelo-duration-fast) var(--sigvelo-ease-standard);
+    background-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    border-color var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change),
+    translate var(--sigvelo-motion-duration-interaction) var(--sigvelo-motion-ease-change);
 }
 
 .number-field__decrement {
@@ -68,6 +70,22 @@
   color: var(--sigvelo-color-neutral-text-on-subtle);
 }
 
+.number-field__decrement:active:not(:disabled),
+.number-field__increment:active:not(:disabled) {
+  translate: 0 var(--sigvelo-motion-distance-xs);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .number-field__decrement,
+  .number-field__increment {
+    translate: none;
+  }
+}
+
+:root[data-motion="reduce"] :is(.number-field__decrement, .number-field__increment) {
+  translate: none;
+}
+
 .number-field__decrement:focus-visible,
 .number-field__increment:focus-visible {
   outline: none;