ekklesiaandClaude Opus 5.5
89ef4b5ff6
CI / verify (pull_request) Successful in 1m12s
CI / infrastructure-smoke (pull_request) Successful in 37s
CI / package-release (pull_request) Successful in 51s
CI / migration-smoke (pull_request) Successful in 2m29s
CI / image-build (pull_request) Successful in 1m4s
CI / deploy-smoke (same-origin) (pull_request) Successful in 54s
CI / package-publication (pull_request) Successful in 58s
CI / deploy-smoke (split) (pull_request) Successful in 2m56s
The Settings foundation (ADR 0061):
- URL model. /settings is a real landing page. The platform sections
are /settings/general, /branding, /displays, and /system. Module
lifecycle is Discover: /settings/discover/browse, /installed, and
/updates. /settings/discover is respelled in place to Browse's one
canonical address. A module's settings are /settings/<module-id>,
never nested under Discover. Deeper Settings addresses are
reserved. "Modules" stays the user-facing word: "Discover modules",
"Installed modules", "Module updates".
- Collisions. Core's one reserved list gains the Settings section
names (branding, discover, displays, general, system) as a second
documented group, so no module id can shadow a section; `modules` is
an ordinary id. apps/api tests hold it equal to the shell's sections.
- Navigation. One Settings item in the same sidebar expands in place
into Platform and Modules (and Discover's three views) while in
Settings, and the phone drawer has the same hierarchy. The rest of
the navigation stays.
- Permissions. GET /api/v1/dashboard/settings evaluates, through
Core's evaluator, which destinations the viewer may see:
- Displays: core.devices.manage
- Discover: core.modules.lifecycle.manage
- a module's settings: core.modules.configuration.manage, for each
module that declares configuration (ADR 0029)
- General, Branding, System: the platform owner, until each has its
own permission
These are presentation hints; every data route keeps its own
enforcement. With nothing visible, there is no Settings link.
- Pages are honest placeholders with Back to Settings. A disabled
module's settings say it is turned off; a section or module the
person cannot see says so without detail; an unknown name is not
found; a failed load withholds the link and offers Retry.
- The deploy smoke opens Settings by deep link, refreshes a section,
enters Discover, opens the module's settings, uses the phone
drawer, and returns to the Dashboard.
Co-Authored-By: Claude Opus 5.5 <[email protected]>
259 lines
6.9 KiB
TypeScript
259 lines
6.9 KiB
TypeScript
import { designToken } from "@ekklesia/design-tokens";
|
|
|
|
/**
|
|
* The Dashboard shell's own stylesheet (ADR 0058): what inline styles cannot express — hover and
|
|
* `:focus-visible` — for the shell's navigation, account menu, tooltip, and drawer. Durations are
|
|
* motion tokens, so reduced motion needs no rule here (ADR 0060).
|
|
*
|
|
* Every value is a design token (ADR 0039), never a literal colour. Every class is `ek-shell-`
|
|
* prefixed, so nothing here can collide with `@ekklesia/ui`'s `ek-` elements, and it is installed
|
|
* into the shell's own document only: each module artifact still mounts in its own isolated root
|
|
* (ADR 0040), which this stylesheet cannot reach.
|
|
*/
|
|
export const SHELL_STYLESHEET = `
|
|
.ek-shell-visually-hidden {
|
|
border: 0;
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute;
|
|
white-space: nowrap;
|
|
width: 1px;
|
|
}
|
|
|
|
.ek-shell-sidebar {
|
|
background: ${designToken("background.canvas")};
|
|
border-right: ${designToken("border.width")} solid ${designToken("border.divider")};
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${designToken("spacing.md")};
|
|
height: 100vh;
|
|
height: 100dvh;
|
|
padding: ${designToken("spacing.md")};
|
|
position: sticky;
|
|
top: 0;
|
|
transition: width ${designToken("motion.duration-short")} ease;
|
|
}
|
|
|
|
.ek-shell-sidebar__top {
|
|
align-items: center;
|
|
display: flex;
|
|
gap: ${designToken("spacing.sm")};
|
|
justify-content: space-between;
|
|
min-height: ${designToken("control.height-md")};
|
|
}
|
|
|
|
.ek-shell-sidebar[data-sidebar="collapsed"] .ek-shell-sidebar__top {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.ek-shell-sidebar__scroll {
|
|
display: grid;
|
|
flex: 1 1 auto;
|
|
align-content: start;
|
|
gap: ${designToken("spacing.xl")};
|
|
min-height: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.ek-shell-sidebar__bottom {
|
|
border-top: ${designToken("border.width")} solid ${designToken("border.divider")};
|
|
padding-top: ${designToken("spacing.sm")};
|
|
position: relative;
|
|
}
|
|
|
|
.ek-shell-brand {
|
|
align-items: center;
|
|
color: ${designToken("text.primary")};
|
|
display: flex;
|
|
font-size: ${designToken("typography.size-md")};
|
|
font-weight: ${designToken("typography.weight-bold")};
|
|
gap: ${designToken("spacing.sm")};
|
|
min-width: 0;
|
|
}
|
|
|
|
.ek-shell-brand__mark {
|
|
background: ${designToken("accent.base")};
|
|
border-radius: ${designToken("radius.md")};
|
|
box-shadow: inset 0 0 0 ${designToken("border.width")} ${designToken("accent.active")};
|
|
display: block;
|
|
flex: 0 0 auto;
|
|
height: ${designToken("spacing.xl")};
|
|
width: ${designToken("spacing.xl")};
|
|
}
|
|
|
|
.ek-shell-nav,
|
|
.ek-shell-nav__group {
|
|
display: grid;
|
|
gap: ${designToken("spacing.2xs")};
|
|
}
|
|
|
|
.ek-shell-nav {
|
|
gap: ${designToken("spacing.lg")};
|
|
}
|
|
|
|
.ek-shell-nav__group-label {
|
|
color: ${designToken("text.muted")};
|
|
font-size: ${designToken("typography.size-xs")};
|
|
font-weight: ${designToken("typography.weight-medium")};
|
|
letter-spacing: 0.05em;
|
|
margin: 0 0 ${designToken("spacing.2xs")};
|
|
padding-inline: ${designToken("control.padding-inline")};
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.ek-shell-nav__nested {
|
|
border-inline-start: ${designToken("border.width")} solid ${designToken("border.divider")};
|
|
display: grid;
|
|
gap: ${designToken("spacing.xs")};
|
|
margin-block-start: ${designToken("spacing.xs")};
|
|
margin-inline-start: ${designToken("spacing.lg")};
|
|
padding-inline-start: ${designToken("spacing.xs")};
|
|
}
|
|
|
|
.ek-shell-nav__divider {
|
|
border-top: ${designToken("border.width")} solid ${designToken("border.divider")};
|
|
margin: 0 ${designToken("spacing.xs")};
|
|
}
|
|
|
|
.ek-shell-nav-item {
|
|
box-sizing: border-box;
|
|
gap: ${designToken("spacing.sm")};
|
|
height: auto;
|
|
justify-content: flex-start;
|
|
text-align: start;
|
|
}
|
|
|
|
.ek-shell-nav-item svg {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.ek-shell-nav-item__label {
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.ek-shell-sidebar[data-sidebar="collapsed"] .ek-shell-nav-item {
|
|
justify-content: center;
|
|
padding-inline: 0;
|
|
}
|
|
|
|
.ek-shell-settings-link {
|
|
align-items: center;
|
|
border-radius: ${designToken("radius.md")};
|
|
box-sizing: border-box;
|
|
color: ${designToken("text.primary")};
|
|
display: flex;
|
|
gap: ${designToken("spacing.md")};
|
|
padding: ${designToken("spacing.sm")} ${designToken("spacing.md")};
|
|
text-decoration: none;
|
|
}
|
|
|
|
.ek-shell-settings-link:hover {
|
|
background: ${designToken("state.hover-background")};
|
|
}
|
|
|
|
.ek-shell-settings-link:focus-visible {
|
|
outline: ${designToken("state.focus-visible-width")} solid ${designToken("accent.focus")};
|
|
outline-offset: ${designToken("state.focus-visible-offset")};
|
|
}
|
|
|
|
.ek-shell-settings-link svg {
|
|
color: ${designToken("text.secondary")};
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.ek-shell-settings-link__copy {
|
|
display: grid;
|
|
gap: ${designToken("spacing.2xs")};
|
|
min-width: 0;
|
|
}
|
|
|
|
.ek-shell-settings-link__label {
|
|
font-weight: ${designToken("typography.weight-medium")};
|
|
}
|
|
|
|
.ek-shell-settings-link__description {
|
|
color: ${designToken("text.secondary")};
|
|
font-size: ${designToken("typography.size-sm")};
|
|
}
|
|
|
|
.ek-shell-tooltip {
|
|
background: ${designToken("background.raised")};
|
|
border: ${designToken("border.width")} solid ${designToken("border.base")};
|
|
border-radius: ${designToken("radius.sm")};
|
|
box-shadow: ${designToken("shadow.md")};
|
|
color: ${designToken("text.primary")};
|
|
font-size: ${designToken("typography.size-xs")};
|
|
font-weight: ${designToken("typography.weight-medium")};
|
|
padding: ${designToken("spacing.2xs")} ${designToken("spacing.sm")};
|
|
position: fixed;
|
|
transform: translateY(-50%);
|
|
white-space: nowrap;
|
|
z-index: 30;
|
|
}
|
|
|
|
.ek-shell-menu {
|
|
background: ${designToken("background.raised")};
|
|
border: ${designToken("border.width")} solid ${designToken("border.base")};
|
|
border-radius: ${designToken("radius.md")};
|
|
box-shadow: ${designToken("shadow.md")};
|
|
bottom: calc(100% + ${designToken("spacing.xs")});
|
|
box-sizing: border-box;
|
|
display: grid;
|
|
gap: ${designToken("spacing.2xs")};
|
|
left: 0;
|
|
margin: 0;
|
|
min-width: 12rem;
|
|
padding: ${designToken("spacing.xs")};
|
|
position: absolute;
|
|
z-index: 20;
|
|
}
|
|
|
|
.ek-shell-menu__caption {
|
|
color: ${designToken("text.muted")};
|
|
font-size: ${designToken("typography.size-xs")};
|
|
margin: 0;
|
|
padding: ${designToken("spacing.2xs")} ${designToken("spacing.sm")};
|
|
}
|
|
|
|
.ek-shell-menu__item {
|
|
justify-content: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
.ek-shell-mobile-bar {
|
|
padding: ${designToken("spacing.sm")} ${designToken("spacing.md")} 0;
|
|
}
|
|
|
|
.ek-shell-drawer-backdrop {
|
|
background: ${designToken("background.overlay")};
|
|
inset: 0;
|
|
position: fixed;
|
|
z-index: 40;
|
|
}
|
|
|
|
.ek-shell-drawer {
|
|
background: ${designToken("background.canvas")};
|
|
box-shadow: ${designToken("shadow.lg")};
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${designToken("spacing.md")};
|
|
inset: 0 auto 0 0;
|
|
max-width: 85vw;
|
|
outline: none;
|
|
padding: ${designToken("spacing.md")};
|
|
position: fixed;
|
|
width: 20rem;
|
|
z-index: 41;
|
|
}
|
|
|
|
/* The sidebar's transition lasts a motion token, which is zero when motion is reduced (ADR 0060). */
|
|
`;
|