@nuvio/overlay 1.0.0 → 1.1.0

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.
package/dist/style.css CHANGED
@@ -328,6 +328,600 @@
328
328
  flex: 1;
329
329
  }
330
330
 
331
+ .nuvio-editor-tabs {
332
+ display: flex;
333
+ flex-shrink: 0;
334
+ gap: 3px;
335
+ margin: 0 0 12px;
336
+ padding: 4px;
337
+ border-radius: 14px;
338
+ background: rgba(0, 0, 0, 0.38);
339
+ border: 1px solid rgba(255, 255, 255, 0.08);
340
+ }
341
+
342
+ .nuvio-editor-tab {
343
+ flex: 1;
344
+ display: flex;
345
+ flex-direction: column;
346
+ align-items: center;
347
+ justify-content: center;
348
+ gap: 1px;
349
+ min-height: 44px;
350
+ padding: 6px 10px;
351
+ border-radius: 10px;
352
+ border: none;
353
+ background: transparent;
354
+ color: var(--nuvio-dim);
355
+ cursor: pointer;
356
+ transition:
357
+ background 0.18s ease,
358
+ color 0.18s ease,
359
+ box-shadow 0.18s ease;
360
+ }
361
+
362
+ .nuvio-editor-tab-label {
363
+ font-size: 12px;
364
+ font-weight: 700;
365
+ letter-spacing: 0.01em;
366
+ line-height: 1.2;
367
+ }
368
+
369
+ .nuvio-editor-tab-hint {
370
+ font-size: 10px;
371
+ font-weight: 500;
372
+ opacity: 0.72;
373
+ line-height: 1.2;
374
+ }
375
+
376
+ .nuvio-editor-tab:hover {
377
+ color: var(--nuvio-text-soft);
378
+ background: rgba(255, 255, 255, 0.05);
379
+ }
380
+
381
+ .nuvio-editor-tab--active {
382
+ background: rgba(255, 255, 255, 0.12);
383
+ color: var(--nuvio-text);
384
+ box-shadow:
385
+ 0 1px 2px rgba(0, 0, 0, 0.35),
386
+ inset 0 1px 0 rgba(255, 255, 255, 0.12);
387
+ }
388
+
389
+ .nuvio-editor-tab--active .nuvio-editor-tab-hint {
390
+ color: var(--nuvio-accent);
391
+ opacity: 1;
392
+ }
393
+
394
+ .nuvio-brand-kit-hint,
395
+ .nuvio-brand-selection-label {
396
+ display: block;
397
+ font-size: 12px;
398
+ line-height: 1.45;
399
+ }
400
+
401
+ .nuvio-brand-kit-hint {
402
+ color: var(--nuvio-muted);
403
+ }
404
+
405
+ .nuvio-brand-selection-label {
406
+ margin-bottom: 2px;
407
+ font-size: 10px;
408
+ font-weight: 600;
409
+ letter-spacing: 0.06em;
410
+ text-transform: uppercase;
411
+ color: var(--nuvio-dim);
412
+ }
413
+
414
+ .nuvio-brand-kit {
415
+ display: flex;
416
+ flex-direction: column;
417
+ gap: 14px;
418
+ }
419
+
420
+ .nuvio-brand-kit-lead {
421
+ margin: 0;
422
+ font-size: 12px;
423
+ line-height: 1.5;
424
+ color: var(--nuvio-muted);
425
+ }
426
+
427
+ .nuvio-brand-first-run {
428
+ padding: 12px 14px;
429
+ border-radius: 14px;
430
+ border: 1px solid rgba(96, 165, 250, 0.22);
431
+ background: rgba(37, 99, 235, 0.08);
432
+ }
433
+
434
+ .nuvio-brand-first-run-steps {
435
+ margin: 0;
436
+ padding-left: 18px;
437
+ display: flex;
438
+ flex-direction: column;
439
+ gap: 6px;
440
+ }
441
+
442
+ .nuvio-brand-presets {
443
+ display: flex;
444
+ flex-direction: column;
445
+ gap: 12px;
446
+ }
447
+
448
+ .nuvio-brand-empty-state {
449
+ padding: 16px 14px;
450
+ border-radius: 14px;
451
+ border: 1px dashed rgba(255, 255, 255, 0.16);
452
+ background: rgba(0, 0, 0, 0.2);
453
+ }
454
+
455
+ .nuvio-brand-empty-title {
456
+ margin: 0 0 6px;
457
+ font-size: 0.8125rem;
458
+ font-weight: 600;
459
+ color: var(--nuvio-text);
460
+ }
461
+
462
+ .nuvio-brand-empty-body {
463
+ margin: 0;
464
+ font-size: 11px;
465
+ line-height: 1.5;
466
+ color: var(--nuvio-dim);
467
+ }
468
+
469
+ .nuvio-brand-non-brandable {
470
+ margin: 0;
471
+ }
472
+
473
+ .nuvio-brand-category {
474
+ display: flex;
475
+ flex-direction: column;
476
+ gap: 8px;
477
+ }
478
+
479
+ .nuvio-brand-category-row {
480
+ display: flex;
481
+ flex-wrap: wrap;
482
+ gap: 6px;
483
+ }
484
+
485
+ .nuvio-brand-category-chip {
486
+ padding: 6px 10px;
487
+ border-radius: 999px;
488
+ border: 1px solid rgba(255, 255, 255, 0.12);
489
+ background: rgba(255, 255, 255, 0.04);
490
+ color: var(--nuvio-dim);
491
+ font-size: 11px;
492
+ font-weight: 600;
493
+ line-height: 1.2;
494
+ cursor: pointer;
495
+ }
496
+
497
+ .nuvio-brand-category-chip:hover:not(:disabled) {
498
+ border-color: rgba(255, 255, 255, 0.22);
499
+ color: var(--nuvio-text);
500
+ }
501
+
502
+ .nuvio-brand-category-chip--active {
503
+ border-color: rgba(96, 165, 250, 0.55);
504
+ background: rgba(37, 99, 235, 0.18);
505
+ color: #dbeafe;
506
+ }
507
+
508
+ .nuvio-brand-category-chip:disabled {
509
+ opacity: 0.42;
510
+ cursor: not-allowed;
511
+ }
512
+
513
+ .nuvio-brand-fixed-recipe-note {
514
+ margin: 0;
515
+ font-size: 11px;
516
+ line-height: 1.45;
517
+ color: var(--nuvio-dim);
518
+ }
519
+
520
+ .nuvio-brand-presets-grid {
521
+ display: grid;
522
+ grid-template-columns: 1fr 1fr;
523
+ gap: 12px;
524
+ }
525
+
526
+ .nuvio-brand-field {
527
+ display: flex;
528
+ flex-direction: column;
529
+ gap: 6px;
530
+ }
531
+
532
+ .nuvio-brand-field-label {
533
+ margin: 0;
534
+ font-size: 10px;
535
+ font-weight: 700;
536
+ letter-spacing: 0.07em;
537
+ text-transform: uppercase;
538
+ color: var(--nuvio-dim);
539
+ }
540
+
541
+ .nuvio-brand-chip-row {
542
+ display: flex;
543
+ flex-wrap: wrap;
544
+ gap: 6px;
545
+ }
546
+
547
+ .nuvio-brand-chip {
548
+ flex: 1 1 auto;
549
+ min-width: 0;
550
+ min-height: 32px;
551
+ padding: 6px 10px;
552
+ border-radius: 10px;
553
+ border: 1px solid rgba(255, 255, 255, 0.1);
554
+ background: rgba(0, 0, 0, 0.28);
555
+ color: var(--nuvio-text-soft);
556
+ font-size: 11px;
557
+ font-weight: 600;
558
+ font-family: inherit;
559
+ cursor: pointer;
560
+ transition:
561
+ background 0.15s ease,
562
+ border-color 0.15s ease,
563
+ color 0.15s ease;
564
+ }
565
+
566
+ .nuvio-brand-chip:hover {
567
+ border-color: rgba(255, 255, 255, 0.18);
568
+ background: rgba(255, 255, 255, 0.08);
569
+ }
570
+
571
+ .nuvio-brand-chip--active {
572
+ border-color: rgba(59, 130, 246, 0.55);
573
+ background: linear-gradient(180deg, rgba(59, 130, 246, 0.35), rgba(37, 99, 235, 0.28));
574
+ color: #ffffff;
575
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
576
+ }
577
+
578
+ .nuvio-brand-color-row {
579
+ display: grid;
580
+ grid-template-columns: repeat(5, minmax(0, 1fr));
581
+ gap: 6px;
582
+ }
583
+
584
+ .nuvio-brand-color-swatch {
585
+ display: flex;
586
+ flex-direction: column;
587
+ align-items: center;
588
+ gap: 5px;
589
+ min-width: 0;
590
+ padding: 8px 4px 6px;
591
+ border-radius: 12px;
592
+ border: 1px solid rgba(255, 255, 255, 0.08);
593
+ background: rgba(0, 0, 0, 0.22);
594
+ cursor: pointer;
595
+ transition:
596
+ border-color 0.15s ease,
597
+ background 0.15s ease,
598
+ transform 0.15s ease;
599
+ }
600
+
601
+ .nuvio-brand-color-swatch:hover {
602
+ border-color: rgba(255, 255, 255, 0.16);
603
+ background: rgba(255, 255, 255, 0.06);
604
+ }
605
+
606
+ .nuvio-brand-color-swatch--active {
607
+ border-color: rgba(125, 211, 252, 0.65);
608
+ background: rgba(59, 130, 246, 0.16);
609
+ box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
610
+ }
611
+
612
+ .nuvio-brand-color-swatch-dot {
613
+ width: 22px;
614
+ height: 22px;
615
+ border-radius: 999px;
616
+ border: 2px solid rgba(255, 255, 255, 0.85);
617
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
618
+ }
619
+
620
+ .nuvio-brand-color-swatch-dot--none {
621
+ background: repeating-linear-gradient(
622
+ 45deg,
623
+ rgba(255, 255, 255, 0.12),
624
+ rgba(255, 255, 255, 0.12) 4px,
625
+ rgba(255, 255, 255, 0.04) 4px,
626
+ rgba(255, 255, 255, 0.04) 8px
627
+ );
628
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
629
+ }
630
+
631
+ .nuvio-brand-color-swatch-label {
632
+ font-size: 9px;
633
+ font-weight: 600;
634
+ color: var(--nuvio-muted);
635
+ text-align: center;
636
+ line-height: 1.1;
637
+ }
638
+
639
+ .nuvio-brand-color-swatch--active .nuvio-brand-color-swatch-label {
640
+ color: var(--nuvio-text);
641
+ }
642
+
643
+ .nuvio-brand-preview {
644
+ display: flex;
645
+ flex-direction: column;
646
+ gap: 8px;
647
+ }
648
+
649
+ .nuvio-brand-preview-lead {
650
+ margin: 0;
651
+ font-size: 11px;
652
+ line-height: 1.45;
653
+ color: var(--nuvio-dim);
654
+ }
655
+
656
+ .nuvio-brand-on-page-hint {
657
+ margin: 0;
658
+ padding: 10px 12px;
659
+ border-radius: 10px;
660
+ border: 1px solid rgba(255, 255, 255, 0.08);
661
+ background: rgba(255, 255, 255, 0.04);
662
+ font-size: 11px;
663
+ line-height: 1.45;
664
+ color: var(--nuvio-muted);
665
+ }
666
+
667
+ .nuvio-brand-preview-canvas {
668
+ padding: 14px;
669
+ border-radius: 16px;
670
+ border: 1px solid rgba(255, 255, 255, 0.1);
671
+ background:
672
+ radial-gradient(circle at 12% 8%, rgba(255, 255, 255, 0.08), transparent 36%),
673
+ rgba(0, 0, 0, 0.34);
674
+ }
675
+
676
+ .nuvio-brand-preview-samples {
677
+ display: flex;
678
+ flex-direction: column;
679
+ gap: 12px;
680
+ }
681
+
682
+ .nuvio-brand-preview-button {
683
+ display: inline-block;
684
+ align-self: flex-start;
685
+ font-size: 0.8125rem;
686
+ font-weight: 600;
687
+ line-height: 1.2;
688
+ }
689
+
690
+ .nuvio-brand-preview-card {
691
+ display: flex;
692
+ flex-direction: column;
693
+ gap: 6px;
694
+ }
695
+
696
+ .nuvio-brand-preview-heading {
697
+ line-height: 1.3;
698
+ }
699
+
700
+ .nuvio-brand-preview-body {
701
+ font-size: 0.8125rem;
702
+ line-height: 1.45;
703
+ color: #4b5563;
704
+ }
705
+
706
+ .nuvio-brand-sample-text {
707
+ max-width: 18rem;
708
+ }
709
+
710
+ .nuvio-brand-sample-table {
711
+ overflow: hidden;
712
+ width: 100%;
713
+ background: rgba(255, 255, 255, 0.96);
714
+ }
715
+
716
+ .nuvio-brand-sample-table-row {
717
+ display: grid;
718
+ grid-template-columns: 1fr 1fr;
719
+ gap: 8px;
720
+ padding: 8px 10px;
721
+ font-size: 0.75rem;
722
+ color: #374151;
723
+ border-top: 1px solid rgba(15, 23, 42, 0.08);
724
+ }
725
+
726
+ .nuvio-brand-sample-table-row:first-child {
727
+ border-top: none;
728
+ }
729
+
730
+ .nuvio-brand-sample-table-row--head {
731
+ font-weight: 600;
732
+ background: rgba(15, 23, 42, 0.04);
733
+ }
734
+
735
+ .nuvio-brand-sample-form {
736
+ display: flex;
737
+ flex-direction: column;
738
+ gap: 6px;
739
+ width: 100%;
740
+ }
741
+
742
+ .nuvio-brand-sample-form-label {
743
+ font-size: 0.75rem;
744
+ font-weight: 600;
745
+ color: #374151;
746
+ }
747
+
748
+ .nuvio-brand-sample-form-input {
749
+ display: block;
750
+ width: 100%;
751
+ font-size: 0.8125rem;
752
+ color: #6b7280;
753
+ background: rgba(255, 255, 255, 0.96);
754
+ }
755
+
756
+ .nuvio-brand-sample-badge {
757
+ display: inline-flex;
758
+ align-self: flex-start;
759
+ padding: 4px 10px;
760
+ font-size: 0.75rem;
761
+ font-weight: 600;
762
+ line-height: 1.2;
763
+ }
764
+
765
+ .nuvio-brand-section {
766
+ display: flex;
767
+ flex-direction: column;
768
+ gap: 8px;
769
+ padding-top: 10px;
770
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
771
+ }
772
+
773
+ .nuvio-brand-section:first-of-type {
774
+ border-top: none;
775
+ padding-top: 0;
776
+ }
777
+
778
+ .nuvio-brand-apply-lead {
779
+ margin: 0;
780
+ font-size: 11px;
781
+ line-height: 1.45;
782
+ color: var(--nuvio-dim);
783
+ }
784
+
785
+ .nuvio-brand-apply-grid .nuvio-brand-apply-btn {
786
+ width: 100%;
787
+ }
788
+
789
+ .nuvio-brand-save-bar {
790
+ display: flex;
791
+ flex-direction: column;
792
+ gap: 6px;
793
+ padding-top: 2px;
794
+ }
795
+
796
+ .nuvio-brand-save-btn {
797
+ width: 100%;
798
+ }
799
+
800
+ .nuvio-brand-save-status {
801
+ font-size: 11px;
802
+ color: var(--nuvio-dim);
803
+ text-align: center;
804
+ }
805
+
806
+ .nuvio-brand-save-status--warn {
807
+ color: var(--nuvio-warning);
808
+ }
809
+
810
+ .nuvio-brand-apply {
811
+ display: flex;
812
+ flex-direction: column;
813
+ gap: 8px;
814
+ padding-top: 4px;
815
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
816
+ }
817
+
818
+ .nuvio-brand-apply-note {
819
+ margin: 0;
820
+ font-size: 11px;
821
+ line-height: 1.4;
822
+ color: var(--nuvio-warning);
823
+ }
824
+
825
+ .nuvio-brand-apply-grid {
826
+ display: grid;
827
+ grid-template-columns: 1fr 1fr;
828
+ gap: 8px;
829
+ }
830
+
831
+ .nuvio-brand-apply-btn {
832
+ min-height: 36px;
833
+ padding: 8px 10px;
834
+ border-radius: 10px;
835
+ border: 1px solid rgba(255, 255, 255, 0.12);
836
+ background: rgba(0, 0, 0, 0.3);
837
+ color: var(--nuvio-text-soft);
838
+ font-size: 12px;
839
+ font-weight: 600;
840
+ font-family: inherit;
841
+ cursor: pointer;
842
+ transition:
843
+ background 0.15s ease,
844
+ border-color 0.15s ease;
845
+ }
846
+
847
+ .nuvio-brand-apply-btn:hover {
848
+ background: rgba(255, 255, 255, 0.1);
849
+ border-color: rgba(255, 255, 255, 0.2);
850
+ color: var(--nuvio-text);
851
+ }
852
+
853
+ .nuvio-brand-apply-on-page {
854
+ display: flex;
855
+ flex-direction: column;
856
+ gap: 8px;
857
+ padding-top: 4px;
858
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
859
+ }
860
+
861
+ .nuvio-brand-apply-on-page-lead {
862
+ margin: 0;
863
+ font-size: 11px;
864
+ line-height: 1.45;
865
+ color: var(--nuvio-dim);
866
+ }
867
+
868
+ .nuvio-brand-apply-on-page-btn {
869
+ align-self: flex-start;
870
+ }
871
+
872
+ .nuvio-brand-bulk {
873
+ display: flex;
874
+ flex-direction: column;
875
+ gap: 8px;
876
+ padding-top: 4px;
877
+ border-top: 1px solid rgba(255, 255, 255, 0.08);
878
+ }
879
+
880
+ .nuvio-brand-bulk-lead {
881
+ margin: 0;
882
+ font-size: 11px;
883
+ line-height: 1.45;
884
+ color: var(--nuvio-dim);
885
+ }
886
+
887
+ .nuvio-brand-bulk-grid {
888
+ display: flex;
889
+ flex-direction: column;
890
+ gap: 6px;
891
+ }
892
+
893
+ .nuvio-brand-bulk-btn {
894
+ min-height: 34px;
895
+ padding: 8px 10px;
896
+ border-radius: 10px;
897
+ border: 1px solid rgba(125, 211, 252, 0.22);
898
+ background: rgba(59, 130, 246, 0.12);
899
+ color: var(--nuvio-text-soft);
900
+ font-size: 11px;
901
+ font-weight: 600;
902
+ font-family: inherit;
903
+ text-align: left;
904
+ cursor: pointer;
905
+ transition:
906
+ background 0.15s ease,
907
+ border-color 0.15s ease;
908
+ }
909
+
910
+ .nuvio-brand-bulk-btn:hover:not(:disabled) {
911
+ background: rgba(59, 130, 246, 0.2);
912
+ border-color: rgba(125, 211, 252, 0.35);
913
+ color: var(--nuvio-text);
914
+ }
915
+
916
+ .nuvio-brand-bulk-btn:disabled {
917
+ opacity: 0.45;
918
+ cursor: not-allowed;
919
+ }
920
+
921
+ .nuvio-brand-bulk-primary {
922
+ width: 100%;
923
+ }
924
+
331
925
  .nuvio-toggle-details {
332
926
  flex-shrink: 0;
333
927
  max-width: 9.5rem;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nuvio/overlay",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "Nuvio overlay 1.0 — dev-only visual editor for React + Vite + Tailwind (Simple Mode, click-to-tag, apply/undo).",
5
5
  "license": "MIT",
6
6
  "repository": {
@@ -45,7 +45,8 @@
45
45
  },
46
46
  "dependencies": {
47
47
  "posthog-js": "^1.380.1",
48
- "@nuvio/shared": "1.0.0"
48
+ "tailwind-merge": "^2.6.0",
49
+ "@nuvio/shared": "1.1.0"
49
50
  },
50
51
  "devDependencies": {
51
52
  "@types/react": "^19.0.8",
@@ -55,7 +56,8 @@
55
56
  "react-dom": "^19.0.0",
56
57
  "tsup": "^8.4.0",
57
58
  "typescript": "^5.7.3",
58
- "vitest": "^3.0.6"
59
+ "vitest": "^3.0.6",
60
+ "@nuvio/ast-engine": "1.1.0"
59
61
  },
60
62
  "scripts": {
61
63
  "build": "tsup",