@every-app/sdk 0.0.7 → 0.0.8

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 (4) hide show
  1. package/dist/client/GatewayRequiredError.d.ts.map +1 -1
  2. package/dist/client/GatewayRequiredError.js +14 -19
  3. package/package.json +1 -1
  4. package/src/client/GatewayRequiredError.tsx +33 -32
package/dist/client/GatewayRequiredError.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"GatewayRequiredError.d.ts","sourceRoot":"","sources":["../../src/client/GatewayRequiredError.tsx"],"names":[],"mappings":"AAEA,UAAU,yBAAyB;IACjC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAwFD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,aAAa,EACb,KAAK,GACN,EAAE,yBAAyB,2CAmD3B"}
1
+ {"version":3,"file":"GatewayRequiredError.d.ts","sourceRoot":"","sources":["../../src/client/GatewayRequiredError.tsx"],"names":[],"mappings":"AAEA,UAAU,yBAAyB;IACjC;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAuFD;;;;;;GAMG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,aAAa,EACb,KAAK,GACN,EAAE,yBAAyB,2CAsD3B"}
package/dist/client/GatewayRequiredError.js CHANGED
@@ -1,7 +1,4 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- // Button gradient styles
3
- const BUTTON_GRADIENT = "linear-gradient(180deg, #424242 0%, #353535 50%, #2a2a2a 100%)";
4
- const BUTTON_GRADIENT_HOVER = "linear-gradient(180deg, #4d4d4d 0%, #404040 50%, #353535 100%)";
5
2
  // CSS custom properties for theming
6
3
  const CSS_VARIABLES = `
7
4
  @media (prefers-color-scheme: light) {
@@ -10,7 +7,7 @@ const CSS_VARIABLES = `
10
7
  --gateway-text: oklch(0% 0 0);
11
8
  --gateway-text-muted: oklch(40% 0 0);
12
9
  --gateway-icon-bg: oklch(94% 0 0);
13
- --gateway-icon-stroke: oklch(55% 0.22 25);
10
+ --gateway-icon-stroke: oklch(80% 0.18 90);
14
11
  --gateway-border: oklch(94% 0 0);
15
12
  }
16
13
  }
@@ -20,7 +17,7 @@ const CSS_VARIABLES = `
20
17
  --gateway-text: oklch(92% 0 0);
21
18
  --gateway-text-muted: oklch(60% 0 0);
22
19
  --gateway-icon-bg: oklch(22% 0 0);
23
- --gateway-icon-stroke: oklch(65% 0.2 25);
20
+ --gateway-icon-stroke: oklch(85% 0.18 90);
24
21
  --gateway-border: oklch(30% 0 0);
25
22
  }
26
23
  }
@@ -67,16 +64,19 @@ const styles = {
67
64
  color: "var(--gateway-text-muted, oklch(40% 0 0))",
68
65
  marginBottom: "20px",
69
66
  },
70
- button: {
71
- display: "inline-block",
72
- padding: "10px 20px",
67
+ link: {
68
+ display: "inline-flex",
69
+ alignItems: "center",
70
+ gap: "8px",
73
71
  fontSize: "14px",
74
72
  fontWeight: 500,
75
- color: "#ffffff",
76
- background: BUTTON_GRADIENT,
77
- borderRadius: "0.25rem",
78
- textDecoration: "none",
79
- border: "none",
73
+ lineHeight: "24px",
74
+ color: "rgb(168, 162, 158)",
75
+ textDecoration: "underline",
76
+ textDecorationColor: "rgb(87, 83, 78)",
77
+ textUnderlineOffset: "4px",
78
+ cursor: "pointer",
79
+ transition: "color, background-color, border-color, text-decoration-color, fill, stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
80
80
  },
81
81
  };
82
82
  /**
@@ -87,11 +87,6 @@ const styles = {
87
87
  * the app through the Gateway and provides a link to do so.
88
88
  */
89
89
  export function GatewayRequiredError({ gatewayOrigin, appId, }) {
90
- const displayName = appId || "This app";
91
90
  const gatewayUrl = `${gatewayOrigin}/apps/${appId}${window.location.pathname}`;
92
- return (_jsxs("div", { style: styles.container, children: [_jsx("style", { children: CSS_VARIABLES }), _jsxs("div", { style: styles.content, children: [_jsx("div", { style: styles.iconContainer, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "var(--gateway-icon-stroke, oklch(55% 0.22 25))", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] }) }), _jsx("h1", { style: styles.title, children: "Gateway Required" }), _jsxs("p", { style: styles.description, children: [displayName, " needs to be accessed through the Gateway for authentication to work properly."] }), _jsx("a", { href: gatewayUrl, style: styles.button, onMouseOver: (e) => {
93
- e.currentTarget.style.background = BUTTON_GRADIENT_HOVER;
94
- }, onMouseOut: (e) => {
95
- e.currentTarget.style.background = BUTTON_GRADIENT;
96
- }, children: "Open in Gateway" })] })] }));
91
+ return (_jsxs("div", { style: styles.container, children: [_jsx("style", { children: CSS_VARIABLES }), _jsxs("div", { style: styles.content, children: [_jsx("div", { style: styles.iconContainer, children: _jsxs("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "var(--gateway-icon-stroke, oklch(55% 0.22 25))", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }), _jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }), _jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })] }) }), _jsx("h1", { style: styles.title, children: "Open in Gateway" }), _jsx("p", { style: styles.description, children: "The Gateway handles sign in and user auth. Access your app from there so that this works properly." }), _jsxs("a", { href: gatewayUrl, style: styles.link, children: ["Go to Gateway", _jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12" }), _jsx("polyline", { points: "12 5 19 12 12 19" })] })] })] })] }));
97
92
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@every-app/sdk",
3
- "version": "0.0.7",
3
+ "version": "0.0.8",
4
4
  "type": "module",
5
5
  "main": "./dist/client/index.js",
6
6
  "types": "./dist/client/index.d.ts",
package/src/client/GatewayRequiredError.tsx CHANGED
@@ -11,12 +11,6 @@ interface GatewayRequiredErrorProps {
11
11
  appId: string;
12
12
  }
13
13
 
14
- // Button gradient styles
15
- const BUTTON_GRADIENT =
16
- "linear-gradient(180deg, #424242 0%, #353535 50%, #2a2a2a 100%)";
17
- const BUTTON_GRADIENT_HOVER =
18
- "linear-gradient(180deg, #4d4d4d 0%, #404040 50%, #353535 100%)";
19
-
20
14
  // CSS custom properties for theming
21
15
  const CSS_VARIABLES = `
