@signiphi/pdf-compose 0.1.0-beta.2 → 0.1.0-beta.3

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 (7) hide show
  1. package/dist/index.js +2657 -469
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +2645 -472
  4. package/dist/index.mjs.map +1 -1
  5. package/dist/styles/index.css +346 -194
  6. package/package.json +5 -1
  7. package/src/styles/index.css +140 -68
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@signiphi/pdf-compose",
3
- "version": "0.1.0-beta.2",
3
+ "version": "0.1.0-beta.3",
4
4
  "description": "Markdown-based document composer with field placeholders for the signiphi signing pipeline",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",
@@ -59,6 +59,10 @@
59
59
  "@radix-ui/react-slot": "^1.2.3",
60
60
  "@tiptap/core": "^2.11.0",
61
61
  "@tiptap/extension-placeholder": "^2.11.0",
62
+ "@tiptap/extension-table": "^2.11.0",
63
+ "@tiptap/extension-table-cell": "^2.11.0",
64
+ "@tiptap/extension-table-header": "^2.11.0",
65
+ "@tiptap/extension-table-row": "^2.11.0",
62
66
  "@tiptap/extension-text-align": "^2.11.0",
63
67
  "@tiptap/extension-underline": "^2.11.0",
64
68
  "@tiptap/pm": "^2.11.0",
package/src/styles/index.css CHANGED
@@ -3,25 +3,27 @@
3
3
  @source '../**/*.{ts,tsx}';
4
4
 
