@abstractframework/ui-kit 0.1.6 → 0.1.7

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.
Files changed (9) hide show
  1. package/README.md +9 -1
  2. package/dist/gateway_session_signin.d.ts +41 -0
  3. package/dist/gateway_session_signin.d.ts.map +1 -0
  4. package/dist/gateway_session_signin.js +15 -0
  5. package/dist/index.d.ts +1 -0
  6. package/dist/index.d.ts.map +1 -1
  7. package/dist/index.js +1 -0
  8. package/package.json +1 -1
  9. package/src/theme.css +218 -0
package/README.md CHANGED
@@ -7,6 +7,7 @@ This package provides:
7
7
  - **Theme tokens** (CSS variables + theme classes): `ui-kit/src/theme.css`
8
8
  - **Theme + typography helpers**: `applyTheme(...)`, `applyTypography(...)`
9
9
  - **Common inputs**: `AfSelect`, `ThemeSelect`, `ProviderModelSelect`, `ToolPolicyEditor`, etc.
10
+ - **Gateway session UI**: `GatewaySessionSignInCard` for the shared user/token browser-session sign-in form used by thin clients.
10
11
  - **Icons**: `Icon` (used by `@abstractframework/panel-chat`)
11
12
 
12
13
  ## Install / peer dependencies
@@ -37,9 +38,16 @@ applyTheme("dark"); // sets a `theme-*` class on <html>
37
38
  Use UI components:
38
39
 
39
40
  ```tsx
40
- import { ThemeSelect, Icon, ToolPolicyEditor } from "@abstractframework/ui-kit";
41
+ import { ThemeSelect, Icon, ToolPolicyEditor, GatewaySessionSignInCard } from "@abstractframework/ui-kit";
41
42
  ```
42
43
 
44
+ ### Gateway session sign-in
45
+
46
+ `GatewaySessionSignInCard` renders the shared Gateway browser-session sign-in
47
+ card. Host apps own the network calls and session storage; the component only
48
+ collects Gateway URL (optional), user id, token, and remember-browser state, and
49
+ calls the callbacks you provide.
50
+
43
51
  ### Tool policy editor
44
52
 
45
53
  `ToolPolicyEditor` renders the shared allowlist + approve/ask picker for gateway tools. It intentionally **does not** include a deny mode; tools are denied by removing them from the allowlist. Pass `toolMode` (and optional `toolModeLabel`/`toolModeDetail`) to surface the gateway tool execution mode in a prominent banner.
