@happyvertical/smrt-svelte 0.51.29 → 0.51.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -37,6 +37,18 @@ them from the published artifact versus exporting them is tracked in #2286.
37
37
  - Shell activities are client-side records; server jobs, polling, WebSockets,
38
38
  and `smrt-web` SSE can feed them through app adapters
39
39
 
40
+ At widths up to 48rem, side panels overlay the main area directly between the
41
+ header and footer. App/system drawers span the shell width independently of
42
+ saved desktop side-panel states and scroll within the available vertical space.
43
+ App settings, tenant names and environment badges wrap within narrow drawers.
44
+ `SystemStatusChips` stays on one horizontally scrollable row so fixed-height
45
+ system bars never clip wrapped chips. Custom bars must allow this flex child
46
+ to shrink; use safe alignment if aligning its contents to the end.
47
+
48
+ Run `pnpm --filter @happyvertical/smrt-svelte test:e2e` after building the
49
+ package dependencies. The package-local fixture exercises real Chromium bounds
50
+ and touch input across mobile widths and desktop panel-state combinations.
51
+
40
52
  See `src/components/workspace/MIGRATION.md` for the old-to-new concept map.
41
53
 
42
54
  ### Live activity feed adapter (`./web`, #1779)
@@ -850,6 +850,7 @@ function buildLayoutStyle(shell: ModuleShellState): string {
850
850
  .smrt-admin-shell__edge--left,
851
851
  .smrt-admin-shell__edge--right {
852
852
  position: absolute;
853
+ grid-area: auto;
853
854
  inset-block: var(--smrt-admin-shell-top-track)
854
855
  var(--smrt-admin-shell-bottom-track);
855
856
  inline-size: min(22rem, 86vw);
@@ -858,6 +859,10 @@ function buildLayoutStyle(shell: ModuleShellState): string {
858
859
  var(--smrt-easing-standard);
859
860
  }
860
861
 
862
+ .smrt-admin-shell__edge--left {
863
+ inset-inline-start: 0;
864
+ }
865
+
861
866
  .smrt-admin-shell__edge--right {
862
867
  inset-inline-end: 0;
863
868
  transform: translateX(100%);
@@ -881,6 +886,25 @@ function buildLayoutStyle(shell: ModuleShellState): string {
881
886
  .smrt-admin-shell__corner {
882
887
  display: none;
883
888
  }
889
+
890
+ .smrt-admin-shell__drawer {
891
+ box-sizing: border-box;
892
+ inset-inline: 0;
893
+ }
894
+
895
+ .smrt-admin-shell__drawer--top {
896
+ max-block-size: min(
897
+ var(--smrt-admin-shell-top-expanded),
898
+ calc(100% - var(--smrt-admin-shell-top-track) - var(--smrt-admin-shell-bottom-track))
899
+ );
900
+ }
901
+
902
+ .smrt-admin-shell__drawer--bottom {
903
+ max-block-size: min(
904
+ var(--smrt-admin-shell-bottom-expanded),
905
+ calc(100% - var(--smrt-admin-shell-top-track) - var(--smrt-admin-shell-bottom-track))
906
+ );
907
+ }
884
908
  }
885
909
 
886
910
  @media (prefers-reduced-motion: reduce) {
@@ -46,7 +46,7 @@ const { t } = useI18n();
46
46
  {/if}
47
47
  </div>
48
48
  {#if environment}
49
- <Badge variant="info" size="sm">{environment}</Badge>
49
+ <Badge variant="info" size="sm"><span class="smrt-app-scope-panel__environment">{environment}</span></Badge>
50
50
  {/if}
51
51
  </header>
52
52
 
@@ -76,16 +76,28 @@ const { t } = useI18n();
76
76
  <style>
77
77
  .smrt-app-scope-panel {
78
78
  display: grid;
79
+ grid-template-columns: minmax(0, 1fr);
80
+ min-inline-size: 0;
81
+ overflow-wrap: anywhere;
79
82
  gap: var(--smrt-spacing-5);
80
83
  }
81
84
 
82
85
  .smrt-app-scope-panel header {
83
86
  display: flex;
87
+ flex-wrap: wrap;
84
88
  align-items: flex-start;
85
89
  justify-content: space-between;
86
90
  gap: var(--smrt-spacing-4);
87
91
  }
88
92
 
93
+ .smrt-app-scope-panel header > div {
94
+ min-inline-size: 0;
95
+ }
96
+
97
+ .smrt-app-scope-panel__environment {
98
+ white-space: normal;
99
+ }
100
+
89
101
  .smrt-app-scope-panel h2,
90
102
  .smrt-app-scope-panel p {
91
103
  margin: 0;
@@ -94,6 +94,9 @@ function conflictFor(edge: PanelEdge): string | null {
94
94
  <style>
95
95
  .smrt-shell-settings-panel {
96
96
  display: grid;
97
+ grid-template-columns: minmax(0, 1fr);
98
+ min-inline-size: 0;
99
+ overflow-wrap: anywhere;
97
100
  gap: var(--smrt-spacing-4);
98
101
  }
99
102
 
@@ -43,7 +43,9 @@ const { t } = useI18n();
43
43
  <style>
44
44
  .smrt-system-status-chips {
45
45
  display: flex;
46
- flex-wrap: wrap;
46
+ flex-wrap: nowrap;
47
+ min-inline-size: 0;
48
+ overflow-x: auto;
47
49
  gap: var(--smrt-spacing-2);
48
50
  align-items: center;
49
51
  }
@@ -51,6 +53,8 @@ const { t } = useI18n();
51
53
  .smrt-system-status-chips a,
52
54
  .smrt-system-status-chips__chip {
53
55
  display: inline-flex;
56
+ flex: 0 0 auto;
57
+ white-space: nowrap;
54
58
  align-items: center;
55
59
  gap: var(--smrt-spacing-2);
56
60
  min-inline-size: 0;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@happyvertical/smrt-svelte",
3
- "version": "0.51.29",
3
+ "version": "0.51.31",
4
4
  "smrtJsdoc": "strict",
5
5
  "description": "Svelte 5 components for SMRT user management - auth, users, tenants, roles, permissions, groups",
6
6
  "type": "module",
@@ -120,11 +120,11 @@
120
120
  "access": "public"
121
121
  },
122
122
  "dependencies": {
123
- "@happyvertical/logger": "^0.90.0",
124
- "@happyvertical/smrt-languages": "0.51.29",
125
- "@happyvertical/smrt-types": "0.51.29",
126
- "@happyvertical/smrt-ui": "0.51.29",
127
- "@happyvertical/smrt-web": "0.51.29",
123
+ "@happyvertical/logger": "^0.94.1",
124
+ "@happyvertical/smrt-languages": "0.51.31",
125
+ "@happyvertical/smrt-types": "0.51.31",
126
+ "@happyvertical/smrt-ui": "0.51.31",
127
+ "@happyvertical/smrt-web": "0.51.31",
128
128
  "@tanstack/db": "^0.6.14",
129
129
  "@tanstack/svelte-db": "^0.1.91",
130
130
  "esm-env": "^1.2.2"
@@ -159,14 +159,14 @@
159
159
  }
160
160
  },
161
161
  "devDependencies": {
162
- "@happyvertical/smrt-agents": "0.51.29",
163
- "@happyvertical/smrt-chat": "0.51.29",
164
- "@happyvertical/smrt-content": "0.51.29",
165
- "@happyvertical/smrt-core": "0.51.29",
166
- "@happyvertical/smrt-reports": "0.51.29",
167
- "@happyvertical/smrt-scanner": "0.51.29",
168
- "@happyvertical/smrt-tenancy": "0.51.29",
169
- "@happyvertical/smrt-users": "0.51.29",
162
+ "@happyvertical/smrt-agents": "0.51.31",
163
+ "@happyvertical/smrt-chat": "0.51.31",
164
+ "@happyvertical/smrt-content": "0.51.31",
165
+ "@happyvertical/smrt-core": "0.51.31",
166
+ "@happyvertical/smrt-reports": "0.51.31",
167
+ "@happyvertical/smrt-scanner": "0.51.31",
168
+ "@happyvertical/smrt-tenancy": "0.51.31",
169
+ "@happyvertical/smrt-users": "0.51.31",
170
170
  "@sveltejs/package": "^2.5.8",
171
171
  "@sveltejs/vite-plugin-svelte": "^7.3.0",
172
172
  "@testing-library/jest-dom": "^7.0.1",
@@ -189,6 +189,7 @@
189
189
  "test:conformance": "node scripts/ensure-conformance-build.mjs && SMRT_SVELTE_PUBLISHED_ENTRY=1 vitest run src/web/__tests__/data-surface-conformance.integration.svelte.test.ts",
190
190
  "typecheck:conformance": "tsc --noEmit -p ./tsconfig.conformance.json",
191
191
  "typecheck": "tsc --noEmit && pnpm run typecheck:conformance && node ../../scripts/svelte-check-a11y.mjs --tsconfig ./tsconfig.svelte.json",
192
- "verify:pack": "node ../../scripts/verify-package-types-exports.js ."
192
+ "verify:pack": "node ../../scripts/verify-package-types-exports.js .",
193
+ "test:e2e": "playwright test -c e2e/playwright.config.ts"
193
194
  }
194
195
  }