5
5
  @theme inline {
6
- --color-border: hsl(var(--xpc-border));
7
- --color-input: hsl(var(--xpc-input));
8
- --color-ring: oklch(var(--xpc-ring));
9
- --color-background: hsl(var(--xpc-background));
10
- --color-foreground: hsl(var(--xpc-foreground));
11
- --color-primary: oklch(var(--xpc-primary));
12
- --color-primary-foreground: hsl(var(--xpc-primary-foreground));
13
- --color-secondary: hsl(var(--xpc-secondary));
14
- --color-secondary-foreground: hsl(var(--xpc-secondary-foreground));
15
- --color-destructive: hsl(var(--xpc-destructive));
16
- --color-destructive-foreground: hsl(var(--xpc-destructive-foreground));
17
- --color-muted: hsl(var(--xpc-muted));
18
- --color-muted-foreground: hsl(var(--xpc-muted-foreground));
19
- --color-accent: hsl(var(--xpc-accent));
20
- --color-accent-foreground: hsl(var(--xpc-accent-foreground));
21
- --color-popover: hsl(var(--xpc-popover));
22
- --color-popover-foreground: hsl(var(--xpc-popover-foreground));
23
- --color-card: hsl(var(--xpc-card));
24
- --color-card-foreground: hsl(var(--xpc-card-foreground));
6
+ /* Variables store complete color values (any format: hex, hsl, oklch, etc.)
7
+ so host apps can override --xpc-* with any valid CSS color. */
8
+ --color-border: var(--xpc-border);
9
+ --color-input: var(--xpc-input);
10
+ --color-ring: var(--xpc-ring);
11
+ --color-background: var(--xpc-background);
12
+ --color-foreground: var(--xpc-foreground);
13
+ --color-primary: var(--xpc-primary);
14
+ --color-primary-foreground: var(--xpc-primary-foreground);
15
+ --color-secondary: var(--xpc-secondary);
16
+ --color-secondary-foreground: var(--xpc-secondary-foreground);
17
+ --color-destructive: var(--xpc-destructive);
18
+ --color-destructive-foreground: var(--xpc-destructive-foreground);
19
+ --color-muted: var(--xpc-muted);
20
+ --color-muted-foreground: var(--xpc-muted-foreground);
21
+ --color-accent: var(--xpc-accent);
22
+ --color-accent-foreground: var(--xpc-accent-foreground);
23
+ --color-popover: var(--xpc-popover);
24
+ --color-popover-foreground: var(--xpc-popover-foreground);
25
+ --color-card: var(--xpc-card);
26
+ --color-card-foreground: var(--xpc-card-foreground);
25
27
 
26
28
  --radius-lg: var(--xpc-radius);
27
29
  --radius-md: calc(var(--xpc-radius) - 2px);
@@ -34,25 +36,25 @@
34
36
  --xpc-color-dark-blue: oklch(0.23 0.12 273.81);
35
37
  --xpc-color-light-blue: oklch(0.862 0.038 233.28);
36
38
 
37
- --xpc-background: 0 0% 100%;
38
- --xpc-foreground: 222.2 84% 4.9%;
39
- --xpc-card: 0 0% 100%;
40
- --xpc-card-foreground: 222.2 84% 4.9%;
41
- --xpc-popover: 0 0% 100%;
42
- --xpc-popover-foreground: 222.2 84% 4.9%;
43
- --xpc-primary: 0.597 0.186 230.42;
44
- --xpc-primary-foreground: 210 40% 98%;
45
- --xpc-secondary: 210 40% 96.1%;
46
- --xpc-secondary-foreground: 222.2 47.4% 11.2%;
47
- --xpc-muted: 210 40% 96.1%;
48
- --xpc-muted-foreground: 215.4 16.3% 46.9%;
49
- --xpc-accent: 210 40% 96.1%;
50
- --xpc-accent-foreground: 222.2 47.4% 11.2%;
51
- --xpc-destructive: 0 84.2% 60.2%;
52
- --xpc-destructive-foreground: 210 40% 98%;
53
- --xpc-border: 214.3 31.8% 91.4%;
54
- --xpc-input: 214.3 31.8% 91.4%;
55
- --xpc-ring: 0.597 0.186 230.42;
39
+ --xpc-background: hsl(0 0% 100%);
40
+ --xpc-foreground: hsl(222.2 84% 4.9%);
41
+ --xpc-card: hsl(0 0% 100%);
42
+ --xpc-card-foreground: hsl(222.2 84% 4.9%);
43
+ --xpc-popover: hsl(0 0% 100%);
44
+ --xpc-popover-foreground: hsl(222.2 84% 4.9%);
45
+ --xpc-primary: oklch(0.597 0.186 230.42);
46
+ --xpc-primary-foreground: hsl(210 40% 98%);
47
+ --xpc-secondary: hsl(210 40% 96.1%);
48
+ --xpc-secondary-foreground: hsl(222.2 47.4% 11.2%);
49
+ --xpc-muted: hsl(210 40% 96.1%);
50
+ --xpc-muted-foreground: hsl(215.4 16.3% 46.9%);
51
+ --xpc-accent: hsl(210 40% 96.1%);
52
+ --xpc-accent-foreground: hsl(222.2 47.4% 11.2%);
53
+ --xpc-destructive: hsl(0 84.2% 60.2%);
54
+ --xpc-destructive-foreground: hsl(210 40% 98%);
55
+ --xpc-border: hsl(214.3 31.8% 91.4%);
56
+ --xpc-input: hsl(214.3 31.8% 91.4%);
57
+ --xpc-ring: oklch(0.597 0.186 230.42);
56
58
  --xpc-radius: 0.5rem;
57
59
  --xpc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
58
60
  --xpc-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
@@ -62,25 +64,25 @@
62
64
 
63
65
  :root[data-theme="dark"],
64
66
  :root.dark {
65
- --xpc-background: 222.2 47.4% 11.2%;
66
- --xpc-foreground: 210 40% 98%;
67
- --xpc-card: 222.2 47.4% 11.2%;
68
- --xpc-card-foreground: 210 40% 98%;
69
- --xpc-popover: 222.2 47.4% 11.2%;
70
- --xpc-popover-foreground: 210 40% 98%;
71
- --xpc-primary: 0.597 0.186 230.42;
72
- --xpc-primary-foreground: 210 40% 98%;
73
- --xpc-secondary: 217.2 32.6% 17.5%;
74
- --xpc-secondary-foreground: 210 40% 98%;
75
- --xpc-muted: 217.2 32.6% 17.5%;
76
- --xpc-muted-foreground: 215 20.2% 65.1%;
77
- --xpc-accent: 217.2 32.6% 17.5%;
78
- --xpc-accent-foreground: 210 40% 98%;
79
- --xpc-destructive: 0 62.8% 30.6%;
80
- --xpc-destructive-foreground: 210 40% 98%;
81
- --xpc-border: 217.2 32.6% 17.5%;
82
- --xpc-input: 217.2 32.6% 17.5%;
83
- --xpc-ring: 0.597 0.186 230.42;
67
+ --xpc-background: hsl(222.2 47.4% 11.2%);
68
+ --xpc-foreground: hsl(210 40% 98%);
69
+ --xpc-card: hsl(222.2 47.4% 11.2%);
70
+ --xpc-card-foreground: hsl(210 40% 98%);
71
+ --xpc-popover: hsl(222.2 47.4% 11.2%);
72
+ --xpc-popover-foreground: hsl(210 40% 98%);
73
+ --xpc-primary: oklch(0.597 0.186 230.42);
74
+ --xpc-primary-foreground: hsl(210 40% 98%);
75
+ --xpc-secondary: hsl(217.2 32.6% 17.5%);
76
+ --xpc-secondary-foreground: hsl(210 40% 98%);
77
+ --xpc-muted: hsl(217.2 32.6% 17.5%);
78
+ --xpc-muted-foreground: hsl(215 20.2% 65.1%);
79
+ --xpc-accent: hsl(217.2 32.6% 17.5%);
80
+ --xpc-accent-foreground: hsl(210 40% 98%);
81
+ --xpc-destructive: hsl(0 62.8% 30.6%);
82
+ --xpc-destructive-foreground: hsl(210 40% 98%);
83
+ --xpc-border: hsl(217.2 32.6% 17.5%);
84
+ --xpc-input: hsl(217.2 32.6% 17.5%);
85
+ --xpc-ring: oklch(0.597 0.186 230.42);
84
86
 
85
87
  --xpc-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);
86
88
  --xpc-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
@@ -96,7 +98,7 @@
96
98
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
97
99
  -webkit-font-smoothing: antialiased;
98
100
  -moz-osx-font-smoothing: grayscale;
99
- color: hsl(var(--xpc-foreground));
101
+ color: var(--xpc-foreground);
100
102
  line-height: 1.5;
101
103
  }
