create-kepo-plugin 1.0.20 → 1.0.21

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 (3) hide show
  1. package/package.json +1 -1
  2. package/template/package.json +2 -2
  3. package/template/src/viewer/Blank.tsx +0 -244
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "create-kepo-plugin",
3
- "version": "1.0.20",
3
+ "version": "1.0.21",
4
4
  "description": "CLI tool for creating Kepo plugins",
5
5
  "type": "module",
6
6
  "bin": {
package/template/package.json CHANGED
@@ -18,7 +18,7 @@
18
18
  "license": "ISC",
19
19
  "dependencies": {
20
20
  "@kepoai/provider": "^1.0.6",
21
- "@kepoai/types": "^0.0.9",
21
+ "@kepoai/types": "^0.0.10",
22
22
  "@kepoai/ui": "^0.0.2",
23
23
  "react": "^18.2.0",
24
24
  "react-dom": "^18.2.0",
@@ -27,7 +27,7 @@
27
27
  "recharts": "^3.7.0"
28
28
  },
29
29
  "devDependencies": {
30
- "@kepoai/cli": "^0.0.11",
30
+ "@kepoai/cli": "^0.0.12",
31
31
  "@types/react": "^18.2.38",
32
32
  "@types/node": "^20.10.3",
33
33
  "tailwindcss": "^3.4.1",
package/template/src/viewer/Blank.tsx DELETED
@@ -1,244 +0,0 @@
1
- import React from 'react';
2
-
3
- export interface BlankComponentProps {
4
- className?: string;
5
- style?: React.CSSProperties;
6
- size?: 'short' | 'small' | 'wide' | 'large' | 'auto';
7
- }
8
-
9
- const C = ({ l, t, le, w, h, sx = '0%', sy = '0%', ex, ey, br = '8px', d = '0s' }: any) => (
10
- <div
11
- className={`ios-comp l${l}`}
12
- style={{
13
- top: t, left: le, width: w, height: h, borderRadius: br,
14
- '--start-x': sx, '--start-y': sy,
15
- '--end-x': ex !== undefined ? ex : sx,
16
- '--end-y': ey !== undefined ? ey : sy,
17
- animationDelay: d
18
- } as React.CSSProperties}
19
- />
20
- );
21
-
22
- // Placeholder viewer component used while developing a provider.
23
- const BlankComponent: React.FC<BlankComponentProps> = ({
24
- className,
25
- style,
26
- size = 'auto'
27
- }) => {
28
- const actualSizeClass = size === 'auto' ? 'size-auto' : `size-${size}`;
29
-
30
- return (
31
- <div
32
- className={`${className} blank-component-container`}
33
- style={{
34
- position: 'relative',
35
- width: '100%',
36
- height: '100%',
37
- minHeight: '83px',
38
- backgroundColor: 'var(--widget-bg, transparent)',
39
- overflow: 'hidden',
40
- boxSizing: 'border-box',
41
- ...style
42
- }}
43
- >
44
- <div className={`widget-wrapper ${actualSizeClass}`}>
45
- <style>
46
- {`
47
- .blank-component-container {
48
- --widget-bg: transparent;
49
- --comp-bg: #F2F2F7;
50
- --comp-border: #E5E5EA;
51
- --comp-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8), 0 2px 8px rgba(0, 0, 0, 0.02);
52
- }
53
-
54
- @media (prefers-color-scheme: dark) {
55
- .blank-component-container {
56
- --widget-bg: transparent;
57
- --comp-bg: #2C2C2E;
58
- --comp-border: #3A3A3C;
59
- --comp-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 2px 8px rgba(0, 0, 0, 0.2);
60
- }
61
- }
62
-
63
- .widget-wrapper {
64
- container-type: size;
65
- container-name: widget;
66
- width: 100%;
67
- height: 100%;
68
- position: absolute;
69
- inset: 0;
70
- }
71
-
72
- .sz-short, .sz-small, .sz-wide, .sz-large {
73
- display: none;
74
- width: 100%;
75
- height: 100%;
76
- position: absolute;
77
- inset: 0;
78
- }
79
-
80
- .size-auto {
81
- @container widget (max-height: 120px) { .sz-short { display: block; } }
82
- @container widget (min-height: 121px) and (max-width: 249px) { .sz-small { display: block; } }
83
- @container widget (min-width: 250px) and (max-height: 249px) { .sz-wide { display: block; } }
84
- @container widget (min-width: 250px) and (min-height: 250px) { .sz-large { display: block; } }
85
- }
86
-
87
- .size-short .sz-short { display: block; }
88
- .size-small .sz-small { display: block; }
89
- .size-wide .sz-wide { display: block; }
90
- .size-large .sz-large { display: block; }
91
-
92
- .ios-comp {
93
- position: absolute;
94
- background-color: var(--comp-bg);
95
- border: 1px solid var(--comp-border);
96
- box-shadow: var(--comp-shadow);
97
- opacity: 0;
98
- }
99
-
100
- @keyframes l1-anim {
101
- 0% { transform: translate(var(--start-x), var(--start-y)) scale(0.95); opacity: 0; }
102
- 4%, 16% { transform: translate(0, 0) scale(1); opacity: 1; }
103
- 20%, 100% { transform: translate(var(--end-x), var(--end-y)) scale(0.95); opacity: 0; }
104
- }
105
- .l1 { animation: l1-anim 15s infinite cubic-bezier(0.25, 0.1, 0.25, 1); }
106
-
107
- @keyframes l2-anim {
108
- 0%, 20% { transform: translate(var(--start-x), var(--start-y)) scale(0.95); opacity: 0; }
109
- 24%, 36% { transform: translate(0, 0) scale(1); opacity: 1; }
110
- 40%, 100% { transform: translate(var(--end-x), var(--end-y)) scale(0.95); opacity: 0; }
111
- }
112
- .l2 { animation: l2-anim 15s infinite cubic-bezier(0.25, 0.1, 0.25, 1); }
113
-
114
- @keyframes l3-anim {
115
- 0%, 40% { transform: translate(var(--start-x), var(--start-y)) scale(0.95); opacity: 0; }
116
- 44%, 56% { transform: translate(0, 0) scale(1); opacity: 1; }
117
- 60%, 100% { transform: translate(var(--end-x), var(--end-y)) scale(0.95); opacity: 0; }
118
- }
119
- .l3 { animation: l3-anim 15s infinite cubic-bezier(0.25, 0.1, 0.25, 1); }
120
-
121
- @keyframes l4-anim {
122
- 0%, 60% { transform: translate(var(--start-x), var(--start-y)) scale(0.95); opacity: 0; }
123
- 64%, 76% { transform: translate(0, 0) scale(1); opacity: 1; }
124
- 80%, 100% { transform: translate(var(--end-x), var(--end-y)) scale(0.95); opacity: 0; }
125
- }
126
- .l4 { animation: l4-anim 15s infinite cubic-bezier(0.25, 0.1, 0.25, 1); }
127
-
128
- @keyframes l5-anim {
129
- 0%, 80% { transform: translate(var(--start-x), var(--start-y)) scale(0.95); opacity: 0; }
130
- 84%, 96% { transform: translate(0, 0) scale(1); opacity: 1; }
131
- 100% { transform: translate(var(--end-x), var(--end-y)) scale(0.95); opacity: 0; }
132
- }
133
- .l5 { animation: l5-anim 15s infinite cubic-bezier(0.25, 0.1, 0.25, 1); }
134
- `}
135
- </style>
136
-
137
- <div className="sz-short">
138
- <C l={1} t="16%" le="6%" w="30%" h="68%" sx="-100%" br="10px"/>
139
- <C l={1} t="25%" le="42%" w="52%" h="50%" sx="100%" />
140
-
141
- <C l={2} t="15%" le="6%" w="26%" h="70%" sy="-100%" />
142
- <C l={2} t="15%" le="37%" w="26%" h="70%" sy="100%" d="0.1s" />
143
- <C l={2} t="15%" le="68%" w="26%" h="70%" sy="-100%" d="0.2s" />
144
-
145
- <C l={3} t="12%" le="6%" w="88%" h="30%" sy="-100%" br="6px"/>
146
- <C l={3} t="55%" le="6%" w="25%" h="33%" sy="100%" br="6px"/>
147
- <C l={3} t="55%" le="37.5%" w="25%" h="33%" sy="100%" br="6px" d="0.1s" />
148
- <C l={3} t="55%" le="69%" w="25%" h="33%" sy="100%" br="6px" d="0.2s" />
149
-
150
- <C l={4} t="12%" le="6%" w="30%" h="76%" sx="-100%" br="10px" />
151
- <C l={4} t="12%" le="42%" w="52%" h="18%" sx="100%" br="4px" />
152
- <C l={4} t="41%" le="42%" w="52%" h="18%" sx="100%" br="4px" d="0.1s" />
153
- <C l={4} t="70%" le="42%" w="52%" h="18%" sx="100%" br="4px" d="0.2s" />
154
-
155
- <C l={5} t="10%" le="6%" w="88%" h="20%" sy="-100%" br="4px" />
156
- <C l={5} t="38%" le="6%" w="41%" h="23%" sx="-100%" br="6px" d="0.1s" />
157
- <C l={5} t="38%" le="53%" w="41%" h="23%" sx="100%" br="6px" d="0.2s" />
158
- <C l={5} t="68%" le="6%" w="41%" h="23%" sx="-100%" br="6px" d="0.3s" />
159
- <C l={5} t="68%" le="53%" w="41%" h="23%" sx="100%" br="6px" d="0.4s" />
160
- </div>
161
-
162
- <div className="sz-small">
163
- <C l={1} t="10%" le="10%" w="80%" h="36%" sy="-100%" br="14px" />
164
- <C l={1} t="54%" le="10%" w="80%" h="36%" sy="100%" br="14px" d="0.1s" />
165
-
166
- <C l={2} t="12%" le="12%" w="76%" h="18%" sy="-100%" br="8px" />
167
- <C l={2} t="42%" le="12%" w="42%" h="42%" sx="-100%" br="50%" d="0.1s" />
168
- <C l={2} t="52%" le="62%" w="26%" h="22%" sx="100%" br="8px" d="0.2s" />
169
-
170
- <C l={3} t="10%" le="10%" w="36%" h="36%" sx="-100%" sy="-100%" br="12px" />
171
- <C l={3} t="10%" le="54%" w="36%" h="36%" sx="100%" sy="-100%" br="12px" d="0.1s" />
172
- <C l={3} t="54%" le="10%" w="36%" h="36%" sx="-100%" sy="100%" br="12px" d="0.2s" />
173
- <C l={3} t="54%" le="54%" w="36%" h="36%" sx="100%" sy="100%" br="12px" d="0.3s" />
174
-
175
- <C l={4} t="10%" le="10%" w="80%" h="14%" sy="-100%" br="6px" />
176
- <C l={4} t="34%" le="10%" w="80%" h="14%" sx="100%" br="6px" d="0.1s" />
177
- <C l={4} t="56%" le="10%" w="80%" h="14%" sx="-100%" br="6px" d="0.2s" />
178
- <C l={4} t="78%" le="10%" w="80%" h="14%" sx="100%" br="6px" d="0.3s" />
179
-
180
- <C l={5} t="10%" le="10%" w="50%" h="14%" sy="-100%" br="6px" />
181
- <C l={5} t="30%" le="10%" w="36%" h="36%" sx="-100%" br="12px" d="0.1s" />
182
- <C l={5} t="30%" le="54%" w="36%" h="36%" sx="100%" br="12px" d="0.2s" />
183
- <C l={5} t="74%" le="10%" w="36%" h="16%" sx="-100%" sy="100%" br="6px" d="0.3s" />
184
- <C l={5} t="74%" le="54%" w="36%" h="16%" sx="100%" sy="100%" br="6px" d="0.4s" />
185
- </div>
186
-
187
- <div className="sz-wide">
188
- <C l={1} t="10%" le="6%" w="42%" h="80%" sx="-100%" br="20px" />
189
- <C l={1} t="10%" le="52%" w="42%" h="80%" sx="100%" br="20px" d="0.1s" />
190
-
191
- <C l={2} t="12%" le="6%" w="26%" h="76%" sy="-100%" br="16px" />
192
- <C l={2} t="12%" le="37%" w="26%" h="76%" sy="100%" br="16px" d="0.1s" />
193
- <C l={2} t="12%" le="68%" w="26%" h="76%" sy="-100%" br="16px" d="0.2s" />
194
-
195
- <C l={3} t="10%" le="6%" w="40%" h="80%" sx="-100%" br="20px" />
196
- <C l={3} t="14%" le="52%" w="42%" h="18%" sx="100%" d="0.1s" />
197
- <C l={3} t="41%" le="52%" w="42%" h="18%" sx="100%" d="0.2s" />
198
- <C l={3} t="68%" le="52%" w="42%" h="18%" sx="100%" d="0.3s" />
199
-
200
- <C l={4} t="10%" le="6%" w="88%" h="20%" sy="-100%" br="8px" />
201
- <C l={4} t="38%" le="6%" w="18.5%" h="52%" sy="100%" br="16px" d="0.1s" />
202
- <C l={4} t="38%" le="29%" w="18.5%" h="52%" sy="100%" br="16px" d="0.2s" />
203
- <C l={4} t="38%" le="52%" w="18.5%" h="52%" sy="100%" br="16px" d="0.3s" />
204
- <C l={4} t="38%" le="75.5%" w="18.5%" h="52%" sy="100%" br="16px" d="0.4s" />
205
-
206
- <C l={5} t="12%" le="6%" w="26%" h="76%" sx="-100%" br="16px" />
207
- <C l={5} t="12%" le="38%" w="56%" h="14%" sx="100%" d="0.1s" />
208
- <C l={5} t="32%" le="38%" w="56%" h="14%" sx="100%" d="0.2s" />
209
- <C l={5} t="52%" le="38%" w="56%" h="14%" sx="100%" d="0.3s" />
210
- <C l={5} t="72%" le="38%" w="56%" h="14%" sx="100%" d="0.4s" />
211
- </div>
212
-
213
- <div className="sz-large">
214
- <C l={1} t="6%" le="6%" w="88%" h="42%" sy="-100%" br="24px" />
215
- <C l={1} t="52%" le="6%" w="88%" h="42%" sy="100%" br="24px" d="0.1s" />
216
-
217
- <C l={2} t="6%" le="6%" w="42%" h="88%" sx="-100%" br="24px" />
218
- <C l={2} t="6%" le="52%" w="42%" h="42%" sx="100%" sy="-100%" br="24px" d="0.1s" />
219
- <C l={2} t="52%" le="52%" w="42%" h="42%" sx="100%" sy="100%" br="24px" d="0.2s" />
220
-
221
- <C l={3} t="6%" le="6%" w="88%" h="20%" sy="-100%" br="12px" />
222
- <C l={3} t="32%" le="6%" w="27%" h="62%" sy="100%" br="20px" d="0.1s" />
223
- <C l={3} t="32%" le="36.5%" w="27%" h="62%" sy="100%" br="20px" d="0.2s" />
224
- <C l={3} t="32%" le="67%" w="27%" h="62%" sy="100%" br="20px" d="0.3s" />
225
-
226
- <C l={4} t="6%" le="6%" w="42%" h="35%" sx="-100%" sy="-100%" br="20px" />
227
- <C l={4} t="6%" le="52%" w="42%" h="35%" sx="100%" sy="-100%" br="20px" d="0.1s" />
228
- <C l={4} t="47%" le="6%" w="88%" h="14%" sx="-100%" d="0.2s" />
229
- <C l={4} t="65%" le="6%" w="88%" h="14%" sx="100%" d="0.3s" />
230
- <C l={4} t="83%" le="6%" w="88%" h="14%" sx="-100%" d="0.4s" />
231
-
232
- <C l={5} t="6%" le="6%" w="88%" h="20%" sy="-100%" br="16px" />
233
- <C l={5} t="32%" le="6%" w="42%" h="29%" sx="-100%" br="20px" d="0.1s" />
234
- <C l={5} t="32%" le="52%" w="42%" h="29%" sx="100%" br="20px" d="0.2s" />
235
- <C l={5} t="65%" le="6%" w="42%" h="29%" sx="-100%" br="20px" d="0.3s" />
236
- <C l={5} t="65%" le="52%" w="42%" h="29%" sx="100%" br="20px" d="0.4s" />
237
- </div>
238
-
239
- </div>
240
- </div>
241
- );
242
- };
243
-
244
- export default BlankComponent;