@floegence/floe-webapp-core 0.90.12 → 0.91.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/PromptCard.d.ts +63 -0
- package/dist/components/ui/PromptCard.js +312 -0
- package/dist/components/ui/Select.d.ts +2 -0
- package/dist/components/ui/Select.js +36 -35
- package/dist/components/ui/index.d.ts +1 -0
- package/dist/floe.css +72 -0
- package/dist/full.js +294 -292
- package/dist/styles.css +1 -1
- package/dist/ui.js +87 -85
- package/package.json +1 -1
package/dist/floe.css
CHANGED
|
@@ -1002,3 +1002,75 @@
|
|
|
1002
1002
|
0 0 28px color-mix(in srgb, var(--glow) 38%, transparent);
|
|
1003
1003
|
}
|
|
1004
1004
|
}
|
|
1005
|
+
|
|
1006
|
+
/* Contextual input uses the shared presence owner and language tokens. The
|
|
1007
|
+
* positioning layer never animates, and typing never schedules a motion loop. */
|
|
1008
|
+
.floe-prompt-card-positioner { position: fixed; pointer-events: none; width: min(24rem, var(--floe-prompt-max-width)); }
|
|
1009
|
+
.floe-prompt-card {
|
|
1010
|
+
--floe-floating-enter-duration: var(--floe-duration-base);
|
|
1011
|
+
--floe-floating-exit-duration: var(--floe-duration-fast);
|
|
1012
|
+
--floe-floating-enter-y: -0.25rem;
|
|
1013
|
+
--floe-floating-exit-y: -0.125rem;
|
|
1014
|
+
--floe-floating-enter-scale: 0.985;
|
|
1015
|
+
--floe-floating-exit-scale: 0.995;
|
|
1016
|
+
--floe-floating-origin: var(--floe-prompt-origin-x) top;
|
|
1017
|
+
display: flex; flex-direction: column; min-width: 0;
|
|
1018
|
+
max-height: var(--floe-prompt-max-height);
|
|
1019
|
+
overflow: hidden; pointer-events: auto;
|
|
1020
|
+
border: 1px solid var(--floe-line);
|
|
1021
|
+
border-radius: var(--floe-radius-card);
|
|
1022
|
+
background: var(--floe-plane-float);
|
|
1023
|
+
color: var(--floe-ink);
|
|
1024
|
+
font-size: var(--floe-type-body);
|
|
1025
|
+
line-height: var(--floe-line-body);
|
|
1026
|
+
}
|
|
1027
|
+
.floe-prompt-card[data-floating-side='top'] {
|
|
1028
|
+
--floe-floating-enter-y: 0.25rem;
|
|
1029
|
+
--floe-floating-exit-y: 0.125rem;
|
|
1030
|
+
--floe-floating-origin: var(--floe-prompt-origin-x) bottom;
|
|
1031
|
+
}
|
|
1032
|
+
.floe-prompt-card[data-floating-side='edge'] {
|
|
1033
|
+
--floe-floating-enter-y: 0;
|
|
1034
|
+
--floe-floating-exit-y: 0;
|
|
1035
|
+
--floe-floating-enter-scale: 1;
|
|
1036
|
+
--floe-floating-exit-scale: 1;
|
|
1037
|
+
}
|
|
1038
|
+
.floe-prompt-card-header {
|
|
1039
|
+
display: flex; align-items: center; flex-shrink: 0;
|
|
1040
|
+
gap: var(--floe-gap-control);
|
|
1041
|
+
padding: var(--floe-pad-control) var(--floe-pad-control) 0 var(--floe-pad-card);
|
|
1042
|
+
}
|
|
1043
|
+
.floe-prompt-card-header h2 {
|
|
1044
|
+
flex: 1; min-width: 0; margin: 0;
|
|
1045
|
+
font-size: var(--floe-type-supporting); line-height: var(--floe-line-control);
|
|
1046
|
+
font-weight: 500; color: var(--floe-ink-soft);
|
|
1047
|
+
}
|
|
1048
|
+
.floe-prompt-card-icon { display: grid; place-items: center; flex-shrink: 0; width: 1rem; height: 1rem; }
|
|
1049
|
+
.floe-prompt-card-icon > svg { width: 100%; height: 100%; }
|
|
1050
|
+
.floe-prompt-card .floe-prompt-card-close { width: var(--floe-control-height-xs); height: var(--floe-control-height-xs); border-radius: var(--floe-radius-sm); }
|
|
1051
|
+
.floe-prompt-card-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding: var(--floe-pad-tight) var(--floe-pad-card) var(--floe-pad-group); }
|
|
1052
|
+
.floe-prompt-card-question { margin-bottom: var(--floe-gap-control); font-size: var(--floe-type-body); line-height: var(--floe-line-body); font-weight: 500; overflow-wrap: anywhere; }
|
|
1053
|
+
.floe-prompt-card-field { border: 0; }
|
|
1054
|
+
.floe-prompt-card-input {
|
|
1055
|
+
display: block; width: 100%; min-height: 2.5rem; max-height: min(10rem, 30dvh);
|
|
1056
|
+
padding: var(--floe-pad-tight) 0; border: 0; border-radius: 0;
|
|
1057
|
+
background: transparent; font: inherit; line-height: 1.5;
|
|
1058
|
+
field-sizing: content; resize: none;
|
|
1059
|
+
}
|
|
1060
|
+
.floe-prompt-card-input::placeholder { color: var(--floe-field-placeholder); }
|
|
1061
|
+
.floe-prompt-card-actions { display: flex; align-items: center; gap: var(--floe-gap-control); padding: var(--floe-pad-control) 0 0; }
|
|
1062
|
+
.floe-prompt-card-references { min-width: 0; }
|
|
1063
|
+
.floe-prompt-card-tools { display: flex; align-items: center; flex: 1; min-width: 0; gap: var(--floe-gap-inline); }
|
|
1064
|
+
.floe-prompt-card-tools > .relative { min-width: 0; max-width: 15rem; }
|
|
1065
|
+
.floe-prompt-card .floe-prompt-card-attach { flex-shrink: 0; width: var(--floe-control-height-sm); height: var(--floe-control-height-sm); border-radius: var(--floe-radius-sm); }
|
|
1066
|
+
.floe-prompt-card .floe-prompt-card-selection { width: auto; max-width: 100%; height: var(--floe-control-height-sm); padding: 0 var(--floe-pad-control); border-color: transparent; background: transparent; font-size: var(--floe-type-supporting); box-shadow: none; }
|
|
1067
|
+
.floe-prompt-card .floe-prompt-card-selection:hover { background: var(--muted); }
|
|
1068
|
+
.floe-prompt-card .floe-prompt-card-submit { flex-shrink: 0; width: var(--floe-control-height-sm); height: var(--floe-control-height-sm); border-radius: 50%; }
|
|
1069
|
+
.floe-prompt-card-feedback { margin-top: var(--floe-gap-control); font-size: var(--floe-type-supporting); line-height: var(--floe-line-control); color: var(--error); }
|
|
1070
|
+
.floe-prompt-card-feedback > p { margin: 0; }
|
|
1071
|
+
@media (pointer: coarse) {
|
|
1072
|
+
.floe-prompt-card .floe-prompt-card-close, .floe-prompt-card .floe-prompt-card-attach, .floe-prompt-card .floe-prompt-card-submit { width: 2.75rem; height: 2.75rem; }
|
|
1073
|
+
.floe-prompt-card-input { font-size: 1rem; }
|
|
1074
|
+
.floe-prompt-card .floe-prompt-card-selection { min-height: 2.75rem; }
|
|
1075
|
+
}
|
|
1076
|
+
@media (forced-colors: active) { .floe-prompt-card { border-color: CanvasText; } }
|