@magpiecloud/mags 1.8.13 → 1.8.14

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.
@@ -10,7 +10,7 @@
10
10
  />
11
11
  <meta name="api-base" content="https://api.magpiecloud.com" />
12
12
  <meta name="auth-base" content="https://api.magpiecloud.com" />
13
- <link rel="stylesheet" href="styles.css?v=7" />
13
+ <link rel="stylesheet" href="styles.css?v=8" />
14
14
  <script src="env.js"></script>
15
15
  </head>
16
16
  <body>
@@ -23,7 +23,7 @@
23
23
  <span class="tag">Secure cloud sandboxes for the AI age</span>
24
24
  </div>
25
25
  <nav class="nav-links">
26
- <a href="#quickstart">Docs</a>
26
+ <a href="docs.html">Docs</a>
27
27
  <a href="api.html">API</a>
28
28
  <a href="cookbook.html">Cookbook</a>
29
29
  <a href="https://discord.gg/3avpC2nS" target="_blank" rel="noreferrer">Discord</a>
@@ -47,7 +47,7 @@
47
47
  automatically. CLI, Python, and Node.js &mdash; pick your tool.
48
48
  </p>
49
49
  <div class="hero-actions">
50
- <a class="button" href="#quickstart">Quickstart</a>
50
+ <a class="button" href="docs.html#quickstart">Quickstart</a>
51
51
  <a class="button ghost" href="api.html">API Reference</a>
52
52
  </div>
53
53
  </div>
@@ -7,7 +7,7 @@
7
7
  <meta name="description" content="Sign in to Mags with Google." />
8
8
  <meta name="api-base" content="https://api.magpiecloud.com" />
9
9
  <meta name="auth-base" content="https://api.magpiecloud.com" />
10
- <link rel="stylesheet" href="styles.css?v=6" />
10
+ <link rel="stylesheet" href="styles.css?v=8" />
11
11
  <script src="env.js"></script>
12
12
  </head>
13
13
  <body>
@@ -21,7 +21,7 @@
21
21
  </div>
22
22
  <nav class="nav-links">
23
23
  <a href="index.html">Home</a>
24
- <a href="index.html#quickstart">Docs</a>
24
+ <a href="docs.html">Docs</a>
25
25
  <a href="api.html">API</a>
26
26
  <a href="cookbook.html">Cookbook</a>
27
27
  <a href="https://discord.gg/3avpC2nS" target="_blank" rel="noreferrer">Discord</a>
@@ -1,16 +1,18 @@
1
1
  @import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");
2
2
 
