@wix/web5-core 1.56.0 → 1.57.0

package/src/components/ui/SearchSection.css

@@ -0,0 +1,538 @@
+.web5-prompt-shell {
+  width: 100%;
+  pointer-events: none;
+}
+
+.web5-prompt-shell--collapsed {
+  pointer-events: none;
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+
+.web5-prompt-shell__stage {
+  position: relative;
+  width: 100%;
+  min-height: calc(
+    var(--pi-field-min-h) + var(--pi-panel-padding-block-start) +
+      var(--pi-panel-padding-block-end)
+  );
+}
+
+.web5-prompt-shell__content {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  pointer-events: none;
+  transform-origin: right bottom;
+  transition: opacity 220ms ease, transform 260ms ease, filter 220ms ease;
+}
+
+.web5-prompt-shell--collapsed .web5-prompt-shell__content {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: min(100vw, var(--pi-content-max-w));
+  opacity: 0;
+  transform: translate3d(160px, 30px, 0) scale(0.26, 0.72);
+  filter: blur(1px);
+  pointer-events: none;
+}
+
+.web5-prompt-shell--collapsed .web5-prompt-shell__stage {
+  width: max-content;
+  min-height: auto;
+}
+
+.web5-prompt-shell__collapsed-button {
+  position: absolute;
+  right: 24px;
+  bottom: 16px;
+  z-index: 2;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--pi-collapsed-btn-min-h);
+  padding: var(--pi-collapsed-btn-padding-y) var(--pi-collapsed-btn-padding-x);
+  border: 1px solid var(--pi-collapsed-btn-border);
+  border-radius: var(--pi-collapsed-btn-radius);
+  isolation: isolate;
+  overflow: hidden;
+  background: var(--pi-collapsed-btn-bg);
+  box-shadow: var(--pi-collapsed-btn-shadow);
+  color: var(--pi-collapsed-btn-fg);
+  font-family: var(--pi-field-font-family);
+  font-size: var(--pi-collapsed-btn-font-size);
+  font-weight: var(--pi-collapsed-btn-font-weight);
+  line-height: var(--pi-collapsed-btn-line-height);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: opacity 220ms ease, transform 260ms ease,
+    box-shadow var(--pi-transition-fast);
+  opacity: 0;
+  transform: translate3d(18px, 14px, 0) scale(0.92);
+  pointer-events: none;
+}
+
+.web5-prompt-shell__collapsed-button::before,
+.web5-prompt-shell__collapsed-button::after {
+  content: '';
+  position: absolute;
+  pointer-events: none;
+}
+
+.web5-prompt-shell__collapsed-button::before {
+  top: 50%;
+  left: 50%;
+  z-index: -2;
+  width: 240%;
+  height: 760%;
+  transform: translate(-50%, -50%) rotate(0deg);
+  transform-origin: center;
+  background-image: var(--pi-collapsed-btn-decoration);
+  opacity: var(--pi-collapsed-btn-decoration-opacity);
+  animation: web5-prompt-border-snake 3.4s linear infinite;
+}
+
+.web5-prompt-shell__collapsed-button::after {
+  inset: 1px;
+  z-index: -1;
+  border-radius: inherit;
+  background: var(--pi-collapsed-btn-inner-bg);
+}
+
+.web5-prompt-shell--collapsed .web5-prompt-shell__collapsed-button {
+  position: relative;
+  right: auto;
+  bottom: auto;
+  margin: 0 24px 16px 0;
+  opacity: 1;
+  transform: translate3d(0, 0, 0) scale(1);
+  pointer-events: auto;
+}
+
+.web5-prompt-shell__collapsed-button:hover {
+  box-shadow: var(--pi-collapsed-btn-hover-shadow);
+}
+
+.web5-prompt-shell--collapsed .web5-prompt-shell__collapsed-button:hover {
+  transform: translate3d(0, -1px, 0) scale(1);
+}
+
+.web5-prompt-shell__collapsed-button:focus-visible {
+  outline: 2px solid var(--pi-submit-active-bg);
+  outline-offset: 2px;
+}
+
+@keyframes web5-prompt-border-snake {
+  100% {
+    transform: translate(-50%, -50%) rotate(1turn);
+  }
+}
+
+.web5-prompt-shell__panel {
+  width: 100%;
+  padding-block: var(--pi-panel-padding-y);
+  background: var(--pi-panel-bg);
+  box-shadow: var(--pi-panel-shadow);
+  backdrop-filter: blur(var(--pi-panel-blur));
+  pointer-events: none;
+}
+
+.web5-prompt-shell__stack {
+  display: flex;
+  flex-direction: column;
+}
+
+.web5-prompt-shell__stack:has(.web5-prompt-shell__chips--visible) {
+  gap: var(--pi-stack-gap);
+}
+
+.web5-prompt-shell__stack--chips-top {
+  flex-direction: column-reverse;
+}
+
+.web5-prompt-shell__chips {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: var(--pi-chip-gap);
+  margin: 0 auto;
+  width: 100%;
+  max-width: 835px;
+  overflow: hidden;
+  transition: transform var(--pi-transition-medium),
+    opacity var(--pi-transition-medium), max-height var(--pi-transition-medium);
+  pointer-events: auto;
+}
+
+.web5-prompt-shell__chips--visible {
+  transform: translateY(0);
+  opacity: 1;
+  max-height: 8rem;
+  overflow: visible;
+}
+
+.web5-prompt-shell__chips--hidden {
+  transform: translateY(1rem);
+  opacity: 0;
+  max-height: 0;
+  overflow: hidden;
+}
+
+.web5-prompt-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  padding: var(--pi-chip-padding-y) var(--pi-chip-padding-x);
+  border: 1px solid var(--pi-chip-border, transparent);
+  border-radius: var(--pi-chip-radius);
+  background: var(--pi-chip-bg);
+  box-shadow: var(--pi-chip-shadow);
+  color: var(--pi-chip-text);
+  font-family: var(--pi-field-font-family);
+  font-size: var(--pi-chip-font-size);
+  font-weight: 500;
+  line-height: var(--pi-chip-line-height);
+  text-decoration: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: background-color var(--pi-transition-fast);
+}
+
+.web5-prompt-chip:hover {
+  background: var(--pi-chip-hover-bg);
+}
+
+/* Inset ring so the focus indicator isn't clipped by the chips container's overflow: hidden */
+.web5-prompt-chip:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px rgba(128, 0, 177, 0.8), var(--pi-chip-shadow);
+}
+
+.web5-prompt-search {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.web5-prompt-search__inner {
+  position: relative;
+  width: min(100%, var(--pi-content-max-w));
+  min-width: min(100%, var(--pi-content-min-w));
+  margin-inline: auto;
+  pointer-events: auto;
+}
+
+.web5-prompt-field-wrap {
+  position: relative;
+  display: flex;
+  justify-content: center;
+}
+
+.web5-prompt-field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: var(--pi-field-min-h);
+  padding: var(--pi-field-padding-top) var(--pi-field-padding-right)
+    var(--pi-field-padding-bottom) var(--pi-field-padding-left);
+  border: var(--pi-field-border-width) solid var(--pi-field-border);
+  border-radius: var(--pi-field-radius-pill);
+  background: var(--pi-field-bg);
+  box-shadow: var(--pi-field-shadow);
+  transition: min-height var(--pi-transition-medium),
+    border-radius var(--pi-transition-medium),
+    padding-top var(--pi-transition-medium),
+    padding-bottom var(--pi-transition-medium);
+}
+
+.web5-prompt-field--multiline {
+  align-items: flex-end;
+  padding-top: var(--pi-field-padding-top-multiline);
+  border-radius: var(--pi-field-radius-multiline);
+}
+
+.web5-prompt-input {
+  appearance: none;
+  display: block;
+  flex: 1;
+  width: 100%;
+  min-width: 0;
+  min-height: var(--pi-field-line-height);
+  max-height: calc(var(--pi-field-max-h) - var(--pi-field-line-height));
+  padding: 0 56px 0 0;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--pi-field-text);
+  caret-color: var(--pi-field-caret);
+  font-family: var(--pi-field-font-family);
+  font-size: var(--pi-field-font-size);
+  line-height: var(--pi-field-line-height);
+  resize: none;
+  overflow-y: auto;
+}
+
+.web5-prompt-field--multiline .web5-prompt-input {
+  line-height: var(--pi-field-line-height-multiline);
+}
+
+.web5-prompt-input::placeholder {
+  color: var(--pi-field-placeholder);
+}
+
+.web5-prompt-input:focus {
+  outline: none !important;
+  box-shadow: none !important;
+  border-color: transparent;
+}
+
+.web5-prompt-input:focus-visible {
+  outline: none !important;
+  box-shadow: none !important;
+  border-color: transparent;
+}
+
+.web5-prompt-input::-webkit-scrollbar {
+  width: 6px;
+}
+
+.web5-prompt-input::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.18);
+  border-radius: 999px;
+}
+
+.web5-prompt-actions {
+  position: absolute;
+  right: var(--pi-field-padding-right);
+  top: 50%;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transform: translateY(-50%);
+}
+
+.web5-prompt-hint {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  margin-right: 4px;
+  color: var(--pi-field-placeholder);
+  font-family: var(--pi-field-font-family);
+  font-size: 12px;
+  line-height: 1;
+  white-space: nowrap;
+  pointer-events: none;
+  user-select: none;
+}
+
+.web5-prompt-hint__key {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 16px;
+  padding: 1px 4px;
+  border: 1px solid var(--pi-field-placeholder);
+  border-radius: 3px;
+  background: transparent;
+  font-family: inherit;
+  font-size: 11px;
+  line-height: 1;
+}
+
+@media (pointer: coarse) {
+  .web5-prompt-hint {
+    display: none;
+  }
+}
+
+.web5-prompt-field--multiline .web5-prompt-actions {
+  top: auto;
+  bottom: var(--pi-submit-bottom);
+  transform: none;
+}
+
+.web5-prompt-voice {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #5f6368;
+  cursor: pointer;
+  transition: color var(--pi-transition-fast);
+}
+
+.web5-prompt-voice:hover {
+  color: #202124;
+}
+
+.web5-prompt-submit {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--pi-submit-size);
+  height: var(--pi-submit-size);
+  padding: 0;
+  border: 0;
+  border-radius: var(--pi-submit-radius);
+  background: var(--pi-submit-bg);
+  color: var(--pi-submit-fg);
+  cursor: pointer;
+  transition: background-color var(--pi-transition-fast),
+    color var(--pi-transition-fast), transform var(--pi-transition-fast);
+}
+
+.web5-prompt-submit:hover:not(:disabled) {
+  transform: scale(1.05);
+}
+
+.web5-prompt-submit:disabled {
+  cursor: default;
+}
+
+.web5-prompt-submit--active {
+  background: var(--pi-submit-active-bg);
+  color: var(--pi-submit-active-fg);
+}
+
+.web5-prompt-submit svg,
+.web5-prompt-send-icon,
+.web5-prompt-voice svg {
+  width: var(--pi-submit-icon-size);
+  height: var(--pi-submit-icon-size);
+  flex-shrink: 0;
+}
+
+.web5-prompt-submit--active:hover {
+  transform: translateY(-1px);
+}
+
+.web5-prompt-progress {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-block: 2rem;
+}
+
+.web5-prompt-progress__indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 3rem;
+  height: 3rem;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 999px;
+  background: #ffffff;
+  box-shadow: 0 10px 25px -15px rgba(0, 0, 0, 0.35);
+}
+
+.web5-prompt-progress__message {
+  margin-left: 0.75rem;
+  color: #4b5563;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+
+@media (max-width: 768px) {
+  .web5-prompt-shell__collapsed-button {
+    right: 12px;
+    bottom: 12px;
+    width: auto;
+    max-width: 100%;
+    min-height: 44px;
+    padding: 10px 20px;
+    line-height: 24px;
+  }
+
+  .web5-prompt-shell--collapsed .web5-prompt-shell__collapsed-button {
+    margin: 0 12px 12px 0;
+  }
+
+  .web5-prompt-shell--collapsed .web5-prompt-shell__content {
+    transform: translate3d(88px, 18px, 0) scale(0.3, 0.72);
+  }
+
+  .web5-prompt-shell__panel {
+    padding-inline: var(--pi-panel-mobile-padding-inline);
+    background: var(--pi-panel-mobile-bg);
+  }
+
+  .web5-prompt-shell__chips {
+    align-items: stretch;
+    justify-content: flex-start;
+    gap: var(--pi-chip-mobile-gap);
+    max-width: none;
+    overflow-y: var(--pi-chip-mobile-overflow-y);
+  }
+
+  .web5-prompt-field {
+    min-width: 0;
+  }
+
+  .web5-prompt-input {
+    font-size: max(16px, var(--pi-field-font-size));
+  }
+
+  .web5-prompt-chip {
+    width: 100%;
+    justify-content: flex-start;
+    padding: 10px 18px;
+    background: transparent;
+    box-shadow: none;
+    font-size: 16px;
+    line-height: 20px;
+    white-space: normal;
+  }
+
+  .web5-prompt-chip .web5-prompt-send-icon {
+    display: none;
+  }
+
+  .web5-prompt-field--focused,
+  .web5-prompt-field--multiline {
+    min-height: 135px;
+    align-items: stretch;
+    padding-top: 14px;
+    padding-bottom: 12px;
+    border-radius: var(--pi-field-radius-multiline);
+  }
+
+  .web5-prompt-field--focused .web5-prompt-input,
+  .web5-prompt-field--multiline .web5-prompt-input {
+    padding-right: 72px;
+    line-height: 24px;
+  }
+
+  .web5-prompt-field--focused .web5-prompt-actions,
+  .web5-prompt-field--multiline .web5-prompt-actions {
+    top: auto;
+    bottom: 12px;
+    transform: none;
+  }
+
+  .web5-prompt-field--focused .web5-prompt-submit,
+  .web5-prompt-field--multiline .web5-prompt-submit {
+    width: 40px;
+    height: 40px;
+  }
+
+  .web5-prompt-field--focused .web5-prompt-submit svg,
+  .web5-prompt-field--focused .web5-prompt-send-icon,
+  .web5-prompt-field--multiline .web5-prompt-submit svg,
+  .web5-prompt-field--multiline .web5-prompt-send-icon {
+    width: 20px;
+    height: 20px;
+  }
+
+  .web5-prompt-hint {
+    display: none;
+  }
+}

package/src/components/ui/SectionSkeleton.css

@@ -0,0 +1,128 @@
+/* SectionSkeleton — status-driven placeholder for a not-yet-streamed V3
+   section (DL #106). Self-contained: structure/sizing live here (NOT Tailwind
+   utilities) so the skeleton renders correctly regardless of whether the
+   consuming app's Tailwind scans this core package. Colors are tokenized; the
+   `shimmer` keyframe is defined globally in base-utilities.css. */
+
+.w5-skeleton {
+  /* Decorative; never intercept clicks or text selection. */
+  pointer-events: none;
+  user-select: none;
+  padding-block: 4rem;
+  /* `min-height` (per-shape, below) includes the block padding so the reserved
+     space matches the eventual section regardless of the consuming app's reset. */
+  box-sizing: border-box;
+}
+
+/* Per-section-type height reservation (DL #114 C) — approximate the eventual
+   section so the skeleton→content swap causes near-zero layout shift below it.
+   Erring slightly tall is preferable (content settles up, not down). */
+.w5-skeleton--cards {
+  min-height: 28rem;
+}
+.w5-skeleton--tiles {
+  min-height: 14rem;
+}
+.w5-skeleton--rows {
+  min-height: 18rem;
+}
+.w5-skeleton--lines {
+  min-height: 10rem;
+}
+
+@media (min-width: 64rem) {
+  .w5-skeleton {
+    padding-block: 6rem;
+  }
+}
+
+.w5-skeleton__inner {
+  width: 100%;
+  max-width: var(--container-section, 1080px);
+  margin-inline: auto;
+  padding-inline: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+.w5-skeleton__grid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 1.5rem;
+}
+
+@media (min-width: 48rem) {
+  .w5-skeleton__grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+.w5-skeleton__card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.w5-skeleton__lines {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+/* --- bar sizes --------------------------------------------------------------- */
+.w5-skeleton__title {
+  height: 1.75rem;
+  width: 33%;
+  border-radius: 6px;
+}
+.w5-skeleton__media {
+  width: 100%;
+  aspect-ratio: 1 / 1;
+  border-radius: 12px;
+}
+.w5-skeleton__tile {
+  width: 100%;
+  height: 6rem;
+  border-radius: 12px;
+}
+.w5-skeleton__row {
+  width: 100%;
+  height: 2.5rem;
+  border-radius: 6px;
+}
+.w5-skeleton__line {
+  height: 1rem;
+  border-radius: 4px;
+}
+.w5-skeleton__line--lg {
+  width: 100%;
+}
+.w5-skeleton__line--md {
+  width: 80%;
+}
+.w5-skeleton__line--sm {
+  width: 60%;
+}
+
+/* --- shimmer treatment ------------------------------------------------------- */
+.w5-skeleton__bar {
+  display: block;
+  /* Grey base with a lighter sheen swept across by the global `shimmer`
+     keyframe (pans background-position -200% → 200%). Both tones are tokens. */
+  background-color: var(--color-border);
+  background-image: linear-gradient(
+    90deg,
+    var(--color-border) 25%,
+    var(--color-muted) 37%,
+    var(--color-border) 63%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.4s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .w5-skeleton__bar {
+    animation: none;
+  }
+}