pgkiln 0.52.0 → 0.53.0

package/public/app.css

@@ -155,8 +155,8 @@ html[data-style="iris"][data-theme="dark"] {
   --hot: #ece9e6;
   --hot-text: #1a1817;
 }
-html[data-style="iris"] .t-header { box-shadow: inset 0 3px 0 var(--accent); }
-html[data-style="iris"] .t-nav { border-right-color: transparent; }
+html[data-style="iris"] .t-header { box-shadow: inset 0 3px 0 var(--strip, var(--accent)); }
+html[data-style="iris"] .t-nav { border-inline-end-color: transparent; }
 html[data-style="iris"] .t-titlebar { background: transparent; border-bottom: 0; padding: 1.25rem 1.5rem 0.25rem; }
 html[data-style="iris"] .t-titlebar h1 { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
 html[data-style="iris"] .region-header h2 { font-size: 1.05rem; }
@@ -225,7 +225,7 @@ html[data-style="lavender"][data-theme="dark"] {
   --shadow: 0 1px 2px rgb(0 0 0 / 30%), 0 2px 8px rgb(0 0 0 / 25%);
 }
 /* Lavender: rounded navigation pills instead of an edge bar, quieter region headers, pill-shaped primary buttons */
-html[data-style="lavender"] .t-nav a[aria-current="page"] { box-shadow: none; border-radius: calc(var(--radius) * 0.75); }
+html[data-style="lavender"] .t-nav a[aria-current="page"] { border-inline-start-color: transparent; border-radius: calc(var(--radius) * 0.75); }
 html[data-style="lavender"] .t-nav a, html[data-style="lavender"] .t-nav summary { border-radius: calc(var(--radius) * 0.75); }
 html[data-style="lavender"] .region-header { border-bottom-color: transparent; }
 html[data-style="lavender"] .region-header h2 { letter-spacing: -0.01em; }
@@ -243,8 +243,8 @@ h2 { font-size: 1rem; margin: 0; font-weight: 600; }
 .lead { font-size: 1.05rem; margin: 0; }
 [hidden] { display: none !important; }
 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
-.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--surface); padding: 0.5rem 1rem; }
-.skip-link:focus { left: 0.5rem; top: 0.5rem; }
+.skip-link { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 100; background: var(--surface); padding: 0.5rem 1rem; }
+.skip-link:focus { inset-inline-start: 0.5rem; top: 0.5rem; }
 .icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
 /* (0.31) icon modifiers, like Font APEX's: "users lg", "refresh spin", "truck flip-h success" */
 .icon.icon-xs { width: 0.75em; height: 0.75em; } .icon.icon-sm { width: 0.875em; height: 0.875em; }
@@ -285,15 +285,15 @@ details.menu { position: relative; }
 details.menu > summary { list-style: none; }
 details.menu > summary::-webkit-details-marker { display: none; }
 .menu-panel {
-  position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 240px;
+  position: absolute; z-index: 30; top: calc(100% + 6px); inset-inline-start: 0; min-width: 240px;
   background: var(--surface); color: var(--text); border: 1px solid var(--border);
   border-radius: var(--radius); box-shadow: 0 8px 24px rgb(16 24 40 / 16%); padding: 0.4rem 0;
   max-height: min(80vh, 42rem); overflow: auto;
 }
-.menu-panel.align-right, .actions-menu .menu-panel { left: auto; right: 0; }
+.menu-panel.align-right, .actions-menu .menu-panel { inset-inline-start: auto; inset-inline-end: 0; }
 .menu-section { padding: 0.5rem 0.9rem; display: flex; flex-direction: column; gap: 0.4rem; }
 .menu-section + .menu-section { border-top: 1px solid var(--border); }
-.menu-links a, .menu-links button { color: var(--text); text-decoration: none; padding: 0.2rem 0; display: flex; align-items: center; gap: 0.45rem; background: none; border: 0; font: inherit; cursor: pointer; text-align: left; }
+.menu-links a, .menu-links button { color: var(--text); text-decoration: none; padding: 0.2rem 0; display: flex; align-items: center; gap: 0.45rem; background: none; border: 0; font: inherit; cursor: pointer; text-align: start; }
 .menu-links a:hover, .menu-links button:hover { color: var(--accent); }
 .menu-links .icon { width: 1em; height: 1em; }
 .filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; min-width: 320px; }
@@ -308,21 +308,31 @@ details.menu > summary::-webkit-details-marker { display: none; }
   body.nav-collapsed .t-body { grid-template-columns: 0 minmax(0, 1fr); }
   body.nav-collapsed .t-nav { visibility: hidden; }
 }
-.t-nav { background: var(--nav-bg); border-right: 1px solid var(--border); overflow: hidden auto; }
+.t-nav { background: var(--nav-bg); border-inline-end: 1px solid var(--border); overflow: hidden auto; }
 .t-nav ul { list-style: none; margin: 0; padding: 0.5rem; }
-.t-nav ul ul { padding: 0 0 0 1.4rem; }
+/* (sprint 117) a subtree hangs on a guide line; the open trail's line in the accent */
+.t-nav ul ul { padding: 0; padding-inline-start: 0.35rem; margin-inline-start: 1.05rem; border-inline-start: 1px solid var(--nav-guide, color-mix(in srgb, var(--nav-text, var(--text)) 16%, transparent)); }
+.t-nav details:has(> summary.in-trail) > ul { border-inline-start-color: color-mix(in srgb, var(--nav-current, var(--accent)) 55%, transparent); }
 .t-nav a, .t-nav summary {
   display: flex; align-items: center; gap: 0.65rem; padding: 0.5rem 0.65rem; border-radius: 6px;
+  /* (sprint 117) the bar at the inline start (left, or right in RTL) marks the current page */
+  border-inline-start: 3px solid transparent; padding-inline-start: calc(0.65rem - 3px);
   color: var(--nav-text, var(--text)); text-decoration: none; cursor: pointer; white-space: nowrap; font-size: 0.93rem;
 }
 .t-nav summary { list-style: none; }
 .t-nav summary::-webkit-details-marker { display: none; }
