@khanglvm/relay 0.2.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/LICENSE +21 -0
- package/README.md +325 -0
- package/bin/rly.js +9 -0
- package/docs/AGENT.md +317 -0
- package/package.json +46 -0
- package/skills/relay/SKILL.md +156 -0
- package/skills/relay/examples/blocks-showcase.json +118 -0
- package/skills/relay/examples/feature-feedback.json +27 -0
- package/skills/relay/examples/prototype-review.json +25 -0
- package/src/cli.js +629 -0
- package/src/open.js +15 -0
- package/src/server.js +371 -0
- package/src/spec.js +435 -0
- package/src/store.js +147 -0
- package/src/ui/annotate.css +151 -0
- package/src/ui/annotate.js +440 -0
- package/src/ui/app.js +605 -0
- package/src/ui/blocks.css +170 -0
- package/src/ui/blocks.js +719 -0
- package/src/ui/index.html +21 -0
- package/src/ui/kit.js +413 -0
- package/src/ui/style.css +231 -0
- package/src/util.js +19 -0
- package/vendor/VERSIONS.json +5 -0
- package/vendor/chart.umd.js +14 -0
- package/vendor/mermaid.min.js +3405 -0
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
/* blocks.css — styling for RelayBlocks output (markdown, table, code, chart,
|
|
2
|
+
mermaid, html). Uses ONLY the theme tokens defined in style.css. */
|
|
3
|
+
|
|
4
|
+
.blk { margin: 14px 0 0; }
|
|
5
|
+
.blk:first-child { margin-top: 0; }
|
|
6
|
+
|
|
7
|
+
/* ---------- shared error card ---------- */
|
|
8
|
+
.blk-error {
|
|
9
|
+
color: var(--muted);
|
|
10
|
+
background: var(--bg-sunken);
|
|
11
|
+
border: 1px solid var(--border);
|
|
12
|
+
border-radius: 10px;
|
|
13
|
+
padding: 12px 14px;
|
|
14
|
+
font-size: 0.88rem;
|
|
15
|
+
font-family: var(--sans);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
/* ---------- markdown typography ---------- */
|
|
19
|
+
.blk-markdown .md { color: var(--fg); }
|
|
20
|
+
.blk-markdown .md > :first-child { margin-top: 0; }
|
|
21
|
+
.blk-markdown .md > :last-child { margin-bottom: 0; }
|
|
22
|
+
.blk-markdown .md h1,
|
|
23
|
+
.blk-markdown .md h2,
|
|
24
|
+
.blk-markdown .md h3 {
|
|
25
|
+
font-family: var(--serif);
|
|
26
|
+
font-weight: 500;
|
|
27
|
+
letter-spacing: -0.015em;
|
|
28
|
+
line-height: 1.25;
|
|
29
|
+
margin: 18px 0 8px;
|
|
30
|
+
text-wrap: balance;
|
|
31
|
+
}
|
|
32
|
+
.blk-markdown .md h1 { font-size: 1.45rem; }
|
|
33
|
+
.blk-markdown .md h2 { font-size: 1.2rem; }
|
|
34
|
+
.blk-markdown .md h3 { font-size: 1.05rem; }
|
|
35
|
+
.blk-markdown .md p { margin: 10px 0; }
|
|
36
|
+
.blk-markdown .md a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 150ms var(--ease); }
|
|
37
|
+
.blk-markdown .md a:hover { border-bottom-color: var(--accent); }
|
|
38
|
+
.blk-markdown .md strong { font-weight: 600; }
|
|
39
|
+
.blk-markdown .md em { font-style: italic; }
|
|
40
|
+
.blk-markdown .md ul,
|
|
41
|
+
.blk-markdown .md ol { margin: 10px 0; padding-left: 1.4em; }
|
|
42
|
+
.blk-markdown .md li { margin: 4px 0; }
|
|
43
|
+
.blk-markdown .md blockquote {
|
|
44
|
+
margin: 12px 0;
|
|
45
|
+
padding: 4px 14px;
|
|
46
|
+
border-left: 3px solid var(--accent);
|
|
47
|
+
color: var(--fg-2);
|
|
48
|
+
}
|
|
49
|
+
.blk-markdown .md hr {
|
|
50
|
+
border: 0;
|
|
51
|
+
border-top: 1px solid var(--border);
|
|
52
|
+
margin: 18px 0;
|
|
53
|
+
}
|
|
54
|
+
.blk-markdown .md code {
|
|
55
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
56
|
+
font-size: 0.86em;
|
|
57
|
+
background: var(--bg-sunken);
|
|
58
|
+
border: 1px solid var(--border);
|
|
59
|
+
border-radius: 5px;
|
|
60
|
+
padding: 1px 5px;
|
|
61
|
+
}
|
|
62
|
+
.blk-markdown .md pre.md-pre {
|
|
63
|
+
background: var(--bg-sunken);
|
|
64
|
+
border: 1px solid var(--border);
|
|
65
|
+
border-radius: 10px;
|
|
66
|
+
padding: 14px 16px;
|
|
67
|
+
overflow-x: auto;
|
|
68
|
+
margin: 12px 0;
|
|
69
|
+
}
|
|
70
|
+
.blk-markdown .md pre.md-pre code {
|
|
71
|
+
background: none;
|
|
72
|
+
border: 0;
|
|
73
|
+
padding: 0;
|
|
74
|
+
font-size: 0.85rem;
|
|
75
|
+
line-height: 1.5;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* ---------- code block ---------- */
|
|
79
|
+
.blk-pre {
|
|
80
|
+
background: var(--bg-sunken);
|
|
81
|
+
border: 1px solid var(--border);
|
|
82
|
+
border-radius: 10px;
|
|
83
|
+
padding: 14px 16px;
|
|
84
|
+
overflow-x: auto;
|
|
85
|
+
margin: 0;
|
|
86
|
+
}
|
|
87
|
+
.blk-pre code {
|
|
88
|
+
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
|
89
|
+
font-size: 0.85rem;
|
|
90
|
+
line-height: 1.55;
|
|
91
|
+
color: var(--fg);
|
|
92
|
+
white-space: pre;
|
|
93
|
+
}
|
|
94
|
+
/* subtle tinter colors via theme vars only */
|
|
95
|
+
.blk-pre .tok-kw,
|
|
96
|
+
.blk-markdown .md .tok-kw { color: var(--accent); }
|
|
97
|
+
.blk-pre .tok-str,
|
|
98
|
+
.blk-markdown .md .tok-str { color: var(--ok); }
|
|
99
|
+
.blk-pre .tok-com,
|
|
100
|
+
.blk-markdown .md .tok-com { color: var(--muted); font-style: italic; }
|
|
101
|
+
.blk-pre .tok-num,
|
|
102
|
+
.blk-markdown .md .tok-num { color: var(--fg-2); }
|
|
103
|
+
|
|
104
|
+
/* ---------- table ---------- */
|
|
105
|
+
.blk-table {
|
|
106
|
+
width: 100%;
|
|
107
|
+
border-collapse: collapse;
|
|
108
|
+
font-size: 0.92rem;
|
|
109
|
+
color: var(--fg);
|
|
110
|
+
}
|
|
111
|
+
.blk-table th {
|
|
112
|
+
text-align: left;
|
|
113
|
+
color: var(--muted);
|
|
114
|
+
font-size: 0.7rem;
|
|
115
|
+
letter-spacing: 0.1em;
|
|
116
|
+
text-transform: uppercase;
|
|
117
|
+
font-weight: 500;
|
|
118
|
+
padding: 8px 12px;
|
|
119
|
+
border-bottom: 1px solid var(--border-strong);
|
|
120
|
+
white-space: nowrap;
|
|
121
|
+
}
|
|
122
|
+
.blk-table th.sortable { cursor: pointer; user-select: none; transition: color 150ms var(--ease); }
|
|
123
|
+
.blk-table th.sortable:hover { color: var(--accent); }
|
|
124
|
+
.blk-table th .sort-arrow { color: var(--accent); font-weight: 600; }
|
|
125
|
+
.blk-table td {
|
|
126
|
+
padding: 9px 12px;
|
|
127
|
+
border-bottom: 1px solid var(--border);
|
|
128
|
+
vertical-align: top;
|
|
129
|
+
}
|
|
130
|
+
.blk-table tbody tr { transition: background 120ms var(--ease); }
|
|
131
|
+
.blk-table tbody tr:hover { background: var(--bg-sunken); }
|
|
132
|
+
.blk-table tbody tr:last-child td { border-bottom: 0; }
|
|
133
|
+
|
|
134
|
+
/* ---------- chart ---------- */
|
|
135
|
+
.blk-chart {
|
|
136
|
+
position: relative;
|
|
137
|
+
width: 100%;
|
|
138
|
+
height: 320px;
|
|
139
|
+
}
|
|
140
|
+
.blk-chart canvas { display: block; }
|
|
141
|
+
.blk-chart-badge {
|
|
142
|
+
position: absolute;
|
|
143
|
+
top: 6px;
|
|
144
|
+
right: 6px;
|
|
145
|
+
min-width: 18px;
|
|
146
|
+
height: 18px;
|
|
147
|
+
padding: 0 5px;
|
|
148
|
+
border-radius: 999px;
|
|
149
|
+
background: var(--accent);
|
|
150
|
+
color: var(--accent-fg);
|
|
151
|
+
font-size: 0.7rem;
|
|
152
|
+
line-height: 18px;
|
|
153
|
+
text-align: center;
|
|
154
|
+
font-weight: 600;
|
|
155
|
+
font-family: var(--sans);
|
|
156
|
+
box-shadow: var(--shadow-card);
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
/* ---------- mermaid ---------- */
|
|
160
|
+
.blk-mermaid {
|
|
161
|
+
overflow: auto;
|
|
162
|
+
max-height: 1200px;
|
|
163
|
+
text-align: center;
|
|
164
|
+
}
|
|
165
|
+
.blk-mermaid svg {
|
|
166
|
+
max-width: 100%;
|
|
167
|
+
height: auto;
|
|
168
|
+
}
|
|
169
|
+
.blk-mermaid .node,
|
|
170
|
+
.blk-mermaid .edgeLabel { cursor: default; }
|