102
104
 
@@ -107,10 +109,10 @@
107
109
  display: flex;
108
110
  flex-direction: column;
109
111
  height: 920px;
110
- border: 1px solid hsl(var(--xpc-border));
112
+ border: 1px solid var(--xpc-border);
111
113
  border-radius: var(--xpc-radius);
112
114
  overflow: hidden;
113
- background: hsl(var(--xpc-background));
115
+ background: var(--xpc-background);
114
116
 
115
117
  transition: background-color 0.2s ease, color 0.2s ease;
116
118
  }
@@ -123,6 +125,9 @@
123
125
  .signiphi-pdf-compose *::before,
124
126
  .signiphi-pdf-compose *::after {
125
127
  box-sizing: border-box;
128
+ /* Neutralize host-app outline (e.g. shadcn `* { @apply outline-ring/50 }`).
129
+ This package uses border + box-shadow for focus feedback, never outline. */
130
+ outline: 2px solid transparent;
126
131
  }
127
132
 
128
133
  /* TipTap editor styles */
@@ -171,19 +176,19 @@
171
176
 
172
177
  .signiphi-pdf-compose .tiptap hr {
173
178
  border: none;
174
- border-top: 2px solid hsl(var(--xpc-border));
179
+ border-top: 2px solid var(--xpc-border);
175
180
  margin: 1em 0;
176
181
  }
177
182
 
178
183
  .signiphi-pdf-compose .tiptap blockquote {
179
- border-left: 3px solid hsl(var(--xpc-border));
184
+ border-left: 3px solid var(--xpc-border);
180
185
  padding-left: 1em;
181
186
  margin: 0.5em 0;
182
- color: hsl(var(--xpc-muted-foreground));
187
+ color: var(--xpc-muted-foreground);
183
188
  }
184
189
 
