@omega.js/web 0.1.0

package/themes/classy/css/layout/_nav.scss

@@ -0,0 +1,154 @@
+// Classy v2 marketing nav — invisible over the hero, glassy after scroll.
+// The shared motion engine stamps data-omega-scrolled via
+// [data-omega-scroll-watch]; no theme JS involved.
+
+.omega-nav {
+  position: fixed;
+  inset-inline: 0;
+  top: 0;
+  z-index: 1030;
+  border-bottom: 1px solid transparent;
+  transition:
+    background-color var(--omega-speed) var(--omega-ease),
+    border-color var(--omega-speed) var(--omega-ease),
+    margin-top var(--omega-speed-slow) var(--omega-ease); // promo-banner push-down
+
+  &[data-omega-scrolled='true'] {
+    background: color-mix(in srgb, var(--omega-ground) 70%, transparent);
+    backdrop-filter: blur(18px) saturate(150%);
+    -webkit-backdrop-filter: blur(18px) saturate(150%);
+    border-bottom-color: var(--omega-line);
+  }
+
+  .navbar {
+    min-height: 4rem;
+    padding-block: 0.625rem;
+  }
+
+  // (brand lockup styles live at root scope below — the footer reuses them)
+
+  // ── Links ──────────────────────────────────────────────────────────────────
+  .omega-nav__link {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.4375rem 0.75rem;
+    font-size: 0.875rem;
+    font-weight: 550;
+    color: var(--omega-ink-muted);
+    text-decoration: none;
+    background: transparent;
+    border: 0;
+    border-radius: var(--omega-radius-s);
+    transition:
+      color var(--omega-speed) var(--omega-ease),
+      background-color var(--omega-speed) var(--omega-ease);
+
+    &:hover,
+    &:focus-visible {
+      color: var(--omega-ink);
+      background: var(--omega-surface-2);
+    }
+
+    &.active {
+      color: var(--omega-ink);
+    }
+  }
+
+  // Dropdown-toggle links: soften Bootstrap's caret so it reads as a hint
+  .omega-nav__link.dropdown-toggle::after {
+    margin-left: 0.375rem;
+    opacity: 0.45;
+    transform: translateY(1px);
+  }
+
+  // Every action control sits on the same 2.25rem line as the links
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    min-height: 2.25rem;
+    padding: 0.375rem 0.875rem;
+    font-size: 0.875rem;
+    font-weight: 600;
+  }
+
+  .dropdown-menu {
+    margin-top: 0.625rem;
+    min-width: 12rem;
+    padding: 0.375rem;
+  }
+
+  .navbar-toggler {
+    padding: 0.375rem 0.625rem;
+    color: var(--omega-ink);
+    background: var(--omega-surface);
+    border: 1px solid var(--omega-line-strong);
+    border-radius: var(--omega-radius-s);
+
+    &:focus {
+      box-shadow: 0 0 0 0.1875rem var(--omega-accent-ring);
+    }
+  }
+
+  // ── Mobile collapse panel ──────────────────────────────────────────────────
+  @media (max-width: 991.98px) {
+    background: color-mix(in srgb, var(--omega-ground) 86%, transparent);
+    backdrop-filter: blur(18px) saturate(150%);
+    -webkit-backdrop-filter: blur(18px) saturate(150%);
+    border-bottom-color: var(--omega-line);
+
+    .navbar-collapse {
+      margin-top: 0.625rem;
+      margin-bottom: 0.75rem;
+      padding: 0.75rem;
+      background: var(--omega-surface);
+      border: 1px solid var(--omega-line);
+      border-radius: var(--omega-radius-l);
+      box-shadow: var(--omega-shadow-2);
+    }
+
+    .omega-nav__link {
+      width: 100%;
+      padding-block: 0.625rem;
+    }
+
+    // Actions sit under a hairline, full width, real tap targets
+    .omega-nav__mobile-actions {
+      margin-top: 0.625rem;
+      padding-top: 0.75rem;
+      border-top: 1px solid var(--omega-line);
+
+      .btn {
+        justify-content: center;
+        min-height: 2.5rem;
+      }
+    }
+  }
+}
+
+// ── Brand lockup — shared by the marketing nav AND the footer ───────────────
+.omega-nav__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  font-size: 0.984375rem;
+  font-weight: 650;
+  letter-spacing: -0.015em;
+  color: var(--omega-ink);
+  text-decoration: none;
+
+  &:hover,
+  &:focus-visible {
+    color: var(--omega-ink);
+  }
+
+  img {
+    height: 1.625rem;
+    width: auto;
+    border-radius: var(--omega-radius-xs);
+  }
+}
+
+// Anything with an in-page anchor scrolls clear of the fixed nav
+[id] {
+  scroll-margin-top: 5rem;
+}