-.t-nav summary::after { content: "›"; margin-left: auto; color: var(--nav-muted, var(--muted)); transition: transform 0.15s; }
+.t-nav summary::after { content: "›"; margin-inline-start: auto; color: var(--nav-muted, var(--muted)); transition: transform 0.15s; }
 .t-nav details[open] > summary::after { transform: rotate(90deg); }
+/* RTL: the bidi algorithm mirrors "›" to "‹"; opened, it turns the other way to point down */
+[dir="rtl"] .t-nav details[open] > summary::after { transform: rotate(-90deg); }
 .t-nav a:hover, .t-nav summary:hover { background: var(--nav-hover, var(--surface-3)); }
-/* (sprint 72) --nav-* let a style have a dark menu (Iris); without them the menu takes the page's colours */
-.t-nav a[aria-current="page"] { background: var(--nav-active); color: var(--nav-current, var(--accent)); font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }
-.t-nav .in-trail { color: var(--nav-current, var(--accent)); }
+/* (sprint 117) the selected entry (keyboard focus) gets a ring inside the menu, which scrolls and would clip one outside */
+.t-nav a:focus-visible, .t-nav summary:focus-visible { outline: 2px solid var(--nav-current, var(--accent)); outline-offset: -2px; }
+/* (sprint 72) --nav-* let a style have a dark menu (Iris); without them the menu takes the page's colours.
+   (sprint 117) Current page: filled, the accent bar and text. Its parent entries (the trail): bold, the menu's text
+   colour with an accent icon, no fill, so the two are told apart at a glance. */
+.t-nav a[aria-current="page"] { background: var(--nav-active); color: var(--nav-current, var(--accent)); font-weight: 600; border-inline-start-color: var(--accent); }
+.t-nav .in-trail { color: var(--nav-text, var(--text)); font-weight: 600; }
 .t-nav .icon { color: var(--nav-muted, var(--muted)); }
 .t-nav a[aria-current="page"] .icon, .t-nav .in-trail .icon { color: var(--nav-current, var(--accent)); }
 
