pi-studio 0.7.1 → 0.8.1

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/CHANGELOG.md +12 -0
  2. package/README.md +6 -4
  3. package/client/studio-client.js +796 -29
  4. package/client/studio.css +169 -0
  5. package/index.ts +1151 -17
  6. package/package.json +1 -1
package/client/studio.css CHANGED
@@ -59,6 +59,67 @@
59
59
  flex-wrap: wrap;
60
60
  }
61
61
 
62
+ .export-preview-controls {
63
+ position: relative;
64
+ display: inline-flex;
65
+ align-items: center;
66
+ flex-wrap: nowrap;
67
+ overflow: visible;
68
+ }
69
+
70
+ .export-preview-trigger {
71
+ display: inline-flex;
72
+ align-items: center;
73
+ gap: 6px;
74
+ min-height: 32px;
75
+ white-space: nowrap;
76
+ }
77
+
78
+ .export-preview-trigger::after {
79
+ content: "⌄";
80
+ color: var(--muted);
81
+ font-size: 14px;
82
+ line-height: 1;
83
+ transform: translateY(-1px);
84
+ }
85
+
86
+ .export-preview-trigger.is-open,
87
+ .export-preview-trigger:not(:disabled):hover {
88
+ background: var(--panel-2);
89
+ }
90
+
91
+ .export-preview-menu {
92
+ position: absolute;
93
+ top: calc(100% + 8px);
94
+ right: 0;
95
+ min-width: 180px;
96
+ padding: 6px;
97
+ border: 1px solid var(--panel-border);
98
+ border-radius: 12px;
99
+ background: var(--panel);
100
+ box-shadow: 0 18px 46px var(--shadow-color);
101
+ z-index: 100;
102
+ }
103
+
104
+ .export-preview-menu[hidden] {
105
+ display: none !important;
106
+ }
107
+
108
+ .export-preview-menu button {
109
+ display: block;
110
+ width: 100%;
111
+ text-align: left;
112
+ border-color: transparent;
113
+ background: transparent;
114
+ color: var(--text);
115
+ font-weight: 450;
116
+ }
117
+
118
+ .export-preview-menu button:not(:disabled):hover,
119
+ .export-preview-menu button:not(:disabled):focus-visible {
120
+ background: var(--panel-2);
121
+ }
122
+
62
123
  button, select, .file-label {
63
124
  border: 1px solid var(--control-border);
64
125
  background: var(--panel);
@@ -1449,6 +1510,114 @@
1449
1510
  background: #fff;
1450
1511
  }
1451
1512
 
1513
+ .rendered-markdown .studio-html-artifact-shell {
1514
+ display: flex;
1515
+ flex-direction: column;
1516
+ min-height: min(760px, calc(100vh - 190px));
1517
+ border: 1px solid var(--panel-border);
1518
+ border-radius: 12px;
1519
+ background: var(--panel);
1520
+ overflow: hidden;
1521
+ box-shadow: 0 1px 2px var(--shadow-color);
1522
+ }
1523
+
1524
+ .rendered-markdown .studio-html-artifact-toolbar {
1525
+ display: flex;
1526
+ align-items: center;
1527
+ justify-content: space-between;
1528
+ gap: 10px;
1529
+ padding: 8px 10px;
1530
+ border-bottom: 1px solid var(--border-subtle);
1531
+ background: var(--panel-2);
1532
+ color: var(--studio-info-text, var(--muted));
1533
+ font-family: var(--font-ui);
1534
+ font-size: 12px;
1535
+ line-height: 1.25;
1536
+ }
1537
+
1538
+ .rendered-markdown .studio-html-artifact-label {
1539
+ min-width: 0;
1540
+ overflow: hidden;
1541
+ text-overflow: ellipsis;
1542
+ white-space: nowrap;
1543
+ color: var(--text);
1544
+ font-weight: 600;
1545
+ }
1546
+
1547
+ .rendered-markdown .studio-html-artifact-tools {
1548
+ flex: 0 0 auto;
1549
+ display: inline-flex;
1550
+ align-items: center;
1551
+ gap: 10px;
1552
+ min-width: 0;
1553
+ }
1554
+
1555
+ .rendered-markdown .studio-html-artifact-detail {
1556
+ flex: 0 0 auto;
1557
+ color: var(--muted);
1558
+ font-size: 11px;
1559
+ white-space: nowrap;
1560
+ }
1561
+
1562
+ .rendered-markdown .studio-html-artifact-zoom-controls {
1563
+ flex: 0 0 auto;
1564
+ display: inline-flex;
1565
+ align-items: center;
1566
+ gap: 3px;
1567
+ padding: 2px;
1568
+ border: 1px solid var(--control-border);
1569
+ border-radius: 999px;
1570
+ background: var(--panel);
1571
+ }
1572
+
1573
+ .rendered-markdown .studio-html-artifact-zoom-btn {
1574
+ min-width: 24px;
1575
+ height: 22px;
1576
+ padding: 0 7px;
1577
+ border: 0;
1578
+ border-radius: 999px;
1579
+ background: transparent;
1580
+ color: var(--text);
1581
+ font: inherit;
1582
+ font-size: 11px;
1583
+ line-height: 1;
1584
+ cursor: pointer;
1585
+ }
1586
+
1587
+ .rendered-markdown .studio-html-artifact-zoom-btn:not(:disabled):hover,
1588
+ .rendered-markdown .studio-html-artifact-zoom-btn:not(:disabled):focus-visible {
1589
+ background: var(--control-hover-bg, var(--inline-code-bg));
1590
+ outline: none;
1591
+ }
1592
+
1593
+ .rendered-markdown .studio-html-artifact-zoom-btn:disabled {
1594
+ color: var(--muted);
1595
+ cursor: default;
1596
+ opacity: 0.45;
1597
+ }
1598
+
1599
+ .rendered-markdown .studio-html-artifact-zoom-reset {
1600
+ min-width: 42px;
1601
+ color: var(--muted);
1602
+ }
1603
+
1604
+ .rendered-markdown .studio-html-artifact-frame {
1605
+ display: block;
1606
+ flex: 1 1 auto;
1607
+ width: 100%;
1608
+ min-height: 520px;
1609
+ border: 0;
1610
+ background: #fff;
1611
+ }
1612
+
1613
+ .rendered-markdown .studio-html-artifact-shell.is-height-capped .studio-html-artifact-toolbar {
1614
+ border-bottom-color: var(--control-border);
1615
+ }
1616
+
1617
+ .rendered-markdown .studio-html-artifact-frame.is-height-capped {
1618
+ overflow: auto;
1619
+ }
1620
+
1452
1621
  .rendered-markdown .studio-subfigure-group {
1453
1622
  margin: 1.25em auto;
1454
1623
  }