185
190
  .signiphi-pdf-compose .tiptap code {
186
- background: hsl(var(--xpc-muted));
191
+ background: var(--xpc-muted);
187
192
  padding: 0.2em 0.4em;
188
193
  border-radius: 0.25em;
189
194
  font-size: 0.875em;
@@ -192,7 +197,7 @@
192
197
  .signiphi-pdf-compose .tiptap .is-editor-empty:first-child::before {
193
198
  content: attr(data-placeholder);
194
199
  float: left;
195
- color: hsl(var(--xpc-muted-foreground));
200
+ color: var(--xpc-muted-foreground);
196
201
  pointer-events: none;
197
202
  height: 0;
198
203
  }
@@ -204,17 +209,84 @@
204
209
  }
205
210
 
206
211
  .signiphi-pdf-compose ::-webkit-scrollbar-track {
207
- background: hsl(var(--xpc-muted));
212
+ background: var(--xpc-muted);
208
213
  border-radius: 4px;
209
214
  }
210
215
 
211
216
  .signiphi-pdf-compose ::-webkit-scrollbar-thumb {
212
- background: hsl(var(--xpc-muted-foreground) / 0.3);
217
+ background: color-mix(in srgb, var(--xpc-muted-foreground) 30%, transparent);
213
218
  border-radius: 4px;
214
219
  }
215
220
 
216
221
  .signiphi-pdf-compose ::-webkit-scrollbar-thumb:hover {
217
- background: hsl(var(--xpc-muted-foreground) / 0.5);
222
+ background: color-mix(in srgb, var(--xpc-muted-foreground) 50%, transparent);
223
+ }
224
+
225
+ /* Hidden scrollbar — keeps scroll functionality */
226
+ .signiphi-pdf-compose .scrollbar-hidden {
227
+ scrollbar-width: none; /* Firefox */
228
+ -ms-overflow-style: none; /* IE/Edge */
229
+ }
230
+ .signiphi-pdf-compose .scrollbar-hidden::-webkit-scrollbar {
231
+ display: none; /* Chrome/Safari */
232
+ }
233
+
234
+ /* Columns layout */
235
+ .signiphi-pdf-compose .columns-node {
236
+ display: flex;
237
+ gap: 0.75rem;
238
+ margin: 0.5rem 0;
239
+ }
240
+
241
+ .signiphi-pdf-compose .column-node {
242
+ flex: 1 1 0%;
243
+ min-width: 0;
244
+ }
245
+
246
+ /* Panel */
247
+ .signiphi-pdf-compose .panel-node {
248
+ border-radius: 0.375rem;
249
+ margin: 0.5rem 0;
250
+ }
251
+
252
+ .signiphi-pdf-compose .panel-border-solid {
253
+ border: 1px solid #d1d5db;
254
+ }
255
+
256
+ .signiphi-pdf-compose .panel-border-dashed {
257
+ border: 1px dashed #d1d5db;
258
+ }
259
+
260
+ .signiphi-pdf-compose .panel-border-none {
261
+ border: 1px solid transparent;
262
+ }
263
+
264
+ .signiphi-pdf-compose .panel-title {
265
+ padding: 0.25rem 0.75rem;
266
+ font-size: 0.875rem;
267
+ font-weight: 600;
268
+ border-bottom: 1px solid #d1d5db;
269
+ border-radius: 0.375rem 0.375rem 0 0;
270
+ background: #f3f4f6;
271
+ color: currentColor;
272
+ }
273
+
274
+ .signiphi-pdf-compose .panel-dark .panel-title {
275
+ background: #1f2937;
276
+ color: white;
277
+ border-color: #1f2937;
278
+ }
279
+
280
+ .signiphi-pdf-compose .panel-content {
281
+ padding: 0.75rem;
282
+ }
283
+
284
+ /* Subtotals block */
285
+ .signiphi-pdf-compose .subtotals-block {
286
+ border-left: 2px solid #d1d5db;
287
+ padding-left: 0.75rem;
288
+ margin: 0.5rem 0;
289
+ text-align: right;
218
290
  }
219
291
 
220
292
  /* Loading spinner */