22
16
  @media (prefers-color-scheme: light) {
@@ -25,7 +19,7 @@ const CSS_VARIABLES = `
25
19
  --gateway-text: oklch(0% 0 0);
26
20
  --gateway-text-muted: oklch(40% 0 0);
27
21
  --gateway-icon-bg: oklch(94% 0 0);
28
- --gateway-icon-stroke: oklch(55% 0.22 25);
22
+ --gateway-icon-stroke: oklch(80% 0.18 90);
29
23
  --gateway-border: oklch(94% 0 0);
30
24
  }
31
25
  }
@@ -35,7 +29,7 @@ const CSS_VARIABLES = `
35
29
  --gateway-text: oklch(92% 0 0);
36
30
  --gateway-text-muted: oklch(60% 0 0);
37
31
  --gateway-icon-bg: oklch(22% 0 0);
38
- --gateway-icon-stroke: oklch(65% 0.2 25);
32
+ --gateway-icon-stroke: oklch(85% 0.18 90);
39
33
  --gateway-border: oklch(30% 0 0);
40
34
  }
41
35
  }
@@ -84,16 +78,20 @@ const styles = {
84
78
  color: "var(--gateway-text-muted, oklch(40% 0 0))",
85
79
  marginBottom: "20px",
86
80
  } satisfies CSSProperties,
87
- button: {
88
- display: "inline-block",
89
- padding: "10px 20px",
81
+ link: {
82
+ display: "inline-flex",
83
+ alignItems: "center",
84
+ gap: "8px",
90
85
  fontSize: "14px",
91
86
  fontWeight: 500,
92
- color: "#ffffff",
93
- background: BUTTON_GRADIENT,
94
- borderRadius: "0.25rem",
95
- textDecoration: "none",
96
- border: "none",
87
+ lineHeight: "24px",
88
+ color: "rgb(168, 162, 158)",
89
+ textDecoration: "underline",
90
+ textDecorationColor: "rgb(87, 83, 78)",
91
+ textUnderlineOffset: "4px",
92
+ cursor: "pointer",
93
+ transition:
94
+ "color, background-color, border-color, text-decoration-color, fill, stroke 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
97
95
  } satisfies CSSProperties,
98
96
  };
99
97
 
@@ -108,7 +106,6 @@ export function GatewayRequiredError({
108
106
  gatewayOrigin,
109
107
  appId,
110
108
  }: GatewayRequiredErrorProps) {
111
- const displayName = appId || "This app";
112
109
  const gatewayUrl = `${gatewayOrigin}/apps/${appId}${window.location.pathname}`;
113
110
 
114
111
  return (
@@ -134,26 +131,30 @@ export function GatewayRequiredError({
134
131
  </div>
135
132
 
136
133
  {/* Title */}
137
- <h1 style={styles.title}>Gateway Required</h1>
134
+ <h1 style={styles.title}>Open in Gateway</h1>
138
135
 
139
136
  {/* Description */}
140
137
  <p style={styles.description}>
141
- {displayName} needs to be accessed through the Gateway for
142
- authentication to work properly.
138
+ The Gateway handles sign in and user auth. Access your app from there
139
+ so this works properly.
143
140
  </p>
144
141
 
145
- {/* Redirect Link/Button - Metallic style */}
146
- <a
147
- href={gatewayUrl}
148
- style={styles.button}
149
- onMouseOver={(e) => {
150
- e.currentTarget.style.background = BUTTON_GRADIENT_HOVER;
151
- }}
152
- onMouseOut={(e) => {
153
- e.currentTarget.style.background = BUTTON_GRADIENT;
154
- }}
155
- >
156
- Open in Gateway
142
+ {/* Redirect Link */}
143
+ <a href={gatewayUrl} style={styles.link}>
144
+ Go to Gateway
145
+ <svg
146
+ width="16"
147
+ height="16"
148
+ viewBox="0 0 24 24"
149
+ fill="none"
150
+ stroke="currentColor"
151
+ strokeWidth="2"
152
+ strokeLinecap="round"
153
+ strokeLinejoin="round"
154
+ >
155
+ <line x1="5" y1="12" x2="19" y2="12" />
156
+ <polyline points="12 5 19 12 12 19" />
157
+ </svg>
157
158
  </a>
158
159
  </div>
159
160
  </div>