Changeset 0.37.2 (#214)

Co-authored-by: gobha <jasafpro@gmail.com> Co-committed-by: gobha <jasafpro@gmail.com>
2026-03-20 23:52:55 +00:00
parent 8c53f61b71
commit 4f1abc6321
24 changed files with 1775 additions and 25 deletions
--- a/src/css/sw-shell.css
+++ b/src/css/sw-shell.css
@@ -0,0 +1,109 @@
+/* ── Layer 1: AppShell layout ─────────────────
+   Full-viewport column layout with optional
+   fixed banners, announcement, surface, and footer.
+   ──────────────────────────────────────────── */
+
+.sw-shell {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    width: 100%;
+    overflow: hidden;
+    background: var(--bg);
+}
+
+/* ── Banner (fixed top / bottom — identical component) ── */
+
+.sw-shell__banner {
+    position: fixed;
+    left: 0;
+    right: 0;
+    z-index: 900;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    padding: 0.45rem 1rem;
+    font-size: 0.8rem;
+    font-weight: 500;
+}
+
+.sw-shell__banner--top    { top: 0; }
+.sw-shell__banner--bottom { bottom: 0; }
+
+.sw-shell__banner--info    { background: var(--accent-dim); color: var(--accent-light); }
+.sw-shell__banner--warn    { background: var(--warning-dim); color: var(--warning-light); }
+.sw-shell__banner--error   { background: var(--danger-dim); color: var(--danger-light); }
+.sw-shell__banner--success { background: var(--success-dim); color: var(--success-light); }
+
+.sw-shell__banner-text {
+    flex: 1;
+    text-align: center;
+}
+
+.sw-shell__banner-close {
+    background: none;
+    border: none;
+    color: inherit;
+    cursor: pointer;
+    font-size: 1.1rem;
+    padding: 0 0.3rem;
+    opacity: 0.7;
+    line-height: 1;
+}
+.sw-shell__banner-close:hover { opacity: 1; }
+
+/* ── Shell body — insets for fixed banners ─── */
+
+.sw-shell__body {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    overflow: hidden;
+    padding-top: var(--banner-top-height, 0px);
+    padding-bottom: var(--banner-bottom-height, 0px);
+}
+
+/* ── Announcement bar ─────────────────────── */
+
+.sw-shell__announcement {
+    flex-shrink: 0;
+    border-bottom: 1px solid var(--border);
+}
+
+.sw-shell__announcement-inner {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.6rem 1.25rem;
+    font-size: 0.85rem;
+}
+
+.sw-shell__announcement--info    { background: var(--bg-surface); color: var(--text-2); }
+.sw-shell__announcement--warn    { background: var(--warning-dim); color: var(--warning-light); }
+.sw-shell__announcement--error   { background: var(--danger-dim); color: var(--danger-light); }
+.sw-shell__announcement--success { background: var(--success-dim); color: var(--success-light); }
+
+.sw-shell__announcement-text {
+    flex: 1;
+}
+
+/* ── Surface (main content area) ──────────── */
+
+.sw-shell__surface {
+    flex: 1;
+    overflow: auto;
+    position: relative;
+}
+
+/* ── Footer ───────────────────────────────── */
+
+.sw-shell__footer {
+    flex-shrink: 0;
+    padding: 0.5rem 1rem;
+    border-top: 1px solid var(--border);
+    font-size: 0.75rem;
+    color: var(--text-3);
+    text-align: center;
+    background: var(--bg-surface);
+}