@@ -440,7 +450,8 @@ textarea.code { font-family: var(--mono); font-size: 0.84rem; line-height: 1.45;
 .has-error input, .has-error select, .has-error textarea { border-color: var(--danger); }
 .error { color: var(--danger); font-size: 0.82rem; font-weight: 500; }
 .default-submit { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
-[aria-busy="true"] { opacity: 0.55; transition: opacity 0.1s; }
+/* (sprint 117) a lighter processing indicator: a slight dim after 150 ms (no flicker on quick answers), a bar on regions (below) */
+[aria-busy="true"] { opacity: 0.8; cursor: progress; transition: opacity 0.2s ease 0.15s; }
 
 /* ---------- buttons ---------- */
 .buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
@@ -902,10 +913,11 @@ pre.source { font-family: var(--mono); font-size: 0.82rem; background: var(--sur
   .t-body { grid-template-columns: minmax(0, 1fr); }
   /* Drawer: opened by JS (body.nav-open) or, without JS, by the #t-nav link (:target). */
   .t-nav {
-    position: fixed; z-index: 25; top: 52px; bottom: 0; left: 0; width: min(300px, 85vw);
+    position: fixed; z-index: 25; top: 52px; bottom: 0; inset-inline-start: 0; width: min(300px, 85vw);
     box-shadow: 8px 0 24px rgb(0 0 0 / 20%); transition: transform 0.2s ease, visibility 0.2s;
     transform: translateX(-100%); visibility: hidden;
   }
+  [dir="rtl"] .t-nav { transform: translateX(100%); box-shadow: -8px 0 24px rgb(0 0 0 / 20%); }
   body.nav-open .t-nav, .t-nav:target { transform: none; visibility: visible; }
   body.nav-open .t-nav-backdrop { display: block; position: fixed; inset: 52px 0 0 0; z-index: 24; background: rgb(15 20 30 / 40%); }
   .t-regions > .region { grid-column: span 12 !important; }
@@ -950,7 +962,7 @@ pre.source { font-family: var(--mono); font-size: 0.82rem; background: var(--sur
   .report-reflow tbody tr:hover { background: var(--surface); }
   .report-reflow td {
     display: grid; grid-template-columns: minmax(90px, 38%) minmax(0, 1fr); gap: 0.75rem;
-    border: 0; padding: 0.3rem 0.8rem; white-space: normal; max-width: none; text-align: left !important; overflow-wrap: anywhere;
+    border: 0; padding: 0.3rem 0.8rem; white-space: normal; max-width: none; text-align: start !important; overflow-wrap: anywhere;
   }
   .report-reflow td::before { content: attr(data-label); font-size: 0.8rem; font-weight: 650; color: var(--muted); }
   .report-reflow td.row-edit { width: auto; text-align: left; }
@@ -992,14 +1004,14 @@ fieldset.prop-group > legend { font-size: 0.75rem; text-transform: uppercase; le
   body.nav-top .t-body { display: block; }
   body.nav-top .t-nav {
     position: sticky; top: 52px; z-index: 18; visibility: visible; overflow: visible;
-    border-right: 0; border-bottom: 1px solid var(--border);
+    border-inline-end: 0; border-bottom: 1px solid var(--border);
   }
   body.nav-top .t-nav > ul { display: flex; gap: 0.25rem; padding: 0.3rem 0.75rem; }
   body.nav-top .t-nav li { position: relative; }
-  body.nav-top .t-nav > ul > li > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); }
+  body.nav-top .t-nav > ul > li > a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--accent); border-inline-start-color: transparent; }
   body.nav-top .t-nav details > ul {
-    position: absolute; top: calc(100% + 4px); left: 0; min-width: 220px; padding: 0.4rem;
-    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(16 24 40 / 16%);
+    position: absolute; top: calc(100% + 4px); inset-inline-start: 0; margin: 0; min-width: 220px; padding: 0.4rem;
+    background: var(--nav-bg, var(--surface)); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgb(16 24 40 / 16%);
   }
   body.nav-top .t-nav details > summary::after { transform: rotate(90deg); }
 }
@@ -2085,6 +2097,68 @@ dialog.wait-popup { border: 1px solid var(--border); border-radius: var(--radius
 dialog.wait-popup[open] { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
 dialog.wait-popup:focus { outline: none; }
 dialog.wait-popup::backdrop { background: rgb(15 20 30 / 35%); cursor: wait; }
-.wait-popup-spinner { width: 2rem; height: 2rem; border-radius: 50%; border: 3px solid var(--border); border-top-color: var(--accent); }
+.wait-popup-spinner { width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 2.5px solid color-mix(in srgb, var(--accent) 18%, transparent); border-top-color: var(--accent); }
 .wait-popup-text { margin: 0; text-align: center; overflow-wrap: anywhere; }
-@media (prefers-reduced-motion: no-preference) { .wait-popup-spinner { animation: icon-spin 0.9s linear infinite; } }
+@media (prefers-reduced-motion: no-preference) { .wait-popup-spinner { animation: icon-spin 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; } }
+
+/* ---------- (sprint 117, APEX 26.2) Pillar Light / Pillar Dark navigation appearances ----------
+   body.nav-pillar + nav-pillar-light / nav-pillar-dark (theme.appearance or a Theme Roller style's,
+   src/runtime/styles.ts). Header and menu read as one column ("pillar"); a header pillar strip in
+   --strip (Theme Roller), else the accent; the current page is a filled pill in the accent, its
+   parents bold with an accent guide line. Light: the page's own surfaces (dark ones in dark mode).
+   Dark: header and menu in the header colour. Contrast: menu text ≥ 7:1, the pill's text ≥ 4.5:1. */
+body.nav-pillar .t-header { box-shadow: inset 0 4px 0 var(--strip, var(--accent)); }
+body.nav-pillar .t-nav a, body.nav-pillar .t-nav summary { border-radius: 999px; }
+body.nav-pillar .t-nav a[aria-current="page"] { background: var(--accent); color: var(--accent-text); border-inline-start-color: transparent; }
+body.nav-pillar .t-nav a[aria-current="page"] .icon { color: var(--accent-text); }
+body.nav-pillar .t-nav a:focus-visible, body.nav-pillar .t-nav summary:focus-visible { outline-color: var(--nav-text); }
+body.nav-pillar-light {
+  --header: var(--surface-2); --header-text: var(--text);
+  --nav-bg: var(--surface-2); --nav-text: var(--text); --nav-muted: var(--muted);
+  --nav-hover: var(--surface-3); --nav-active: var(--accent-soft); --nav-current: var(--accent);
+}
+body.nav-pillar-light .t-header { border-bottom: 1px solid var(--border); }
+body.nav-pillar-light .t-nav { border-inline-end-color: var(--border); }
+body.nav-pillar-light .icon-button:hover, body.nav-pillar-light .t-user > summary:hover,
+body.nav-pillar-light .t-navbar > ul > li > a:hover, body.nav-pillar-light .t-navbar > ul > li > details > summary:hover { background: var(--surface-3); }
+body.nav-pillar-light .t-navbar a[aria-current="page"] { background: var(--accent-soft); }
+body.nav-pillar-dark {
+  --nav-bg: var(--header); --nav-text: var(--header-text);
+  --nav-muted: color-mix(in srgb, var(--header-text) 72%, var(--header));
+  --nav-hover: color-mix(in srgb, var(--header) 86%, #ffffff); --nav-active: color-mix(in srgb, var(--header) 76%, #ffffff);
+  --nav-current: var(--header-text);
+  --nav-guide: color-mix(in srgb, var(--header-text) 22%, transparent);
+}
+body.nav-pillar-dark .t-nav { border-inline-end-color: transparent; }
+body.nav-pillar-dark .t-nav .in-trail .icon, body.nav-pillar-dark .t-nav a[aria-current="page"] .icon { color: inherit; }
+body.nav-pillar-dark .t-nav details:has(> summary.in-trail) > ul { border-inline-start-color: color-mix(in srgb, var(--strip, var(--accent)) 70%, var(--header-text)); }
+@media (min-width: 1024px) {
+  body.nav-pillar.nav-top .t-nav > ul > li > a[aria-current="page"] { box-shadow: none; }
+  body.nav-pillar-dark.nav-top .t-nav { border-bottom-color: transparent; }
+}
+
+/* ---------- (sprint 117, APEX 26.2) subtle colour utilities: a tinted background with readable text,
+   in light and dark mode (text mostly the page's text colour, so contrast holds for every hue).
+   u-color-1-subtle … u-color-15-subtle and u-color-{success,danger,warning,info,neutral}-subtle. */
+[class*="-subtle"][class*="u-color-"] {
+  background: color-mix(in srgb, var(--u-hue) 14%, var(--surface)); color: color-mix(in srgb, var(--u-hue) 38%, var(--text));
+  border-color: color-mix(in srgb, var(--u-hue) 32%, var(--surface));
+}
+.u-color-1-subtle { --u-hue: #309fdb; } .u-color-2-subtle { --u-hue: #13b6cf; } .u-color-3-subtle { --u-hue: #2ebfbc; }
+.u-color-4-subtle { --u-hue: #3caf85; } .u-color-5-subtle { --u-hue: #81bb5f; } .u-color-6-subtle { --u-hue: #c9cf1f; }
+.u-color-7-subtle { --u-hue: #f2bf2c; } .u-color-8-subtle { --u-hue: #f18b48; } .u-color-9-subtle { --u-hue: #e95b54; }
+.u-color-10-subtle { --u-hue: #e85d88; } .u-color-11-subtle { --u-hue: #ca589d; } .u-color-12-subtle { --u-hue: #8f5ea8; }
+.u-color-13-subtle { --u-hue: #5a68ad; } .u-color-14-subtle { --u-hue: #627c94; } .u-color-15-subtle { --u-hue: #8a7a6b; }
+.u-color-success-subtle { --u-hue: var(--success); } .u-color-danger-subtle { --u-hue: var(--danger); }
+.u-color-warning-subtle { --u-hue: #d18b00; } .u-color-info-subtle { --u-hue: var(--accent); } .u-color-neutral-subtle { --u-hue: var(--muted); }
+
+/* ---------- (sprint 117) the processing bar on a busy region (dynamic actions, refreshes) */
+.region[aria-busy="true"] { position: relative; }
+.region[aria-busy="true"]::after {
+  content: ""; position: absolute; z-index: 2; top: 0; inset-inline: 0; height: 3px; border-radius: var(--radius) var(--radius) 0 0; pointer-events: none;
+  background: linear-gradient(90deg, transparent, var(--accent), transparent) 0 0 / 40% 100% no-repeat, color-mix(in srgb, var(--accent) 15%, transparent);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .region[aria-busy="true"]::after { animation: busy-slide 1.2s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; }
+}
+@keyframes busy-slide { from { background-position: -60% 0, 0 0; } to { background-position: 160% 0, 0 0; } }

package/public/builder.css

@@ -1016,6 +1016,30 @@ button.is-busy { opacity: 0.7; cursor: progress; }
 .tr-preview .btn { background: var(--surface); color: var(--text); border-color: var(--border); border-radius: calc(var(--radius) * 0.75); font: inherit; }
 .tr-preview .btn-hot { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
 .tr-preview-lavender .btn-hot { border-radius: 999px; }
+/* (sprint 117) the preview's menu: current page, its parent, and the Pillar Light / Dark appearances */
+.tr-preview { --nav-bg: var(--surface); --nav-text: var(--text); --nav-active: var(--accent-soft); --nav-current: var(--accent); }
+.tr-preview-iris { --nav-bg: #2f2b28; --nav-text: #ece8e4; --nav-active: #4a443f; --nav-current: #ffffff; }
+.tr-preview-main { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); }
+.tr-preview-nav, .tr-preview-nav ul { list-style: none; margin: 0; padding: 0; }
+.tr-preview-nav { padding: 0.5rem; background: var(--nav-bg); color: var(--nav-text); border-inline-end: 1px solid var(--border); font-size: 0.85rem; }
+.tr-preview-nav ul { margin-inline-start: 0.9rem; padding-inline-start: 0.3rem; border-inline-start: 1px solid color-mix(in srgb, var(--nav-current) 55%, transparent); }
+.tr-preview-nav span { display: flex; align-items: center; gap: 0.4rem; }
+.tr-preview-nav li > span { padding: 0.3rem 0.5rem; border-radius: 6px; border-inline-start: 3px solid transparent; }
+.tr-preview-nav .icon { width: 1em; height: 1em; }
+.tr-preview-nav .tr-nav-parent { font-weight: 600; }
+.tr-preview-nav .tr-nav-parent .icon { color: var(--nav-current); }
+.tr-preview-nav .tr-nav-current { background: var(--nav-active); color: var(--nav-current); font-weight: 600; border-inline-start-color: var(--accent); }
+.tr-preview[data-appearance^="pillar"] .tr-preview-header { box-shadow: inset 0 4px 0 var(--strip, var(--accent)); }
+.tr-preview[data-appearance^="pillar"] .tr-preview-nav li > span { border-radius: 999px; }
+.tr-preview[data-appearance^="pillar"] .tr-nav-current { background: var(--accent); color: var(--accent-text); border-inline-start-color: transparent; }
+.tr-preview[data-appearance="pillar_light"] { --header: var(--surface-2); --header-text: var(--text); --nav-bg: var(--surface-2); --nav-text: var(--text); --nav-current: var(--accent); }
+.tr-preview[data-appearance="pillar_light"] .tr-preview-header { border-bottom: 1px solid var(--border); }
+.tr-preview[data-appearance="pillar_dark"] { --nav-bg: var(--header); --nav-text: var(--header-text); --nav-current: var(--header-text); }
+.tr-preview[data-appearance="pillar_dark"] .tr-preview-nav { border-inline-end-color: transparent; }
+@media (max-width: 640px) {
+  .tr-preview-main { grid-template-columns: minmax(0, 1fr); }
+  .tr-preview-nav { border-inline-end: 0; border-bottom: 1px solid var(--border); }
+}
 
 /* icon picker (forms.ts iconPicker) */
 .icon-picker > summary { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 34px; padding: 0.3rem 0.6rem; border: 1px solid var(--border); border-radius: 6px; cursor: pointer; list-style: none; background: var(--surface); }
@@ -1274,6 +1298,13 @@ details.prop-group-more[open] > summary { margin-bottom: 8px; }
 .dbu-members { max-height: 16rem; overflow: auto; }
 .dbu-schemas .te-c { text-align: center; width: 1%; white-space: nowrap; }
 .dbu-sql { white-space: pre-wrap; overflow-wrap: anywhere; }
+/* (sprint 119) a table's Security: roles × columns and masks */
+.ds-section { margin-block: 1.25rem; }
+.ds-section h2 { display: flex; align-items: center; gap: 0.4rem; }
+.ds-table .ds-cell .check { display: flex; white-space: nowrap; margin: 0; }
+.ds-table .ds-c { text-align: center; width: 1%; }
+.ds-table th code { white-space: nowrap; }
+.ds .source { white-space: pre-wrap; overflow-wrap: anywhere; }
 .dbu-list td { white-space: normal; overflow: visible; max-width: 24rem; }
 .dbu-list td .tag { margin: 0.1rem 0; }
 .dbu-facts { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin: 0; }
@@ -1475,3 +1506,22 @@ pre.wrap-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
 .team-page-issues .icon { flex: none; width: 14px; height: 14px; margin-top: 2px; }
 .wh-team-n { margin-left: auto; padding-left: 8px; }
 .feedback-issue { margin: 4px 0; }
+
+/* (116) App Builder list: updated by, working copies and the application lock (WS-12) */
+.ab-name .ab-lock { display: inline-flex; vertical-align: middle; margin-left: 8px; color: var(--muted); }
+.ab-name .ab-lock .icon { width: 15px; height: 15px; }
+.ab-by { overflow-wrap: anywhere; }
+.ab-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }
+.ab-card-badges .tag { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; text-decoration: none; }
+.ab-card-badges .tag .icon { width: 13px; height: 13px; flex: none; }
+/* (sprint 118) Administration → Mail queue, Network access */
+.mail-queue-filters { display: flex; flex-wrap: wrap; gap: 0 12px; align-items: flex-end; margin-bottom: 12px; }
+.mail-queue-filters .field { min-width: 0; flex: 1 1 160px; max-width: 260px; }
+.mail-queue-stats { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
+.mail-queue-stats .stat b { font-size: 1.3rem; }
+.stat.stat-bad b { color: var(--danger, #b42318); }
+.inline-form { display: inline; margin: 0; }
+.mail-failures .buttons { flex-wrap: wrap; gap: 6px; }
+.mail-answer { overflow-wrap: anywhere; font-family: var(--font-mono, monospace); font-size: 0.85em; }
+.host-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
+.host-list code { overflow-wrap: anywhere; }

package/public/builder.js

@@ -823,6 +823,10 @@
       set('--font', from(lists.fonts, form.elements.font?.value));
       set('--font-size', from(lists.sizes, form.elements.font_size?.value));
       set('--radius', from(lists.radii, form.elements.radius?.value));
+      // (sprint 117) the navigation appearance ('' = the application's, 'default' = none) and the header strip
+      const ap = form.elements.appearance?.value ?? '';
+      preview.dataset.appearance = ap === 'default' ? '' : ap || preview.dataset.trAppAppearance || '';
+      set('--strip', own('strip') ? hex(form.elements.strip?.value) : '');
     };
     form.addEventListener('input', update);
     form.addEventListener('change', update);

package/src/app.ts

@@ -39,6 +39,7 @@ import { reportSettingsRoutes } from './builder/report-settings.ts';
 import { layoutRoutes } from './builder/layouts.ts';
 import { dataLoadRoutes } from './builder/dataload.ts';
 import { builderRoutes } from './builder/routes.ts';
+import { appUpdateHooks } from './builder/app-updates.ts';
 import { dbUserRoutes } from './builder/db-users.ts';
 import { dataPumpRoutes } from './builder/datapump.ts';
 import { schedulingRoutes } from './builder/scheduling.ts';
@@ -86,6 +87,10 @@ import { workspaceBackupRoutes } from './builder/workspace-backups.ts';
 import { restCatalogRoutes } from './builder/rest-catalogs.ts';
 import { workspaceTransferRoutes } from './builder/workspace-transfer.ts';
 import { findWorkspaceRoutes } from './builder/find-workspace.ts';
+// (sprint 118) Administration → Mail queue, Network access; a workspace's own mail service
+import { mailQueueRoutes } from './builder/mail-queue.ts';
+import { networkAccessRoutes } from './builder/network-access.ts';
+import { workspaceMailRoutes } from './builder/workspace-mail.ts';
 import { runtimeScope } from './db.ts';
 
 export async function buildApp(opts: { logger?: boolean } = {}) {
@@ -158,6 +163,7 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
     return reply.send(err);
   });
   builderErrorPages(app);
+  appUpdateHooks(app); // (116) who changed an application last
   await app.register(cookie);
   await app.register(formbody, { bodyLimit: 5 * 1024 * 1024 });
   // file upload items; oversized files are cut off and reported, not thrown
@@ -257,6 +263,9 @@ export async function buildApp(opts: { logger?: boolean } = {}) {
   await app.register(blueprintRoutes);
   await app.register(workspaceHomeRoutes);
   await app.register(teamRoutes);
+  await app.register(mailQueueRoutes);
+  await app.register(networkAccessRoutes);
+  await app.register(workspaceMailRoutes);
   app.get('/', async (_req, reply) => reply.redirect('/builder/home'));
   return app;
 }

package/src/builder/app-updates.ts

@@ -0,0 +1,55 @@
+import type { FastifyInstance, FastifyRequest } from 'fastify';
+import { owner } from '../db.ts';
+import type { Session } from '../session.ts';
+import { BASE } from './ui.ts';
+
+// (sprint 116, WS-12) Who changed an application last: the App Builder list's
+// Updated by (APEX: Applications report, Updated By). developer() notes a
+// builder POST under /apps/:id or /pages/:pid that passed its checks; after
+// the handler, a success (status below 400) records the developer and the
+// time in meta.app_change (migration 125). A Create or Import that redirects
+// to the new application records it too. A redirect with an error message,
+// locks, comments and actions that change nothing are not changes.
+
+/** Builder POSTs under an application that don't change it. */
+const NOT_A_CHANGE = /^\/apps\/\d+\/(lock|unlock|comments(\/\d+\/delete)?|feedback\/\d+|mail\/\d+\/(cancel|retry)|pwa\/push-test|rest-sources\/\d+\/test|shared\/automation\/\d+\/run|working-copies)$|^\/pages\/\d+\/region\/\d+\/ai-filter$/;
+/** Builder POSTs that create an application and redirect to it. */
+const CREATES = /^\/(apps|import|create(\/[a-z]+(\/\d+)?)?|gallery\/(samples|starters)\/[\w-]+|blueprints\/create|working-copies)$/;
+
+const noted = new WeakMap<FastifyRequest, { appId: number | null; s: Session & { username: string }; error: unknown }>();
+
+/** Called by developer() for a POST that may change an application (appId) or create one (null). */
+export function noteChange(req: FastifyRequest, s: Session & { username: string }, appId: number | null) {
+  const rel = req.url.split('?')[0].slice(BASE.length);
+  if (appId !== null ? NOT_A_CHANGE.test(rel) : !CREATES.test(rel)) return;
+  // an error message of an earlier request may still wait to be shown: only a new one is a refusal
+  noted.set(req, { appId, s, error: s.state.__ERROR });
+}
+
+/** Record the change after a successful response. */
+export async function recordChange(appId: number, username: string) {
+  await owner.query(
+    `insert into meta.app_change (app_id, updated_by, updated_at) select id, $2, now() from meta.app where id = $1
+     on conflict (app_id) do update set updated_by = excluded.updated_by, updated_at = excluded.updated_at`,
+    [appId, username.slice(0, 200)],
+  );
+}
+
+export function appUpdateHooks(app: FastifyInstance) {
+  // onSend, not onResponse: recorded before the response goes out, so the next request sees it
+  app.addHook('onSend', async (req, reply, payload) => {
+    const n = noted.get(req);
+    // a refusal: an error status, or a redirect with an error message (flash(s, …, 'error'))
+    if (!n || reply.statusCode >= 400 || (n.s.state.__ERROR && n.s.state.__ERROR !== n.error)) return payload;
+    noted.delete(req);
+    let appId = n.appId;
+    if (appId === null) {
+      // a Create or Import: the application it redirected to
+      const m = reply.statusCode >= 300 && reply.statusCode < 400 ? new RegExp(`^${BASE}/apps/(\\d{1,9})(?:[/?#]|$)`).exec(String(reply.getHeader('location') ?? '')) : null;
+      if (!m) return payload;
+      appId = Number(m[1]);
+    }
+    await recordChange(appId, n.s.username).catch((err) => req.log.warn({ err }, 'app_change not recorded'));
+    return payload;
+  });
+}

package/src/builder/data-security.ts

@@ -0,0 +1,182 @@
+import type { FastifyInstance, FastifyReply } from 'fastify';
+import { html, raw, type Raw } from '../html.ts';
+import { icon } from '../icons.ts';
+import { owner } from '../db.ts';
+import { clientIp, logActivity, type Session } from '../session.ts';
+import { back, BASE, csrf, developer, flash, send, shell, workshopTabs, type Body, type Req } from './ui.ts';
+import { SYSTEM_SCHEMAS } from './object-browser.ts';
+import { clearCompletions } from './code-editor.ts';
+import { roleHints, splitRoles } from './users.ts';
+import { currentWorkspace, inWorkspaceSql, usableSchemas, workshopDb } from './workspaces.ts';
+import { joinStatements, recordChanges } from '../changelog.ts';
+import {
+  APP_ROLE_RE, checkSecurity, currentDef, MASK_LABELS, MASKS, maskedColumns, readSecurity, securitySql, sees,
+  type ColumnMask, type SecurityDef, type TableSecurity,
+} from '../datasec.ts';
+
+// (sprint 119, WS-13: data security per table) SQL Workshop › Object Browser › a table › Security: the table's row
+// level security policies, a matrix of database roles × columns (read, update) and masked values per application
+// role, in one form. Preview SQL shows the GRANT / REVOKE statements and the masking view (src/datasec.ts); Apply runs
+// them in one transaction with the workshop's connection and records a change set; Open in the worksheet puts them
+// there. Like Table Properties, the statements are made against the catalog as it is at the time of the post.
+
+/** The workspace's applications with a database role, and the application roles they check. */
+async function workspaceApps(s: Session) {
+  const apps = (await owner.query<{ id: number; alias: string; role: string }>(
+    `select a.id, a.alias, a.db_role as role from meta.app a where a.db_role is not null and ${inWorkspaceSql('a', 1)} order by a.alias`,
+    [currentWorkspace(s)])).rows;
+  const hints = await roleHints(apps.map((a) => a.id));
+  const appRoles = [...new Set([...hints.values()].flat().map((h) => h.role))].filter((r) => APP_ROLE_RE.test(r));
+  return { appDbRoles: apps.map((a) => ({ role: a.role, alias: a.alias })), appRoles };
+}
+
+/** The definition the form posted. Grant rows and columns are matched by index against the catalog's state. */
+function fromForm(b: Body, cur: TableSecurity): SecurityDef {
+  const on = (k: string) => b[k] === 'on';
+  const all = cur.columns.map((c) => c.name);
+  const grants = cur.grants.map((g, i) => ({
+    role: g.role,
+    select: all.filter((_, j) => on(`g.${i}.s.${j}`)),
+    update: all.filter((_, j) => on(`g.${i}.u.${j}`)),
+  }));
+  // the roles the matrix's checkboxes were drawn for (a changed list applies after the next Preview)
+  const shown = splitRoles(String(b.shown_roles ?? ''));
+  const roles = splitRoles(String(b.roles ?? ''));
+  const cols: Record<string, ColumnMask> = {};
+  all.forEach((c, j) => {
+    const mask = MASKS.find((m) => m === b[`m.${j}.mask`]);
+    if (!mask) return;
+    cols[c] = { mask, others: on(`m.${j}.others`), see: shown.filter((r, k) => roles.includes(r) && on(`m.${j}.see.${k}`)) };
+  });
+  return {
+    grants,
+    view: { enabled: on('view'), name: String(b.view_name ?? '').trim(), roles, cols },
+  };
+}
+
+function form(s: Session, cur: TableSecurity, def: SecurityDef, opts: { ref: string; sql: string[]; warnings: string[]; errors: string[]; output: Raw | '' }): Raw {
+  const chk = (x: boolean) => (x ? raw(' checked') : '');
+  const all = cur.columns.map((c) => c.name);
+  const v = def.view;
+  const masked = new Set(maskedColumns(v));
+  const objUrl = `${BASE}/sql/objects?${new URLSearchParams({ schema: cur.schema, k: 'table', o: opts.ref })}`;
+  const policyUrl = `${BASE}/sql/objects/action?${new URLSearchParams({ schema: cur.schema, k: 'table', o: opts.ref, do: 'policy' })}`;
+  const rows = html`<div class="table-wrap"><table class="report ds-table"><caption class="sr-only">Database roles and columns</caption>
+    <thead><tr><th scope="col">Database role</th>${all.map((c) => html`<th scope="col"><code>${c}</code>${masked.has(c) ? html` <span class="badge" title="Masked in ${v.name}">masked</span>` : ''}</th>`)}</tr></thead>
+    <tbody>${cur.grants.length ? def.grants.map((g, i) => {
+      const info = cur.grants[i];
+      return html`<tr><th scope="row"><code>${g.role === 'PUBLIC' ? 'PUBLIC' : g.role}</code>${info.apps.length ? html`<br><small class="muted">runs ${info.apps.join(', ')}</small>` : ''}</th>
+        ${all.map((c, j) => html`<td class="ds-cell"><label class="check"><input type="checkbox" name="g.${i}.s.${j}"${chk(g.select.includes(c))}> read</label>
+          <label class="check"><input type="checkbox" name="g.${i}.u.${j}"${chk(g.update.includes(c))}> update</label></td>`)}</tr>`;
+    }) : html`<tr><td colspan="${all.length + 1}" class="muted">No database role has privileges on this table, and no application of the workspace runs with a database role.</td></tr>`}</tbody></table></div>
+    ${cur.excluded.length ? html`<p class="muted small">Not in the matrix, because column privileges can't restrict them: ${cur.excluded.map((x) => html`<code>${x.role}</code> (${x.why}) `)}</p>` : ''}`;
+  const maskRows = html`<div class="table-wrap"><table class="report ds-table"><caption class="sr-only">Masks per column</caption>
+    <thead><tr><th scope="col">Column</th><th scope="col">Mask</th>${v.roles.map((r) => html`<th scope="col">${r} sees it</th>`)}<th scope="col">Everyone else sees it</th></tr></thead>
+    <tbody>${all.map((c, j) => {
+      const m = v.cols[c];
+      return html`<tr><th scope="row"><code>${c}</code> <small class="muted">${cur.columns[j].type}</small></th>
+        <td><select name="m.${j}.mask" aria-label="Mask of ${c}"><option value="">Not masked</option>${MASKS.map((x) => html`<option value="${x}"${m?.mask === x ? raw(' selected') : ''}>${MASK_LABELS[x]}</option>`)}</select></td>
+        ${v.roles.map((r, k) => html`<td class="ds-c"><input type="checkbox" aria-label="${r} sees ${c}" name="m.${j}.see.${k}"${chk(!!m && sees(v, c, r))}></td>`)}
+        <td class="ds-c"><input type="checkbox" aria-label="Everyone else sees ${c}" name="m.${j}.others"${chk(!!m && m.others)}></td></tr>`;
+    })}</tbody></table></div>`;
+  return html`<form method="post" action="${BASE}/sql/objects/security" class="ds">${csrf(s)}
+    <input type="hidden" name="ref" value="${opts.ref}"><input type="hidden" name="shown_roles" value="${v.roles.join(', ')}">
+    ${opts.errors.length ? html`<div class="alert alert-error" role="alert"><ul>${opts.errors.map((e) => html`<li>${e}</li>`)}</ul></div>` : ''}
+    <section class="ds-section"><h2>${icon('shield')} Rows</h2>
+      <p>Row level security is <strong>${cur.rls ? (cur.forceRls ? 'on, also for the owner' : 'on') : 'off'}</strong>${cur.rls ? '' : ': every role that may read the table reads every row'}.
+        <a href="${BASE}/sql/objects/table?${new URLSearchParams({ o: opts.ref })}">Table Properties</a> switches it on; <a href="${policyUrl}">Add policy</a> writes one in the worksheet.</p>
+      ${cur.policies.length ? html`<div class="table-wrap"><table class="report"><thead><tr><th>Policy</th><th>Command</th><th>Roles</th><th>Using</th><th>With check</th></tr></thead><tbody>
+        ${cur.policies.map((p) => html`<tr><td>${p.name}${p.permissive === 'RESTRICTIVE' ? html` <span class="badge">restrictive</span>` : ''}</td><td>${p.command}</td><td><code>${p.roles}</code></td><td><code>${p.using ?? ''}</code></td><td><code>${p.check ?? ''}</code></td></tr>`)}</tbody></table></div>`
+        : html`<p class="muted">No policies${cur.rls ? ': with row level security on, the roles below read no rows at all' : ''}.</p>`}
+    </section>
+    <section class="ds-section"><h2>${icon('table')} Columns</h2>
+      <p class="muted">What each database role may read and update, per column. A column a role may not read is refused by PostgreSQL whoever sends the query: pages, REST handlers, AutoREST, AI tools, MCP or psql.</p>
+      ${rows}
+    </section>
+    <section class="ds-section"><h2>${icon('eye')} Values</h2>
+      <p class="muted">Masked columns show their value only to the application roles you tick (<code>meta.has_role()</code> of the signed-in user); others see the mask. The masks live in a view next to the table that the roles above read instead of the table.</p>
+      <label class="check"><input type="checkbox" name="view"${chk(v.enabled)}> Masking view</label>
+      <div class="form-grid">
+        <div class="field"><label class="label" for="ds-view">View name</label><input id="ds-view" name="view_name" value="${v.name}" autocomplete="off" spellcheck="false"></div>
+        <div class="field"><label class="label" for="ds-roles">Application roles</label><input id="ds-roles" name="roles" value="${v.roles.join(', ')}" autocomplete="off" spellcheck="false">
+          <small class="help">Comma-separated. Changed roles get their column in the table below after Preview SQL.</small></div>
+      </div>
+      ${maskRows}
+    </section>
+    <section class="ds-section"><h2>${icon('code')} SQL</h2>
+      ${opts.warnings.length ? html`<div class="alert alert-warning" role="status"><ul>${opts.warnings.map((w) => html`<li>${w}</li>`)}</ul></div>` : ''}
+      ${opts.sql.length ? html`<pre class="source" data-code-view="sql" tabindex="0" aria-label="SQL">${opts.sql.join(';\n\n')};</pre>` : html`<p class="muted">No changes: the table's security is as the form shows it.</p>`}
+      ${opts.output}
+    </section>
+    <div class="buttons">
+      <button class="btn" name="mode" value="preview">${icon('eye')} Preview SQL</button>
+      <button class="btn btn-hot" name="mode" value="apply">${icon('check')} Apply</button>
+      <button class="btn" name="mode" value="worksheet">${icon('code')} Open in the worksheet</button>
+      <a class="btn" href="${objUrl}">Cancel</a>
+    </div></form>`;
+}
+
+async function page(req: Req, reply: FastifyReply) {
+  const s = await developer(req, reply);
+  if (!s) return;
+  const db = await workshopDb(s);
+  const isPost = req.method === 'POST';
+  const b: Body = isPost ? (req.body ?? {}) : (req.query ?? {});
+  const ref = String((isPost ? b.ref : b.o) ?? '');
+  const schemas = (await usableSchemas(db)).filter((n) => !SYSTEM_SCHEMAS.includes(n));
+  const { appDbRoles, appRoles } = await workspaceApps(s);
+  const cur = ref ? await readSecurity(db, ref, appDbRoles, appRoles) : null;
+  if (!cur || !schemas.includes(cur.schema)) return reply.code(404).send('Not found');
+  let def = currentDef(cur);
+  let errors: string[] = [];
+  let sql: string[] = [];
+  let warnings: string[] = [];
+  let output: Raw | '' = '';
+  if (isPost) {
+    def = fromForm(b, cur);
+    const taken = (await db.query<{ n: string }>(`select relname as n from pg_class where relnamespace = $1::regnamespace`, [cur.schema])).rows.map((r) => r.n);
+    errors = checkSecurity(def, cur, taken);
+    if (!errors.length) ({ statements: sql, warnings } = securitySql(def, cur));
+    if (!errors.length && b.mode === 'worksheet') {
+      s.state.__SQLDRAFT = sql.length ? `${sql.join(';\n\n')};` : '-- no changes';
+      flash(s, 'Review the statements and run them: nothing has been changed yet.');
+      return back(reply, s, `${BASE}/sql/worksheet`);
+    }
+    if (!errors.length && b.mode === 'apply' && sql.length) {
+      const c = await db.pool.connect();
+      let failed = '';
+      let at = '';
+      try {
+        await c.query('begin');
+        for (const x of sql) {
+          at = x;
+          await c.query(x);
+        }
+        await c.query('commit');
+      } catch (e) {
+        failed = (e as Error).message;
+        await c.query('rollback').catch(() => {});
+      } finally {
+        c.release(true);
+      }
+      await logActivity({ username: s.username, event: 'sql_command', ip: clientIp(req), detail: sql.join(';\n').slice(0, 2000) });
+      clearCompletions();
+      if (!failed) {
+        await recordChanges({ workspaceId: currentWorkspace(s), author: s.username ?? '?', source: 'table', name: `security_${cur.table}`.slice(0, 63), defaultSchema: cur.schema, statements: [joinStatements(sql)] });
+        flash(s, `Changed the security of ${cur.schema}.${cur.table}: ${sql.length} statement${sql.length === 1 ? '' : 's'}.`);
+        return back(reply, s, `${BASE}/sql/objects/security?${new URLSearchParams({ o: ref })}`);
+      }
+      output = html`<div class="alert alert-error" role="alert"><p><strong>Nothing was changed</strong>: the statements ran in one transaction, which was rolled back.</p><p>${failed}</p><pre class="source" data-code-view="sql" tabindex="0" aria-label="Failed statement">${at}</pre></div>`;
+    }
+  }
+  const title = `Security of ${cur.schema}.${cur.table}`;
+  const objUrl = `${BASE}/sql/objects?${new URLSearchParams({ schema: cur.schema, k: 'table', o: ref })}`;
+  const main = html`<h1 class="u-mb1">${title}</h1>${workshopTabs('objects')}${form(s, cur, def, { ref, sql, warnings, errors, output })}`;
+  return send(reply, s, shell(s, title, [['SQL Workshop', `${BASE}/sql`], ['Object Browser', `${BASE}/sql/objects`], [`${cur.schema}.${cur.table}`, objUrl], ['Security']], main, 'sql'));
+}
+
+export async function dataSecurityRoutes(app: FastifyInstance) {
+  app.get(`${BASE}/sql/objects/security`, page);
+  app.post(`${BASE}/sql/objects/security`, page);
+}
+