package/dist/gateway_session_signin.d.ts ADDED
@@ -0,0 +1,41 @@
1
+ import React from "react";
2
+ export type GatewaySessionStatusTone = "ok" | "warn" | "err";
3
+ export type GatewaySessionSignInCardProps = {
4
+ kicker?: string;
5
+ title?: string;
6
+ description?: React.ReactNode;
7
+ statusLabel?: string;
8
+ statusTone?: GatewaySessionStatusTone;
9
+ tokenSourceLabel?: string;
10
+ showGatewayUrl?: boolean;
11
+ gatewayUrl?: string;
12
+ gatewayUrlPlaceholder?: string;
13
+ onGatewayUrlChange?: (value: string) => void;
14
+ userId: string;
15
+ userPlaceholder?: string;
16
+ onUserIdChange: (value: string) => void;
17
+ token: string;
18
+ tokenPlaceholder?: string;
19
+ showToken?: boolean;
20
+ onTokenChange: (value: string) => void;
21
+ onShowTokenChange?: (value: boolean) => void;
22
+ remember?: boolean;
23
+ rememberLabel?: string;
24
+ onRememberChange?: (value: boolean) => void;
25
+ loading?: boolean;
26
+ submitting?: boolean;
27
+ submitDisabled?: boolean;
28
+ submitLabel?: string;
29
+ submittingLabel?: string;
30
+ closeLabel?: string;
31
+ signOutLabel?: string;
32
+ showClose?: boolean;
33
+ showSignOut?: boolean;
34
+ error?: string;
35
+ className?: string;
36
+ onSubmit: () => void | Promise<void>;
37
+ onClose?: () => void;
38
+ onSignOut?: () => void | Promise<void>;
39
+ };
40
+ export declare function GatewaySessionSignInCard({ kicker, title, description, statusLabel, statusTone, tokenSourceLabel, showGatewayUrl, gatewayUrl, gatewayUrlPlaceholder, onGatewayUrlChange, userId, userPlaceholder, onUserIdChange, token, tokenPlaceholder, showToken, onTokenChange, onShowTokenChange, remember, rememberLabel, onRememberChange, loading, submitting, submitDisabled, submitLabel, submittingLabel, closeLabel, signOutLabel, showClose, showSignOut, error, className, onSubmit, onClose, onSignOut, }: GatewaySessionSignInCardProps): React.ReactElement;
41
+ //# sourceMappingURL=gateway_session_signin.d.ts.map
package/dist/gateway_session_signin.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"gateway_session_signin.d.ts","sourceRoot":"","sources":["../src/gateway_session_signin.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,MAAM,wBAAwB,GAAG,IAAI,GAAG,MAAM,GAAG,KAAK,CAAC;AAE7D,MAAM,MAAM,6BAA6B,GAAG;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,wBAAwB,CAAC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAE7C,MAAM,EAAE,MAAM,CAAC;IACf,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC,KAAK,EAAE,MAAM,CAAC;IACd,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAE7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gBAAgB,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IAE5C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CACxC,CAAC;AAMF,wBAAgB,wBAAwB,CAAC,EACvC,MAAqC,EACrC,KAAoC,EACpC,WAAkF,EAClF,WAAqC,EACrC,UAAmB,EACnB,gBAAmC,EACnC,cAAsB,EACtB,UAAe,EACf,qBAA+C,EAC/C,kBAAkB,EAClB,MAAM,EACN,eAAyB,EACzB,cAAc,EACd,KAAK,EACL,gBAA6C,EAC7C,SAAiB,EACjB,aAAa,EACb,iBAAiB,EACjB,QAAgB,EAChB,aAAuC,EACvC,gBAAgB,EAChB,OAAe,EACf,UAAkB,EAClB,cAAsB,EACtB,WAAuB,EACvB,eAAiC,EACjC,UAAoB,EACpB,YAAyB,EACzB,SAAiB,EACjB,WAAmB,EACnB,KAAK,EACL,SAAS,EACT,QAAQ,EACR,OAAO,EACP,SAAS,GACV,EAAE,6BAA6B,GAAG,KAAK,CAAC,YAAY,CA+GpD"}
package/dist/gateway_session_signin.js ADDED
@@ -0,0 +1,15 @@
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ function cx(...parts) {
3
+ return parts.filter(Boolean).join(" ");
4
+ }
5
+ export function GatewaySessionSignInCard({ kicker = "AbstractGateway connection", title = "Connect to AbstractGateway", description = "Sign in with the Gateway user token assigned by the Gateway admin.", statusLabel = "Gateway token missing", statusTone = "warn", tokenSourceLabel = "token: missing", showGatewayUrl = false, gatewayUrl = "", gatewayUrlPlaceholder = "http://127.0.0.1:8080", onGatewayUrlChange, userId, userPlaceholder = "admin", onUserIdChange, token, tokenPlaceholder = "Paste Gateway user token", showToken = false, onTokenChange, onShowTokenChange, remember = false, rememberLabel = "Remember this browser", onRememberChange, loading = false, submitting = false, submitDisabled = false, submitLabel = "Sign in", submittingLabel = "Signing in...", closeLabel = "Close", signOutLabel = "Sign out", showClose = false, showSignOut = false, error, className, onSubmit, onClose, onSignOut, }) {
6
+ const busy = loading || submitting;
7
+ const disabled = busy || submitDisabled || !String(userId || "").trim() || !String(token || "").trim();
8
+ const handleSubmit = (event) => {
9
+ event.preventDefault();
10
+ if (disabled)
11
+ return;
12
+ void onSubmit();
13
+ };
14
+ return (_jsxs("form", { className: cx("af-gateway-signin", className), onSubmit: handleSubmit, children: [_jsxs("div", { className: "af-gateway-signin__hero", children: [_jsxs("div", { children: [_jsx("div", { className: "af-gateway-signin__kicker", children: kicker }), _jsx("h2", { children: title }), description ? _jsx("p", { children: description }) : null] }), _jsx("div", { className: "af-gateway-signin__mark", "aria-hidden": "true", children: "\u2194" })] }), _jsxs("div", { className: "af-gateway-signin__status-row", children: [_jsx("span", { className: cx("af-gateway-signin__status", `af-gateway-signin__status--${statusTone}`), children: statusLabel }), tokenSourceLabel ? _jsx("span", { className: "af-gateway-signin__source", children: tokenSourceLabel }) : null] }), _jsxs("div", { className: "af-gateway-signin__form", children: [showGatewayUrl ? (_jsxs(_Fragment, { children: [_jsx("label", { className: "af-gateway-signin__label", htmlFor: "gateway-session-url", children: "Gateway URL" }), _jsx("input", { id: "gateway-session-url", value: gatewayUrl, onChange: (event) => onGatewayUrlChange?.(event.target.value), placeholder: gatewayUrlPlaceholder, autoComplete: "url", disabled: busy })] })) : null, _jsx("label", { className: "af-gateway-signin__label", htmlFor: "gateway-session-user", children: "Gateway user" }), _jsx("input", { id: "gateway-session-user", value: userId, onChange: (event) => onUserIdChange(event.target.value), placeholder: userPlaceholder, autoComplete: "username", disabled: busy }), _jsx("label", { className: "af-gateway-signin__label", htmlFor: "gateway-session-token", children: "Gateway token" }), _jsxs("div", { className: "af-gateway-signin__token-input", children: [_jsx("input", { id: "gateway-session-token", type: showToken ? "text" : "password", value: token, onChange: (event) => onTokenChange(event.target.value), placeholder: tokenPlaceholder, autoComplete: "current-password", disabled: busy }), _jsx("button", { className: "af-gateway-signin__secondary", type: "button", onClick: () => onShowTokenChange?.(!showToken), disabled: busy, children: showToken ? "Hide" : "Show" })] }), _jsx("label", { className: "af-gateway-signin__label", children: "Browser session" }), _jsxs("label", { className: "af-gateway-signin__checkbox", children: [_jsx("input", { type: "checkbox", checked: Boolean(remember), onChange: (event) => onRememberChange?.(event.target.checked), disabled: busy }), rememberLabel] })] }), error ? _jsx("div", { className: "af-gateway-signin__message af-gateway-signin__message--error", children: error }) : null, _jsxs("div", { className: "af-gateway-signin__actions", children: [showClose ? (_jsx("button", { className: "af-gateway-signin__secondary", type: "button", onClick: onClose, disabled: busy, children: closeLabel })) : null, showSignOut ? (_jsx("button", { className: "af-gateway-signin__secondary", type: "button", onClick: () => void onSignOut?.(), disabled: busy, children: signOutLabel })) : null, _jsx("button", { className: "af-gateway-signin__primary", type: "submit", disabled: disabled, children: submitting ? submittingLabel : submitLabel })] })] }));
15
+ }
package/dist/index.d.ts CHANGED
@@ -2,6 +2,7 @@ export { THEMES, THEME_SPECS, applyTheme, getThemeSpec, themeClassName, type The
2
2
  export { FONT_SCALES, HEADER_DENSITIES, applyTypography, getFontScaleSpec, getHeaderDensitySpec, type FontScaleOption, type HeaderDensityOption } from "./typography.js";
3
3
  export { AfSelect, type AfSelectProps, type AfSelectOption } from "./af_select.js";
4
4
  export { ProviderModelSelect, type ProviderModelSelectProps, type ProviderOption } from "./provider_model_select.js";
5
+ export { GatewaySessionSignInCard, type GatewaySessionSignInCardProps, type GatewaySessionStatusTone, } from "./gateway_session_signin.js";
5
6
  export { ThemeSelect, type ThemeSelectProps } from "./theme_select.js";
6
7
  export { FontScaleSelect, HeaderDensitySelect, type FontScaleSelectProps, type HeaderDensitySelectProps } from "./typography_select.js";
7
8
  export { Icon, type IconName } from "./icon.js";
package/dist/index.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7H,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,eAAe,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,KAAK,eAAe,EAAE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACzK,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACnF,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACrH,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,KAAK,oBAAoB,EAAE,KAAK,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AACxI,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,QAAQ,EACb,KAAK,gBAAgB,GACtB,MAAM,yBAAyB,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,SAAS,EAAE,MAAM,YAAY,CAAC;AAC7H,OAAO,EAAE,WAAW,EAAE,gBAAgB,EAAE,eAAe,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,KAAK,eAAe,EAAE,KAAK,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACzK,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACnF,OAAO,EAAE,mBAAmB,EAAE,KAAK,wBAAwB,EAAE,KAAK,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACrH,OAAO,EACL,wBAAwB,EACxB,KAAK,6BAA6B,EAClC,KAAK,wBAAwB,GAC9B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,WAAW,EAAE,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,eAAe,EAAE,mBAAmB,EAAE,KAAK,oBAAoB,EAAE,KAAK,wBAAwB,EAAE,MAAM,wBAAwB,CAAC;AACxI,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,WAAW,CAAC;AAChD,OAAO,EACL,gBAAgB,EAChB,oBAAoB,EACpB,KAAK,qBAAqB,EAC1B,KAAK,mBAAmB,EACxB,KAAK,kBAAkB,EACvB,KAAK,QAAQ,EACb,KAAK,gBAAgB,GACtB,MAAM,yBAAyB,CAAC"}
package/dist/index.js CHANGED
@@ -2,6 +2,7 @@ export { THEMES, THEME_SPECS, applyTheme, getThemeSpec, themeClassName } from ".
2
2
  export { FONT_SCALES, HEADER_DENSITIES, applyTypography, getFontScaleSpec, getHeaderDensitySpec } from "./typography.js";
3
3
  export { AfSelect } from "./af_select.js";
4
4
  export { ProviderModelSelect } from "./provider_model_select.js";
5
+ export { GatewaySessionSignInCard, } from "./gateway_session_signin.js";
5
6
  export { ThemeSelect } from "./theme_select.js";
6
7
  export { FontScaleSelect, HeaderDensitySelect } from "./typography_select.js";
7
8
  export { Icon } from "./icon.js";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abstractframework/ui-kit",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "description": "Shared UI tokens + themes for AbstractFramework thin clients (AbstractFlow, AbstractObserver, etc.).",
5
5
  "type": "module",
6
6
  "author": "Laurent-Philippe Albou",
package/src/theme.css CHANGED
@@ -112,6 +112,224 @@
112
112
  }
