mirror of
https://github.com/olehomelchenko/astrolabe.git
synced 2026-08-08 02:02:33 +00:00
oleh
693f5d7073
- Prune the data payload and top-level datasets keys in all three ref walks (extractDatasetRefs, renameDatasetInSpec, resolveDatasetRefs) so a data row carrying a field named "data" is no longer misread as a library reference, spuriously rewritten, or made to throw DatasetNotFoundError. Adds tests, including a guard that lookup-transform refs (from.data) still resolve. - Wire the deferred success toasts now the Toaster has landed: publish, revert, extract-to-dataset, and snippet/dataset delete. Copy follows the council title-vs-message rule (title states the action, message adds the consequence). - Reconcile the spec's blanket toast mandate to "toast only what the user can't already see": no toast on visible-result creates (snippet, dataset form); Copy Reference stays inline and gains an aria-live announcement (new shared .visually-hidden utility) instead of a toast-per-copy. - Move the toast region to bottom-right so it stops covering the header action cluster (Publish/Revert, theme/datasets). - Update docs/spec 01F/02/05 and docs/architecture/07 + 10 to match.
139 lines
3.0 KiB
CSS
139 lines
3.0 KiB
CSS
.region {
|
|
position: fixed;
|
|
/* Bottom-right, not top-right: the header's action cluster (Publish/Revert,
|
|
theme/datasets controls) lives top-right, and a toast there lands on top of
|
|
the control the user just used. Bottom-anchored, the stack grows upward and
|
|
the newest toast sits nearest the corner (docs/architecture/10 → Toasts). */
|
|
bottom: var(--space-5);
|
|
right: var(--space-5);
|
|
/* Above the confirm backdrop (z 1000) so a failure stays visible and
|
|
dismissible even with a confirmation open; the corner clears the centered
|
|
dialog. */
|
|
z-index: 1100;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-3);
|
|
width: min(24rem, calc(100vw - 2 * var(--space-5)));
|
|
/* The region is only a positioner; individual toasts re-enable pointer events. */
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toast {
|
|
pointer-events: auto;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: var(--space-3);
|
|
padding: var(--space-4);
|
|
background: var(--layer-02);
|
|
/* Design language → Toasts: 1px border in the support colour, square. The
|
|
accent (per-kind) is set by the modifier classes below. */
|
|
border: var(--border-width) solid var(--toast-accent);
|
|
border-left-width: 3px;
|
|
border-radius: var(--radius);
|
|
box-shadow: 0 2px 12px rgb(0 0 0 / 0.3);
|
|
animation: toast-in var(--dur-moderate) var(--ease);
|
|
}
|
|
|
|
.error {
|
|
--toast-accent: var(--support-error);
|
|
}
|
|
.warning {
|
|
--toast-accent: var(--support-warning);
|
|
}
|
|
.success {
|
|
--toast-accent: var(--support-success);
|
|
}
|
|
.info {
|
|
--toast-accent: var(--support-info);
|
|
}
|
|
|
|
@keyframes toast-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
|
|
.body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.title {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
color: var(--text);
|
|
}
|
|
|
|
.message {
|
|
margin: 0;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.detail {
|
|
margin-top: var(--space-1);
|
|
}
|
|
|
|
.detailSummary {
|
|
font-size: 12px;
|
|
color: var(--text-secondary);
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.detailText {
|
|
margin: var(--space-2) 0 0;
|
|
padding: var(--space-3);
|
|
font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
color: var(--text);
|
|
background: var(--layer-01);
|
|
border: var(--border-width) solid var(--border);
|
|
white-space: pre-wrap;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.detailMeta {
|
|
margin: var(--space-2) 0 0;
|
|
font-size: 11px;
|
|
color: var(--text-secondary);
|
|
}
|
|
|
|
.close {
|
|
flex: none;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: var(--radius);
|
|
background: transparent;
|
|
color: var(--text-secondary);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: background var(--dur-fast) var(--ease);
|
|
}
|
|
|
|
.close:hover {
|
|
background: var(--layer-01);
|
|
color: var(--text);
|
|
}
|
|
|
|
.close:focus-visible {
|
|
outline: 2px solid var(--focus);
|
|
outline-offset: 2px;
|
|
}
|