jenkins b66c762f5d hermes(webui): add HUX card UI models with contract-locked suites
Standalone per-card browser model/security/view modules for HUX-01..10
plus node+pytest suites that read the hux.v1 contract schemas directly.
Reconciled drift found on integration: the activity model now accepts
all 32 hux.event.v1 kinds (delegation.*, memory.suppressed,
memory.retrieval_removed, budget.exhausted, side_effect.*), the
autonomy model carries the external_side_effect capability, and the
foundation boundary test now asserts the shipped static HUX surface
exists on disk and that images never bake activated HUX_FLAGS.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BvMSXH8VH2tMWXanb8SJdf
2026-08-24 04:12:03 -03:00

148 lines
2.5 KiB
CSS

.hux-multimodal {
--mm-border: color-mix(in srgb, currentColor 16%, transparent);
display: grid;
gap: 1rem;
min-width: 0;
}
.hux-multimodal > header,
.hux-mm-capture,
.hux-mm-workspace,
.hux-mm-editor {
display: flex;
gap: .75rem;
}
.hux-multimodal > header {
align-items: start;
justify-content: space-between;
}
.hux-multimodal h2,
.hux-multimodal h3,
.hux-multimodal p {
margin-block: .2rem;
}
.hux-mm-kicker {
font-size: .72rem;
letter-spacing: .14em;
text-transform: uppercase;
}
.hux-mm-upload {
border: 1px dashed var(--mm-border);
border-radius: .8rem;
padding: 1.25rem;
text-align: center;
}
.hux-mm-workspace {
align-items: stretch;
min-height: 24rem;
}
.hux-mm-workspace > nav,
.hux-mm-workspace > aside {
flex: 0 0 min(18rem, 25%);
}
.hux-mm-workspace > main {
border-inline: 1px solid var(--mm-border);
flex: 1;
min-width: 0;
padding-inline: 1rem;
}
.hux-mm-workspace ul,
.hux-mm-workspace ol {
list-style: none;
margin: 0;
padding: 0;
}
.hux-mm-workspace nav button {
align-items: center;
display: flex;
gap: .5rem;
overflow-wrap: anywhere;
width: 100%;
}
.hux-mm-workspace button[aria-current="page"] {
outline: 2px solid currentColor;
outline-offset: -2px;
}
.hux-mm-image img {
display: block;
height: auto;
max-height: 28rem;
max-width: 100%;
object-fit: contain;
}
.hux-mm-safe-preview {
align-items: center;
border: 1px solid var(--mm-border);
border-radius: .6rem;
display: grid;
gap: .35rem;
justify-items: center;
min-height: 12rem;
padding: 1rem;
text-align: center;
}
.hux-mm-editor,
.hux-mm-transcript {
flex-direction: column;
margin-top: 1rem;
}
.hux-mm-editor textarea,
.hux-mm-transcript textarea {
min-height: 6rem;
resize: vertical;
}
.hux-mm-error,
.hux-mm-warning {
border-inline-start: .25rem solid currentColor;
padding: .65rem .85rem;
}
.hux-mm-workspace aside li {
border-bottom: 1px solid var(--mm-border);
display: grid;
padding-block: .5rem;
}
@media (max-width: 62rem) {
.hux-mm-workspace,
.hux-multimodal > header {
flex-direction: column;
}
.hux-mm-workspace > nav,
.hux-mm-workspace > aside {
flex-basis: auto;
}
.hux-mm-workspace > main {
border-block: 1px solid var(--mm-border);
border-inline: 0;
padding-block: 1rem;
padding-inline: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.hux-multimodal *,
.hux-multimodal *::before,
.hux-multimodal *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
}
}