@comergehq/studio 0.1.24 → 0.1.26
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/index.js +38 -36
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +44 -42
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
- package/src/components/chat/ChatMessageBubble.tsx +1 -1
- package/src/components/chat/ChatPage.tsx +1 -1
- package/src/components/merge-requests/ReviewMergeRequestCard.tsx +1 -1
- package/src/components/overlays/EdgeGlowFrame.tsx +1 -1
- package/src/components/preview/PreviewStatusBadge.tsx +1 -1
- package/src/components/primitives/MarkdownText.tsx +50 -40
- package/src/studio/ui/preview-panel/PreviewMetaSection.tsx +1 -1
- package/src/theme/tokens.ts +8 -8
package/dist/index.js
CHANGED
|
@@ -62,7 +62,7 @@ var lightTheme = {
|
|
|
62
62
|
surfaceRaised: "#FFFFFF",
|
|
63
63
|
border: "#E4E4E7",
|
|
64
64
|
borderStrong: "#D4D4D8",
|
|
65
|
-
primary: "#
|
|
65
|
+
primary: "#00CBC0",
|
|
66
66
|
onPrimary: "#FFFFFF",
|
|
67
67
|
neutral: "#ECECEE",
|
|
68
68
|
onNeutral: "#09090B",
|
|
@@ -75,13 +75,13 @@ var lightTheme = {
|
|
|
75
75
|
warning: "#FACC15",
|
|
76
76
|
onWarning: "#09090B",
|
|
77
77
|
warningSubtle: "rgba(250, 204, 21, 0.14)",
|
|
78
|
-
link: "#
|
|
78
|
+
link: "#00CBC0",
|
|
79
79
|
backdrop: "rgba(0, 0, 0, 0.35)",
|
|
80
80
|
handleIndicator: "#71717A",
|
|
81
81
|
floatingSurface: "rgba(255, 255, 255, 0.6)",
|
|
82
82
|
floatingContent: "#000000",
|
|
83
|
-
accentRingFrom: "rgba(
|
|
84
|
-
accentRingTo: "rgba(
|
|
83
|
+
accentRingFrom: "rgba(0, 203, 192, 0.20)",
|
|
84
|
+
accentRingTo: "rgba(0, 203, 192, 0.90)",
|
|
85
85
|
dangerRingFrom: "rgba(244, 63, 94, 0.35)",
|
|
86
86
|
dangerRingTo: "rgba(244, 63, 94, 1.0)"
|
|
87
87
|
},
|
|
@@ -104,7 +104,7 @@ var darkTheme = {
|
|
|
104
104
|
surfaceRaised: "#0B080F",
|
|
105
105
|
border: "#404049",
|
|
106
106
|
borderStrong: "#52525B",
|
|
107
|
-
primary: "#
|
|
107
|
+
primary: "#00CBC0",
|
|
108
108
|
onPrimary: "#FFFFFF",
|
|
109
109
|
neutral: "#0B080F",
|
|
110
110
|
onNeutral: "#FFFFFF",
|
|
@@ -117,13 +117,13 @@ var darkTheme = {
|
|
|
117
117
|
warning: "#FBBF24",
|
|
118
118
|
onWarning: "#0B080F",
|
|
119
119
|
warningSubtle: "rgba(251, 191, 36, 0.18)",
|
|
120
|
-
link: "#
|
|
120
|
+
link: "#00CBC0",
|
|
121
121
|
backdrop: "rgba(0, 0, 0, 0.55)",
|
|
122
122
|
handleIndicator: "#A1A1AA",
|
|
123
123
|
floatingSurface: "rgba(0, 0, 0, 0.6)",
|
|
124
124
|
floatingContent: "#FFFFFF",
|
|
125
|
-
accentRingFrom: "rgba(
|
|
126
|
-
accentRingTo: "rgba(
|
|
125
|
+
accentRingFrom: "rgba(0, 203, 192, 0.20)",
|
|
126
|
+
accentRingTo: "rgba(0, 203, 192, 0.90)",
|
|
127
127
|
dangerRingFrom: "rgba(244, 63, 94, 0.35)",
|
|
128
128
|
dangerRingTo: "rgba(244, 63, 94, 1.0)"
|
|
129
129
|
},
|
|
@@ -2850,7 +2850,7 @@ function baseColor(role, theme) {
|
|
|
2850
2850
|
return theme.colors.warning;
|
|
2851
2851
|
case "accent":
|
|
2852
2852
|
default:
|
|
2853
|
-
return
|
|
2853
|
+
return theme.colors.primary;
|
|
2854
2854
|
}
|
|
2855
2855
|
}
|
|
2856
2856
|
function EdgeGlowFrame({
|
|
@@ -4705,8 +4705,8 @@ var STATUS_BG = {
|
|
|
4705
4705
|
// blue-500
|
|
4706
4706
|
editing: "#F59E0B",
|
|
4707
4707
|
// amber-500
|
|
4708
|
-
forking: "#
|
|
4709
|
-
//
|
|
4708
|
+
forking: "#00CBC0",
|
|
4709
|
+
// brand teal
|
|
4710
4710
|
merging: "#06B6D4",
|
|
4711
4711
|
// cyan-500
|
|
4712
4712
|
error: "#F43F5E",
|
|
@@ -4871,7 +4871,7 @@ function PreviewMetaSection({ app, isOwner, creator, downloadsCount }) {
|
|
|
4871
4871
|
subtitle: app.description,
|
|
4872
4872
|
avatarUri: (creator == null ? void 0 : creator.avatar) ?? null,
|
|
4873
4873
|
creatorName: (creator == null ? void 0 : creator.name) ?? null,
|
|
4874
|
-
tag: isOwner || app.forkedFromAppId ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native34.View, { style: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: "#
|
|
4874
|
+
tag: isOwner || app.forkedFromAppId ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_native34.View, { style: { paddingHorizontal: 8, paddingVertical: 2, borderRadius: 999, backgroundColor: "#007A75" }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Text, { variant: "caption", style: { color: "#fff", fontWeight: theme.typography.fontWeight.semibold }, children: app.forkedFromAppId ? "Remix" : "Owner" }) }) : null,
|
|
4875
4875
|
rightMetric: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
|
|
4876
4876
|
import_react_native34.View,
|
|
4877
4877
|
{
|
|
@@ -5127,17 +5127,25 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
|
|
|
5127
5127
|
const theme = useTheme();
|
|
5128
5128
|
const isDark = theme.scheme === "dark";
|
|
5129
5129
|
const [showCopied, setShowCopied] = (0, import_react2.useState)(false);
|
|
5130
|
-
const [
|
|
5130
|
+
const [tooltipAnchor, setTooltipAnchor] = (0, import_react2.useState)(null);
|
|
5131
5131
|
const [tooltipWidth, setTooltipWidth] = (0, import_react2.useState)(0);
|
|
5132
5132
|
const hideTimerRef = (0, import_react2.useRef)(null);
|
|
5133
|
-
const containerRef = (0, import_react2.useRef)(null);
|
|
5134
5133
|
const baseBodyColor = variant === "mergeRequest" ? theme.colors.textMuted : theme.colors.text;
|
|
5135
|
-
const linkColor = variant === "mergeRequest" ? isDark ? theme.colors.primary : "#
|
|
5134
|
+
const linkColor = variant === "mergeRequest" ? isDark ? theme.colors.primary : "#007A75" : theme.colors.link;
|
|
5136
5135
|
const linkWeight = variant === "mergeRequest" ? theme.typography.fontWeight.semibold : void 0;
|
|
5137
5136
|
const codeBgColor = isDark ? "#27272A" : "#E4E4E7";
|
|
5138
5137
|
const codeTextColor = isDark ? "#FFFFFF" : theme.colors.text;
|
|
5139
5138
|
const paragraphBottom = variant === "mergeRequest" ? 8 : 6;
|
|
5140
5139
|
const baseLineHeight = variant === "mergeRequest" ? 22 : 20;
|
|
5140
|
+
const screen = import_react_native37.Dimensions.get("window");
|
|
5141
|
+
const tooltipPadding = theme.spacing.sm;
|
|
5142
|
+
const tooltipYOffset = theme.spacing.lg + 32;
|
|
5143
|
+
const minTooltipY = theme.spacing.xl;
|
|
5144
|
+
const tooltipTop = tooltipAnchor ? Math.max(minTooltipY, tooltipAnchor.y - tooltipYOffset) : 0;
|
|
5145
|
+
const tooltipLeft = tooltipAnchor ? Math.min(
|
|
5146
|
+
Math.max(tooltipAnchor.x, tooltipPadding),
|
|
5147
|
+
Math.max(tooltipPadding, screen.width - tooltipPadding - Math.max(tooltipWidth, 1))
|
|
5148
|
+
) : 0;
|
|
5141
5149
|
(0, import_react2.useEffect)(() => {
|
|
5142
5150
|
return () => {
|
|
5143
5151
|
if (hideTimerRef.current) {
|
|
@@ -5146,16 +5154,11 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
|
|
|
5146
5154
|
};
|
|
5147
5155
|
}, []);
|
|
5148
5156
|
const handleLongPress = (event) => {
|
|
5149
|
-
|
|
5150
|
-
|
|
5151
|
-
|
|
5152
|
-
containerRef.current.measureInWindow((x, y) => {
|
|
5153
|
-
setTooltipPosition({ x: pageX - x, y: pageY - y });
|
|
5154
|
-
});
|
|
5155
|
-
} else {
|
|
5156
|
-
setTooltipPosition({ x: locationX, y: locationY });
|
|
5157
|
-
}
|
|
5157
|
+
const { pageX, pageY } = event.nativeEvent;
|
|
5158
|
+
setTooltipAnchor({ x: pageX, y: pageY });
|
|
5159
|
+
setTooltipWidth(0);
|
|
5158
5160
|
copyMarkdownToClipboard(markdown);
|
|
5161
|
+
void impact("light");
|
|
5159
5162
|
setShowCopied(true);
|
|
5160
5163
|
if (hideTimerRef.current) {
|
|
5161
5164
|
clearTimeout(hideTimerRef.current);
|
|
@@ -5164,7 +5167,7 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
|
|
|
5164
5167
|
setShowCopied(false);
|
|
5165
5168
|
}, 1200);
|
|
5166
5169
|
};
|
|
5167
|
-
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native37.Pressable, { style, onLongPress: handleLongPress, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native37.View, {
|
|
5170
|
+
return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native37.Pressable, { style, onPress: import_react_native37.Keyboard.dismiss, onLongPress: handleLongPress, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_native37.View, { style: { position: "relative" }, children: [
|
|
5168
5171
|
/* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
5169
5172
|
import_react_native_markdown_display.default,
|
|
5170
5173
|
{
|
|
@@ -5199,19 +5202,18 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
|
|
|
5199
5202
|
children: markdown
|
|
5200
5203
|
}
|
|
5201
5204
|
),
|
|
5202
|
-
showCopied &&
|
|
5205
|
+
showCopied && tooltipAnchor ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native37.Modal, { transparent: true, visible: true, statusBarTranslucent: true, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_react_native37.View, { pointerEvents: "none", style: { flex: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
5203
5206
|
import_react_native37.View,
|
|
5204
5207
|
{
|
|
5205
5208
|
pointerEvents: "none",
|
|
5206
5209
|
style: {
|
|
5207
5210
|
position: "absolute",
|
|
5208
|
-
left:
|
|
5209
|
-
top:
|
|
5211
|
+
left: tooltipLeft,
|
|
5212
|
+
top: tooltipTop,
|
|
5210
5213
|
backgroundColor: theme.colors.success,
|
|
5211
5214
|
borderRadius: theme.radii.pill,
|
|
5212
5215
|
paddingHorizontal: theme.spacing.sm,
|
|
5213
|
-
paddingVertical: theme.spacing.xs
|
|
5214
|
-
transform: [{ translateX: tooltipWidth ? -tooltipWidth / 2 : 0 }]
|
|
5216
|
+
paddingVertical: theme.spacing.xs
|
|
5215
5217
|
},
|
|
5216
5218
|
onLayout: (event) => setTooltipWidth(event.nativeEvent.layout.width),
|
|
5217
5219
|
children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
|
|
@@ -5226,7 +5228,7 @@ function MarkdownText({ markdown, variant = "chat", bodyColor, style }) {
|
|
|
5226
5228
|
}
|
|
5227
5229
|
)
|
|
5228
5230
|
}
|
|
5229
|
-
) : null
|
|
5231
|
+
) }) }) : null
|
|
5230
5232
|
] }) });
|
|
5231
5233
|
}
|
|
5232
5234
|
|
|
@@ -5509,7 +5511,7 @@ function ReviewMergeRequestCard({
|
|
|
5509
5511
|
padding: 16,
|
|
5510
5512
|
backgroundColor: withAlpha(theme.colors.surfaceRaised, 0.5),
|
|
5511
5513
|
borderWidth: 1,
|
|
5512
|
-
borderColor: withAlpha("#
|
|
5514
|
+
borderColor: withAlpha("#007A75", 0.2)
|
|
5513
5515
|
}
|
|
5514
5516
|
],
|
|
5515
5517
|
children: [
|
|
@@ -6431,7 +6433,7 @@ function ChatMessageBubble({ message, renderContent, isLast, retrying, onRetry,
|
|
|
6431
6433
|
const bubbleVariant = isHuman ? "surface" : "surfaceRaised";
|
|
6432
6434
|
const cornerStyle = isHuman ? { borderTopRightRadius: 0 } : { borderTopLeftRadius: 0 };
|
|
6433
6435
|
const bodyColor = metaStatus === "success" ? theme.colors.success : metaStatus === "error" ? theme.colors.danger : void 0;
|
|
6434
|
-
const showRetry = Boolean(onRetry) && isLast && metaStatus === "error";
|
|
6436
|
+
const showRetry = Boolean(onRetry) && isLast && metaStatus === "error" && message.author === "human";
|
|
6435
6437
|
const retryLabel = retrying ? "Retrying..." : "Retry";
|
|
6436
6438
|
return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(import_react_native45.View, { style: [align, style], children: [
|
|
6437
6439
|
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
@@ -6653,7 +6655,7 @@ function ChatPage({
|
|
|
6653
6655
|
const insets = (0, import_react_native_safe_area_context4.useSafeAreaInsets)();
|
|
6654
6656
|
const [composerHeight, setComposerHeight] = React38.useState(0);
|
|
6655
6657
|
const [composerTopHeight, setComposerTopHeight] = React38.useState(0);
|
|
6656
|
-
const footerBottomPadding = import_react_native48.Platform.OS === "ios" ? insets.bottom : insets.bottom + 10;
|
|
6658
|
+
const footerBottomPadding = import_react_native48.Platform.OS === "ios" ? insets.bottom - 24 : insets.bottom + 10;
|
|
6657
6659
|
const totalComposerHeight = composerHeight + composerTopHeight;
|
|
6658
6660
|
const overlayBottom = totalComposerHeight + footerBottomPadding + theme.spacing.lg;
|
|
6659
6661
|
const bottomInset = totalComposerHeight + footerBottomPadding + theme.spacing.xl;
|
|
@@ -7144,7 +7146,7 @@ var import_react_native55 = require("react-native");
|
|
|
7144
7146
|
// src/components/primitives/Modal.tsx
|
|
7145
7147
|
var import_react_native54 = require("react-native");
|
|
7146
7148
|
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
7147
|
-
function
|
|
7149
|
+
function Modal2({
|
|
7148
7150
|
visible,
|
|
7149
7151
|
onRequestClose,
|
|
7150
7152
|
dismissOnBackdropPress = true,
|
|
@@ -7206,7 +7208,7 @@ function ConfirmMergeRequestDialog({
|
|
|
7206
7208
|
alignSelf: "stretch"
|
|
7207
7209
|
};
|
|
7208
7210
|
return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
|
|
7209
|
-
|
|
7211
|
+
Modal2,
|
|
7210
7212
|
{
|
|
7211
7213
|
visible,
|
|
7212
7214
|
onRequestClose: close,
|