polly-graph 0.2.4 → 0.2.6

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 (6) hide show
  1. package/dist/index.cjs +6749 -1796
  2. package/dist/index.css +196 -0
  3. package/dist/index.d.cts +1228 -140
  4. package/dist/index.d.ts +1228 -140
  5. package/dist/index.js +6742 -1796
  6. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -202,3 +202,199 @@
202
202
  }
203
203
 
204
204
  /* src/v2/styles/main.css */
205
+
206
+ /* src/force-graph-wrapper/ui/graph-controls.css */
207
+ .fg-controls {
208
+ position: absolute;
209
+ display: flex;
210
+ background: #ffffff;
211
+ border-radius: 12px;
212
+ box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
213
+ pointer-events: auto;
214
+ z-index: 20;
215
+ width: max-content;
216
+ --fg-offset: 16px;
217
+ }
218
+ .fg-pos-top-left {
219
+ top: var(--fg-controls-offset-y, var(--fg-offset));
220
+ left: var(--fg-controls-offset-x, var(--fg-offset));
221
+ bottom: auto;
222
+ right: auto;
223
+ }
224
+ .fg-pos-top-right {
225
+ top: var(--fg-controls-offset-y, var(--fg-offset));
226
+ right: var(--fg-controls-offset-x, var(--fg-offset));
227
+ bottom: auto;
228
+ left: auto;
229
+ }
230
+ .fg-pos-bottom-left {
231
+ bottom: var(--fg-controls-offset-y, var(--fg-offset));
232
+ left: var(--fg-controls-offset-x, var(--fg-offset));
233
+ top: auto;
234
+ right: auto;
235
+ }
236
+ .fg-pos-bottom-right {
237
+ bottom: var(--fg-controls-offset-y, var(--fg-offset));
238
+ right: var(--fg-controls-offset-x, var(--fg-offset));
239
+ top: auto;
240
+ left: auto;
241
+ }
242
+ .fg-orient-vertical {
243
+ flex-direction: column;
244
+ }
245
+ .fg-orient-horizontal {
246
+ flex-direction: row;
247
+ }
248
+ .fg-control-btn {
249
+ all: unset;
250
+ width: 44px;
251
+ height: 44px;
252
+ display: flex;
253
+ align-items: center;
254
+ justify-content: center;
255
+ cursor: pointer;
256
+ transition: background 120ms ease;
257
+ overflow: hidden;
258
+ border-radius: 12px;
259
+ }
260
+ .fg-control-btn:hover {
261
+ background: #f9fafb;
262
+ }
263
+ .fg-control-btn:active {
264
+ background: #f1f5f9;
265
+ }
266
+ .fg-orient-vertical .fg-control-btn:not(:last-child) {
267
+ border-bottom: 1px solid rgba(0, 0, 0, 0.06);
268
+ border-radius: 0;
269
+ }
270
+ .fg-orient-horizontal .fg-control-btn:not(:last-child) {
271
+ border-right: 1px solid rgba(0, 0, 0, 0.06);
272
+ border-radius: 0;
273
+ }
274
+ .fg-orient-vertical .fg-control-btn:first-child {
275
+ border-top-left-radius: 12px;
276
+ border-top-right-radius: 12px;
277
+ }
278
+ .fg-orient-vertical .fg-control-btn:last-child {
279
+ border-bottom-left-radius: 12px;
280
+ border-bottom-right-radius: 12px;
281
+ }
282
+ .fg-orient-horizontal .fg-control-btn:first-child {
283
+ border-top-left-radius: 12px;
284
+ border-bottom-left-radius: 12px;
285
+ }
286
+ .fg-orient-horizontal .fg-control-btn:last-child {
287
+ border-top-right-radius: 12px;
288
+ border-bottom-right-radius: 12px;
289
+ }
290
+ .fg-control-btn svg.pg-icon {
291
+ width: 18px;
292
+ height: 18px;
293
+ stroke: #475569;
294
+ stroke-width: 2;
295
+ fill: none;
296
+ }
297
+ .fg-control-btn:hover svg.pg-icon {
298
+ stroke: #334155;
299
+ }
300
+ .fg-control-btn:focus-visible {
301
+ outline: 2px solid #3b82f6;
302
+ outline-offset: -2px;
303
+ }
304
+
305
+ /* src/force-graph-wrapper/ui/graph-legends.css */
306
+ .fg-legends {
307
+ position: absolute;
308
+ display: flex;
309
+ flex-direction: column;
310
+ background: #ffffff;
311
+ border-radius: 12px;
312
+ box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
313
+ pointer-events: auto;
314
+ z-index: 20;
315
+ padding: 16px;
316
+ min-width: 120px;
317
+ max-width: 200px;
318
+ --fg-offset: 20px;
319
+ }
320
+ .fg-pos-top-left {
321
+ top: var(--fg-legends-offset-y, var(--fg-offset));
322
+ left: var(--fg-legends-offset-x, var(--fg-offset));
323
+ bottom: auto;
324
+ right: auto;
325
+ }
326
+ .fg-pos-top-right {
327
+ top: var(--fg-legends-offset-y, var(--fg-offset));
328
+ right: var(--fg-legends-offset-x, var(--fg-offset));
329
+ bottom: auto;
330
+ left: auto;
331
+ }
332
+ .fg-pos-bottom-left {
333
+ bottom: var(--fg-legends-offset-y, var(--fg-offset));
334
+ left: var(--fg-legends-offset-x, var(--fg-offset));
335
+ top: auto;
336
+ right: auto;
337
+ }
338
+ .fg-pos-bottom-right {
339
+ bottom: var(--fg-legends-offset-y, var(--fg-offset));
340
+ right: var(--fg-legends-offset-x, var(--fg-offset));
341
+ top: auto;
342
+ left: auto;
343
+ }
344
+ .fg-legend-title {
345
+ font-size: 14px;
346
+ font-weight: 600;
347
+ color: #374151;
348
+ margin-bottom: 12px;
349
+ text-align: center;
350
+ }
351
+ .fg-legend-item {
352
+ display: flex;
353
+ align-items: center;
354
+ gap: 8px;
355
+ margin-bottom: 8px;
356
+ }
357
+ .fg-legend-item:last-child {
358
+ margin-bottom: 0;
359
+ }
360
+ .fg-legend-dot {
361
+ width: 12px;
362
+ height: 12px;
363
+ border-radius: 50%;
364
+ flex-shrink: 0;
365
+ border: 1px solid rgba(0, 0, 0, 0.1);
366
+ }
367
+ .fg-legend-label {
368
+ font-size: 12px;
369
+ color: #374151;
370
+ font-weight: 400;
371
+ line-height: 1.2;
372
+ word-break: break-word;
373
+ }
374
+ .fg-legend-more .fg-legend-label {
375
+ font-style: italic;
376
+ color: #6b7280;
377
+ font-size: 11px;
378
+ }
379
+ .fg-legend-more .fg-legend-dot {
380
+ background:
381
+ repeating-linear-gradient(
382
+ 45deg,
383
+ #999,
384
+ #999 2px,
385
+ transparent 2px,
386
+ transparent 4px);
387
+ }
388
+ @media (max-width: 768px) {
389
+ .fg-legends {
390
+ max-width: 150px;
391
+ padding: 12px;
392
+ }
393
+ .fg-legend-label {
394
+ font-size: 11px;
395
+ }
396
+ .fg-legend-dot {
397
+ width: 10px;
398
+ height: 10px;
399
+ }
400
+ }