package/themes/classy/css/layout/_shell.scss

@@ -0,0 +1,458 @@
+// Classy v2 app shell skin — the GitBook/Laravel-Cloud pattern over the core
+// .omega-shell mechanics (core/css/shell/_index.scss): naked sidebar on the
+// gray canvas, and the ENTIRE content area (topbar + main) reading as ONE big
+// rounded surface card. The card is composed from matching margins + radii on
+// the two grid children — the core markup contract is untouched.
+
+$card-inset: 14px;
+$shell-breakpoint: 1200px; // keep in lockstep with the core shell cutover
+
+// ── Canvas + sidebar ─────────────────────────────────────────────────────────
+
+.omega-shell__sidebar {
+  background: transparent;
+  border-inline-end: 0;
+  padding: 0.75rem 0.75rem 0.875rem;
+}
+
+// ── The big content card (topbar = its cap, main = its body) ────────────────
+
+.omega-shell__topbar {
+  margin: $card-inset $card-inset 0 0;
+  padding-inline: 1.125rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-xl) var(--omega-radius-xl) 0 0;
+}
+
+.omega-shell__main {
+  margin: $card-inset $card-inset $card-inset 0;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-xl);
+}
+
+// With a topbar in the shell the card is composed from TWO children, so main
+// is only its body: the cap above supplies the top inset, the top frame and
+// the top corners. A page that turns the topbar off (`topbar.enabled: false`)
+// has no cap, so main is the whole card and keeps the full frame it declares
+// above ([#719]).
+.omega-shell:has(> .omega-shell__topbar) .omega-shell__main {
+  margin-top: 0;
+  border-top: 0;
+  border-radius: 0 0 var(--omega-radius-xl) var(--omega-radius-xl);
+}
+
+@media (max-width: ($shell-breakpoint - 0.02px)) {
+  // Drawer mode: the sidebar floats over the page, so it needs a real surface;
+  // the content card gets inset on all sides.
+  .omega-shell__sidebar {
+    background: var(--omega-surface);
+    border-inline-end: 1px solid var(--omega-line);
+  }
+
+  .omega-shell__topbar {
+    margin-inline-start: $card-inset;
+  }
+
+  .omega-shell__main {
+    margin-inline-start: $card-inset;
+  }
+}
+
+// Inside the card, panels sit on the surface — hairlines only.
+.omega-shell__main .card {
+  --bs-card-bg: var(--omega-surface);
+}
+
+// ── Sidebar internals ────────────────────────────────────────────────────────
+
+.omega-side__brand {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-height: 2.75rem;
+  padding: 0.25rem 0.625rem;
+  margin-bottom: 0.375rem;
+  font-size: 0.9375rem;
+  font-weight: 650;
+  letter-spacing: -0.015em;
+  color: var(--omega-ink);
+  text-decoration: none;
+
+  &:hover {
+    color: var(--omega-ink);
+  }
+
+  img {
+    width: 1.625rem;
+    height: 1.625rem;
+    border-radius: var(--omega-radius-xs);
+    object-fit: contain;
+    flex-shrink: 0;
+  }
+}
+
+// Project selector module (optional)
+.omega-side__selector {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  margin-bottom: 0.5rem;
+  text-align: start;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-m);
+  transition: border-color var(--omega-speed) var(--omega-ease);
+
+  &:hover {
+    border-color: var(--omega-line-strong);
+  }
+
+  .omega-side__selector-tile {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.875rem;
+    height: 1.875rem;
+    font-size: 0.8125rem;
+    font-weight: 650;
+    color: var(--omega-accent-ink);
+    background: var(--omega-accent);
+    border-radius: var(--omega-radius-s);
+    flex-shrink: 0;
+  }
+
+  .omega-side__selector-name {
+    font-size: 0.84375rem;
+    font-weight: 600;
+    color: var(--omega-ink);
+    line-height: 1.2;
+  }
+
+  .omega-side__selector-env {
+    font-size: 0.71875rem;
+    color: var(--omega-ink-faint);
+    line-height: 1.2;
+  }
+
+  .omega-side__selector-chevron {
+    margin-inline-start: auto;
+    color: var(--omega-ink-faint);
+  }
+}
+
+// Section micro-labels
+.omega-side__label {
+  display: block;
+  margin: 1.125rem 0 0.375rem;
+  padding-inline: 0.625rem;
+  font-size: 0.6875rem;
+  font-weight: 650;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--omega-ink-faint);
+}
+
+// Nav items — transparent border at rest so the ACTIVE state never shifts
+// geometry (binding constraint #5).
+.omega-side__item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  min-height: 2.125rem;
+  padding: 0.34375rem 0.625rem;
+  font-size: 0.84375rem;
+  font-weight: 550;
+  color: var(--omega-ink-muted);
+  text-align: start;
+  text-decoration: none;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--omega-radius-s);
+  transition:
+    color var(--omega-speed) var(--omega-ease),
+    background-color var(--omega-speed) var(--omega-ease),
+    border-color var(--omega-speed) var(--omega-ease);
+
+  .omega-side__icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.125rem;
+    color: var(--omega-ink-faint);
+    flex-shrink: 0;
+    transition: color var(--omega-speed) var(--omega-ease);
+  }
+
+  &:hover,
+  &:focus-visible {
+    color: var(--omega-ink);
+    background: color-mix(in srgb, var(--omega-surface) 72%, transparent);
+
+    .omega-side__icon {
+      color: var(--omega-ink-muted);
+    }
+  }
+
+  &.active {
+    color: var(--omega-ink);
+    background: var(--omega-surface);
+    border-color: var(--omega-line);
+
+    .omega-side__icon {
+      color: var(--omega-accent);
+    }
+  }
+
+  .omega-side__chip {
+    margin-inline-start: auto;
+  }
+
+  // Group chevron (rotates when expanded)
+  .omega-side__chevron {
+    margin-inline-start: auto;
+    color: var(--omega-ink-faint);
+    transition: transform var(--omega-speed) var(--omega-ease);
+  }
+
+  &[aria-expanded='true'] .omega-side__chevron {
+    transform: rotate(90deg);
+  }
+}
+
+// Nested group children — tree hairline under the parent icon column
+.omega-side__children {
+  margin: 0.125rem 0 0.25rem 1.0625rem;
+  padding-inline-start: 0.625rem;
+  border-inline-start: 1px solid var(--omega-line);
+  list-style: none;
+
+  .omega-side__item {
+    min-height: 1.875rem;
+    font-size: 0.8125rem;
+  }
+}
+
+// Sponsored slot (optional; sits above the user row)
+.omega-side__ad {
+  padding: 0.625rem;
+  margin-top: 0.75rem;
+  background: var(--omega-surface);
+  border: 1px solid var(--omega-line);
+  border-radius: var(--omega-radius-m);
+  font-size: 0.78125rem;
+  color: var(--omega-ink-muted);
+}
+
+// User row (bottom)
+.omega-side__user {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin-top: 0.75rem;
+  padding: 0.75rem 0.625rem 0;
+  border-top: 1px solid var(--omega-line);
+
+  .omega-side__user-name {
+    font-size: 0.8125rem;
+    font-weight: 600;
+    color: var(--omega-ink);
+    line-height: 1.2;
+  }
+
+  .omega-side__user-email {
+    font-size: 0.71875rem;
+    color: var(--omega-ink-faint);
+    line-height: 1.2;
+  }
+}
+
+// ── Rail collapse ────────────────────────────────────────────────────────────
+// Core hides every .omega-shell__label; classy centers what remains. Scoped
+// under __sidebar: omega-side__* is also the dialect of in-page rails (the
+// account section nav), which the sidebar collapse must never squish.
+
+.omega-shell[data-shell-collapsed='true'] .omega-shell__sidebar {
+  .omega-side__brand,
+  .omega-side__item {
+    justify-content: center;
+    padding-inline: 0;
+  }
+
+  .omega-side__selector {
+    justify-content: center;
+    padding: 0.5rem 0;
+  }
+
+  .omega-side__selector-chevron,
+  .omega-side__chevron,
+  .omega-side__chip,
+  .omega-side__ad,
+  .omega-side__children {
+    display: none;
+  }
+
+  .omega-side__user {
+    justify-content: center;
+    padding-inline: 0;
+  }
+}
+
+// The drawer always shows at full width with labels (mirrors the core rule).
+@media (max-width: ($shell-breakpoint - 0.02px)) {
+  .omega-shell[data-shell-collapsed='true'] .omega-shell__sidebar {
+    .omega-side__brand,
+    .omega-side__item {
+      justify-content: flex-start;
+      padding-inline: 0.625rem;
+    }
+
+    .omega-side__selector {
+      justify-content: flex-start;
+      padding: 0.5rem 0.625rem;
+    }
+
+    .omega-side__selector-chevron,
+    .omega-side__chevron,
+    .omega-side__chip,
+    .omega-side__ad,
+    .omega-side__children {
+      display: revert;
+    }
+
+    .omega-side__children {
+      display: block;
+    }
+
+    .omega-side__user {
+      justify-content: flex-start;
+      padding-inline: 0.625rem;
+    }
+  }
+}
+
+// ── Topbar internals ─────────────────────────────────────────────────────────
+
+.omega-topbar__crumbs {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--omega-ink);
+  white-space: nowrap;
+
+  .omega-topbar__crumb-sep {
+    color: var(--omega-ink-faint);
+    font-weight: 400;
+  }
+
+  a {
+    color: var(--omega-ink-muted);
+    text-decoration: none;
+
+    &:hover {
+      color: var(--omega-ink);
+    }
+  }
+}
+
+.omega-topbar__center {
+  display: none;
+  flex: 1;
+  justify-content: center;
+  padding-inline: 1rem;
+
+  @media (min-width: 768px) {
+    display: flex;
+  }
+}
+
+// ── In-card page header (backend/core/minimal) ──────────────────────────────
+
+.page-header {
+  .page-title {
+    font-size: 1.375rem;
+    font-weight: 650;
+    letter-spacing: -0.02em;
+  }
+
+  .breadcrumb {
+    --bs-breadcrumb-divider-color: var(--omega-ink-faint);
+
+    margin-bottom: 0;
+    font-size: 0.8125rem;
+
+    .breadcrumb-item {
+      color: var(--omega-ink-muted);
+
+      a {
+        color: var(--omega-ink-muted);
+        text-decoration: none;
+
+        &:hover {
+          color: var(--omega-ink);
+        }
+      }
+
+      &.active {
+        color: var(--omega-ink);
+        font-weight: 550;
+      }
+    }
+  }
+}
+
+// Iframe embedding: hide the app chrome entirely (kept from v1)
+html[data-iframed='true'] {
+  .omega-shell__sidebar,
+  .omega-shell__topbar,
+  .omega-shell__scrim,
+  .page-header {
+    display: none !important;
+  }
+
+  .omega-shell__main {
+    margin: 0 !important;
+    border: 0 !important;
+    border-radius: 0 !important;
+    padding: 0 !important;
+  }
+}
+
+// Viewport-locked pages manage their own interior scroll (kept from v1)
+#main-content.page-viewport-locked {
+  overflow: hidden !important;
+}
+
+.page-content-viewport-locked {
+  min-height: 0;
+  overflow: hidden;
+
+  > * {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-height: 0;
+  }
+
+  > * > .tab-content {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-height: 0;
+
+    > .tab-pane.active {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      min-height: 0;
+      overflow-x: hidden;
+      overflow-y: auto;
+    }
+  }
+}