3
3
  :root {
4
- color-scheme: light;
5
- --bg: #fafafa;
6
- --surface: #ffffff;
7
- --surface-muted: #f4f4f5;
8
- --text: #0a0a0a;
9
- --text-muted: #666666;
10
- --border: #e5e7eb;
4
+ color-scheme: dark;
5
+ --bg: #090c12;
6
+ --bg-muted: #111723;
7
+ --surface: rgba(22, 29, 42, 0.95);
8
+ --surface-muted: rgba(15, 20, 28, 0.78);
9
+ --text: #f8fafc;
10
+ --text-muted: #94a3b8;
11
+ --border: rgba(148, 163, 184, 0.16);
11
12
  --accent: #2f9b66;
12
- --accent-strong: #237c52;
13
- --shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
13
+ --accent-strong: #3dbd7e;
14
+ --accent-soft: rgba(47, 155, 102, 0.16);
15
+ --shadow: 0 24px 60px rgba(8, 15, 30, 0.45);
14
16
  --radius: 18px;
15
17
  --radius-sm: 12px;
16
18
  --max-width: 1120px;
@@ -28,6 +30,7 @@ body {
28
30
  background: var(--bg);
29
31
  color: var(--text);
30
32
  line-height: 1.7;
33
+ -webkit-font-smoothing: antialiased;
31
34
  }
32
35
 
33
36
  a {
@@ -43,9 +46,10 @@ a:hover {
43
46
  position: fixed;
44
47
  inset: 0;
45
48
  z-index: -1;
46
- background: radial-gradient(circle at top left, rgba(47, 143, 99, 0.12), transparent 55%),
47
- radial-gradient(circle at 20% 80%, rgba(47, 143, 99, 0.08), transparent 45%),
48
- #fafafa;
49
+ background:
50
+ radial-gradient(circle at 18% 20%, rgba(47, 155, 102, 0.12), transparent 45%),
51
+ radial-gradient(circle at 82% 8%, rgba(35, 112, 74, 0.14), transparent 55%),
52
+ var(--bg);
49
53
  }
50
54
 
51
55
  .container {
@@ -56,9 +60,9 @@ a:hover {
56
60
  .site-header {
57
61
  position: sticky;
58
62
  top: 0;
59
- background: rgba(250, 250, 250, 0.92);
63
+ background: rgba(9, 12, 18, 0.88);
60
64
  border-bottom: 1px solid var(--border);
61
- backdrop-filter: blur(12px);
65
+ backdrop-filter: blur(16px);
62
66
  z-index: 5;
63
67
  }
64
68
 
@@ -109,7 +113,7 @@ a:hover {
109
113
  font-weight: 600;
110
114
  border: 1px solid transparent;
111
115
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
112
- box-shadow: 0 14px 30px rgba(47, 143, 99, 0.18);
116
+ box-shadow: 0 14px 30px rgba(47, 155, 102, 0.2);
113
117
  }
114
118
 
115
119
  .button.full {
@@ -119,6 +123,7 @@ a:hover {
119
123
  .button:hover {
120
124
  transform: translateY(-1px);
121
125
  background: var(--accent-strong);
126
+ color: #ffffff;
122
127
  }
123
128
 
124
129
  .button.ghost {
@@ -156,7 +161,7 @@ a:hover {
156
161
  align-items: center;
157
162
  padding: 0.2rem 0.7rem;
158
163
  border-radius: 999px;
159
- background: rgba(47, 143, 99, 0.12);
164
+ background: var(--accent-soft);
160
165
  color: var(--accent-strong);
161
166
  font-size: 0.75rem;
162
167
  font-weight: 600;
@@ -339,14 +344,14 @@ a:hover {
339
344
  padding: 0.7rem 0.9rem;
340
345
  font-size: 0.95rem;
341
346
  font-family: var(--sans);
342
- background: #ffffff;
347
+ background: rgba(17, 24, 39, 0.65);
343
348
  color: var(--text);
344
349
  }
345
350
 
346
351
  .input:focus {
347
352
  outline: none;
348
353
  border-color: var(--accent);
349
- box-shadow: 0 0 0 3px rgba(47, 143, 99, 0.15);
354
+ box-shadow: 0 0 0 3px rgba(47, 155, 102, 0.2);
350
355
  }
351
356
 
352
357
  .form-message {
@@ -455,7 +460,7 @@ a:hover {
455
460
  }
456
461
 
457
462
  .list code {
458
- color: var(--text);
463
+ color: var(--accent-strong);
459
464
  }
460
465
 
461
466
  .command-list {
@@ -493,7 +498,7 @@ a:hover {
493
498
 
494
499
  .copy-button {
495
500
  border: 1px solid var(--border);
496
- background: #ffffff;
501
+ background: var(--surface);
497
502
  color: var(--text-muted);
498
503
  border-radius: 999px;
499
504
  font-size: 0.75rem;
@@ -514,9 +519,9 @@ a:hover {
514
519
  }
515
520
 
516
521
  .revoke-button {
517
- border: 1px solid var(--border);
518
- background: #ffffff;
519
- color: #b91c1c;
522
+ border: 1px solid rgba(248, 113, 113, 0.35);
523
+ background: rgba(248, 113, 113, 0.08);
524
+ color: #f87171;
520
525
  border-radius: 999px;
521
526
  font-size: 0.75rem;
522
527
  padding: 0.35rem 0.75rem;
@@ -526,7 +531,7 @@ a:hover {
526
531
 
527
532
  .revoke-button:hover {
528
533
  border-color: #f87171;
529
- color: #991b1b;
534
+ color: #fca5a5;
530
535
  transform: translateY(-1px);
531
536
  }
532
537
 
@@ -549,7 +554,7 @@ a:hover {
549
554
  }
550
555
 
551
556
  .table-header {
552
- background: var(--surface-muted);
557
+ background: var(--bg-muted);
553
558
  color: var(--text-muted);
554
559
  text-transform: uppercase;
555
560
  letter-spacing: 0.08em;
@@ -575,19 +580,19 @@ a:hover {
575
580
  font-size: 0.72rem;
576
581
  text-transform: uppercase;
577
582
  letter-spacing: 0.05em;
578
- background: rgba(47, 143, 99, 0.12);
583
+ background: var(--accent-soft);
579
584
  color: var(--accent-strong);
580
585
  }
581
586
 
582
587
  .status.error {
583
- background: rgba(239, 68, 68, 0.12);
584
- color: #b91c1c;
588
+ background: rgba(248, 113, 113, 0.12);
589
+ color: #f87171;
585
590
  }
586
591
 
587
592
  .status.pending,
588
593
  .status.sleeping {
589
- background: rgba(234, 179, 8, 0.15);
590
- color: #92400e;
594
+ background: rgba(245, 158, 11, 0.15);
595
+ color: #f59e0b;
591
596
  }
592
597
 
593
598
  .text-link {
@@ -621,8 +626,8 @@ a:hover {
621
626
  margin-top: 1rem;
622
627
  padding: 0.8rem 1rem;
623
628
  border-radius: 12px;
624
- background: var(--surface-muted);
625
- border: 1px solid rgba(47, 143, 99, 0.2);
629
+ background: var(--accent-soft);
630
+ border: 1px solid rgba(47, 155, 102, 0.25);
626
631
  color: var(--text-muted);
627
632
  }
628
633
 
@@ -638,7 +643,7 @@ a:hover {
638
643
  }
639
644
 
640
645
  pre {
641
- background: var(--surface-muted);
646
+ background: rgba(15, 20, 28, 0.78);
642
647
  border-radius: var(--radius-sm);
643
648
  padding: 0.9rem 1rem;
644
649
  border: 1px solid var(--border);
@@ -648,6 +653,7 @@ pre {
648
653
  white-space: pre-wrap;
649
654
  word-break: break-word;
650
655
  overflow: hidden;
656
+ color: var(--text);
651
657
  }
652
658
 
653
659
  code {
@@ -658,7 +664,7 @@ code {
658
664
  .site-footer {
659
665
  padding: 3rem 0 4rem;
660
666
  border-top: 1px solid var(--border);
661
- background: #ffffff;
667
+ background: var(--bg-muted);
662
668
  }
663
669
 
664
670
  .footer-grid {
@@ -725,7 +731,7 @@ code {
725
731
  gap: 0.35rem;
726
732
  margin-bottom: 1.2rem;
727
733
  padding: 0.25rem;
728
- background: var(--surface-muted);
734
+ background: var(--bg-muted);
729
735
  border: 1px solid var(--border);
730
736
  border-radius: 10px;
731
737
  width: fit-content;
@@ -751,7 +757,7 @@ code {
751
757
  .tab-bar .tab.active {
752
758
  background: var(--accent);
753
759
  color: #ffffff;
754
- box-shadow: 0 1px 4px rgba(47, 143, 99, 0.2);
760
+ box-shadow: 0 1px 4px rgba(47, 155, 102, 0.3);
755
761
  }
756
762
 
757
763
  .tab-content {
@@ -778,7 +784,7 @@ code {
778
784
  }
779
785
 
780
786
  .pattern-card:hover {
781
- box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
787
+ box-shadow: 0 4px 16px rgba(8, 15, 30, 0.4);
782
788
  }
783
789
 
784
790
  .pattern-header {
@@ -849,7 +855,7 @@ code {
849
855
  }
850
856
 
851
857
  .ref-table thead {
852
- background: var(--surface-muted);
858
+ background: var(--bg-muted);
853
859
  }
854
860
 
855
861
  .ref-table th {
@@ -866,6 +872,7 @@ code {
866
872
  padding: 0.6rem 1rem;
867
873
  border-top: 1px solid var(--border);
868
874
  vertical-align: top;
875
+ color: var(--text-muted);
869
876
  }
870
877
 
871
878
  .ref-table td:first-child {
@@ -875,7 +882,7 @@ code {
875
882
  .ref-table code {
876
883
  font-family: var(--mono);
877
884
  font-size: 0.82rem;
878
- background: var(--surface-muted);
885
+ background: rgba(15, 20, 28, 0.6);
879
886
  padding: 0.15rem 0.4rem;
880
887
  border-radius: 4px;
881
888
  }
@@ -896,6 +903,166 @@ code {
896
903
  margin-bottom: 0.6rem;
897
904
  }
898
905
 
906
+ /* ── Docs layout ───────────────────────────────────────── */
907
+
908
+ .docs-layout {
909
+ display: grid;
910
+ grid-template-columns: 240px 1fr;
911
+ gap: 0;
912
+ min-height: calc(100vh - 60px);
913
+ }
914
+
915
+ .docs-sidebar {
916
+ position: sticky;
917
+ top: 60px;
918
+ height: calc(100vh - 60px);
919
+ overflow-y: auto;
920
+ padding: 1.5rem 0 2rem 0;
921
+ border-right: 1px solid var(--border);
922
+ scrollbar-width: thin;
923
+ scrollbar-color: var(--accent-soft) transparent;
924
+ }
925
+
926
+ .docs-sidebar::-webkit-scrollbar {
927
+ width: 4px;
928
+ }
929
+
930
+ .docs-sidebar::-webkit-scrollbar-thumb {
931
+ background: var(--accent-soft);
932
+ border-radius: 999px;
933
+ }
934
+
935
+ .docs-nav {
936
+ display: flex;
937
+ flex-direction: column;
938
+ gap: 0.2rem;
939
+ padding: 0 1rem;
940
+ }
941
+
942
+ .docs-nav-group {
943
+ margin-bottom: 0.6rem;
944
+ }
945
+
946
+ .docs-nav-heading {
947
+ font-size: 0.7rem;
948
+ font-weight: 700;
949
+ text-transform: uppercase;
950
+ letter-spacing: 0.08em;
951
+ color: var(--text-muted);
952
+ padding: 0.6rem 0.75rem 0.3rem;
953
+ margin: 0;
954
+ }
955
+
956
+ .docs-nav-link {
957
+ display: block;
958
+ padding: 0.35rem 0.75rem;
959
+ border-radius: 8px;
960
+ font-size: 0.85rem;
961
+ color: var(--text-muted);
962
+ transition: color 0.15s, background 0.15s;
963
+ border-left: 2px solid transparent;
964
+ }
965
+
966
+ .docs-nav-link:hover {
967
+ color: var(--text);
968
+ background: rgba(148, 163, 184, 0.08);
969
+ }
970
+
971
+ .docs-nav-link.active {
972
+ color: var(--accent-strong);
973
+ background: var(--accent-soft);
974
+ border-left-color: var(--accent);
975
+ }
976
+
977
+ .docs-content {
978
+ padding: 2rem 2.5rem 4rem;
979
+ max-width: 860px;
980
+ }
981
+
982
+ .docs-content h1 {
983
+ font-size: 2rem;
984
+ margin: 0 0 0.5rem;
985
+ line-height: 1.15;
986
+ }
987
+
988
+ .docs-content > .lead {
989
+ margin-bottom: 2rem;
990
+ }
991
+
992
+ .docs-section {
993
+ padding-top: 2.5rem;
994
+ margin-bottom: 1rem;
995
+ }
996
+
997
+ .docs-section h2 {
998
+ font-size: 1.4rem;
999
+ margin: 0 0 0.3rem;
1000
+ padding-bottom: 0.6rem;
1001
+ border-bottom: 1px solid var(--border);
1002
+ }
1003
+
1004
+ .docs-section h3 {
1005
+ font-size: 1.05rem;
1006
+ margin: 1.5rem 0 0.5rem;
1007
+ }
1008
+
1009
+ .docs-section p {
1010
+ color: var(--text-muted);
1011
+ margin: 0.4rem 0 0.8rem;
1012
+ line-height: 1.7;
1013
+ }
1014
+
1015
+ .docs-section pre {
1016
+ margin: 0.6rem 0 1rem;
1017
+ }
1018
+
1019
+ .docs-section .ref-section {
1020
+ margin-bottom: 1.5rem;
1021
+ }
1022
+
1023
+ .docs-section .ref-section h3 {
1024
+ margin-top: 1rem;
1025
+ }
1026
+
1027
+ @media (max-width: 860px) {
1028
+ .docs-layout {
1029
+ grid-template-columns: 1fr;
1030
+ }
1031
+
1032
+ .docs-sidebar {
1033
+ position: static;
1034
+ height: auto;
1035
+ border-right: none;
1036
+ border-bottom: 1px solid var(--border);
1037
+ padding: 1rem 0;
1038
+ }
1039
+
1040
+ .docs-nav {
1041
+ flex-direction: row;
1042
+ flex-wrap: wrap;
1043
+ gap: 0.2rem;
1044
+ padding: 0 1.25rem;
1045
+ }
1046
+
1047
+ .docs-nav-group {
1048
+ margin-bottom: 0;
1049
+ }
1050
+
1051
+ .docs-nav-heading {
1052
+ display: none;
1053
+ }
1054
+
1055
+ .docs-nav-link {
1056
+ border-left: none;
1057
+ font-size: 0.8rem;
1058
+ padding: 0.3rem 0.6rem;
1059
+ }
1060
+
1061
+ .docs-content {
1062
+ padding: 1.5rem 1.25rem 3rem;
1063
+ }
1064
+ }
1065
+
899
1066
  @media (prefers-reduced-motion: reduce) {
900
1067
  * {
901
1068
  scroll-behavior: auto !important;
@@ -10,7 +10,7 @@
10
10
  />
11
11
  <meta name="api-base" content="https://api.magpiecloud.com" />
12
12
  <meta name="auth-base" content="https://api.magpiecloud.com" />
13
- <link rel="stylesheet" href="styles.css?v=6" />
13
+ <link rel="stylesheet" href="styles.css?v=8" />
14
14
  <script src="env.js"></script>
15
15
  </head>
16
16
  <body>
@@ -10,7 +10,7 @@
10
10
  />
11
11
  <meta name="api-base" content="https://api.magpiecloud.com" />
12
12
  <meta name="auth-base" content="https://api.magpiecloud.com" />
13
- <link rel="stylesheet" href="styles.css?v=6" />
13
+ <link rel="stylesheet" href="styles.css?v=8" />
14
14
  <script src="env.js"></script>
15
15
  </head>
16
16
  <body>