113
113
  }
114
114
 
115
+ /* Shared Gateway browser-session sign-in card */
116
+ .af-gateway-signin {
117
+ display: block;
118
+ width: min(760px, 100%);
119
+ border: 1px solid rgba(0, 210, 255, 0.20);
120
+ border-radius: var(--radius-md);
121
+ padding: 24px;
122
+ background:
123
+ linear-gradient(135deg, rgba(18, 31, 61, 0.98), rgba(22, 20, 42, 0.98)),
124
+ var(--bg-secondary);
125
+ box-shadow: 0 28px 90px rgba(0, 0, 0, 0.45);
126
+ color: var(--text-primary);
127
+ font-family: var(--font-sans);
128
+ }
129
+
130
+ .af-gateway-signin h2 {
131
+ margin: 0;
132
+ font-size: var(--font-size-xl);
133
+ line-height: 1.25;
134
+ }
135
+
136
+ .af-gateway-signin p {
137
+ margin: 14px 0 0;
138
+ color: var(--text-secondary);
139
+ font-size: var(--font-size-base);
140
+ }
141
+
142
+ .af-gateway-signin input {
143
+ width: 100%;
144
+ min-height: 40px;
145
+ border: 1px solid rgba(96, 165, 250, 0.34);
146
+ border-radius: var(--radius-sm);
147
+ background: rgba(9, 14, 29, 0.76);
148
+ color: var(--text-primary);
149
+ padding: 9px 11px;
150
+ font: inherit;
151
+ }
152
+
153
+ .af-gateway-signin input:focus {
154
+ outline: 2px solid rgba(0, 210, 255, 0.65);
155
+ outline-offset: 0;
156
+ }
157
+
158
+ .af-gateway-signin input[type="checkbox"] {
159
+ width: auto;
160
+ min-height: auto;
161
+ }
162
+
163
+ .af-gateway-signin button {
164
+ border: 0;
165
+ border-radius: var(--radius-sm);
166
+ min-height: 38px;
167
+ padding: 8px 14px;
168
+ color: #fff;
169
+ font: inherit;
170
+ font-weight: 800;
171
+ cursor: pointer;
172
+ white-space: nowrap;
173
+ }
174
+
175
+ .af-gateway-signin button:disabled {
176
+ opacity: 0.55;
177
+ cursor: not-allowed;
178
+ }
179
+
180
+ .af-gateway-signin__hero {
181
+ display: flex;
182
+ justify-content: space-between;
183
+ gap: 24px;
184
+ margin-bottom: 22px;
185
+ }
186
+
187
+ .af-gateway-signin__kicker {
188
+ margin-bottom: 8px;
189
+ color: rgba(0, 210, 255, 0.86);
190
+ font-size: var(--font-size-xs);
191
+ font-weight: 800;
192
+ letter-spacing: 0.14em;
193
+ text-transform: uppercase;
194
+ }
195
+
196
+ .af-gateway-signin__mark {
197
+ width: 72px;
198
+ height: 72px;
199
+ display: grid;
200
+ place-items: center;
201
+ flex: 0 0 auto;
202
+ border-radius: 24px;
203
+ border: 1px solid rgba(0, 210, 255, 0.24);
204
+ background: linear-gradient(135deg, rgba(0, 210, 255, 0.18), rgba(233, 69, 96, 0.22));
205
+ color: rgba(255, 255, 255, 0.86);
206
+ font-size: 32px;
207
+ font-weight: 900;
208
+ }
209
+
210
+ .af-gateway-signin__status-row {
211
+ display: flex;
212
+ align-items: center;
213
+ gap: 10px;
214
+ flex-wrap: wrap;
215
+ margin-bottom: 18px;
216
+ }
217
+
218
+ .af-gateway-signin__status {
219
+ display: inline-flex;
220
+ align-items: center;
221
+ min-height: 26px;
222
+ padding: 4px 12px;
223
+ border-radius: 999px;
224
+ font-size: var(--font-size-xs);
225
+ font-weight: 800;
226
+ border: 1px solid rgba(255, 255, 255, 0.12);
227
+ background: rgba(255, 255, 255, 0.06);
228
+ }
229
+
230
+ .af-gateway-signin__status--ok {
231
+ color: rgba(120, 255, 190, 0.95);
232
+ border-color: rgba(39, 174, 96, 0.36);
233
+ }
234
+
235
+ .af-gateway-signin__status--warn {
236
+ color: rgba(255, 210, 120, 0.95);
237
+ border-color: rgba(243, 156, 18, 0.36);
238
+ }
239
+
240
+ .af-gateway-signin__status--err {
241
+ color: rgba(255, 115, 135, 0.95);
242
+ border-color: rgba(233, 69, 96, 0.42);
243
+ }
244
+
245
+ .af-gateway-signin__source {
246
+ color: var(--text-muted);
247
+ font-size: var(--font-size-sm);
248
+ }
249
+
250
+ .af-gateway-signin__form {
251
+ display: grid;
252
+ grid-template-columns: 150px minmax(0, 1fr);
253
+ gap: 12px;
254
+ align-items: center;
255
+ }
256
+
257
+ .af-gateway-signin__label {
258
+ margin: 0;
259
+ color: var(--text-secondary);
260
+ font-size: var(--font-size-xs);
261
+ font-weight: 800;
262
+ letter-spacing: 0.04em;
263
+ text-transform: uppercase;
264
+ }
265
+
266
+ .af-gateway-signin__token-input {
267
+ display: flex;
268
+ align-items: center;
269
+ gap: 8px;
270
+ }
271
+
272
+ .af-gateway-signin__token-input input {
273
+ flex: 1;
274
+ }
275
+
276
+ .af-gateway-signin__checkbox {
277
+ display: flex;
278
+ align-items: center;
279
+ gap: 10px;
280
+ margin: 0;
281
+ color: var(--text-secondary);
282
+ font-weight: 700;
283
+ text-transform: none;
284
+ letter-spacing: 0;
285
+ }
286
+
287
+ .af-gateway-signin__message {
288
+ margin-top: 14px;
289
+ overflow-wrap: anywhere;
290
+ }
291
+
292
+ .af-gateway-signin__message--error {
293
+ color: rgba(255, 156, 175, 0.95);
294
+ }
295
+
296
+ .af-gateway-signin__actions {
297
+ display: flex;
298
+ justify-content: flex-end;
299
+ gap: 10px;
300
+ margin-top: 20px;
301
+ flex-wrap: wrap;
302
+ }
303
+
304
+ .af-gateway-signin__primary {
305
+ background: var(--accent);
306
+ }
307
+
308
+ .af-gateway-signin__secondary {
309
+ background: var(--bg-tertiary);
310
+ }
311
+
312
+ @media (max-width: 680px) {
313
+ .af-gateway-signin {
314
+ padding: 18px;
315
+ }
316
+
317
+ .af-gateway-signin__hero {
318
+ gap: 16px;
319
+ }
320
+
321
+ .af-gateway-signin__mark {
322
+ width: 56px;
323
+ height: 56px;
324
+ border-radius: 18px;
325
+ font-size: 26px;
326
+ }
327
+
328
+ .af-gateway-signin__form {
329
+ grid-template-columns: 1fr;
330
+ }
331
+ }
332
+
115
333
  :root.theme-light,
116
334
  :root.theme-solarized-light,
117
335
  :root.theme-catppuccin-latte,