@ape-egg/codie 0.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/README.md +232 -0
- package/codie.css +7 -0
- package/codie.js +252 -0
- package/constants.js +228 -0
- package/editable.js +196 -0
- package/foldable.js +185 -0
- package/format.js +195 -0
- package/highlight-css.css +14 -0
- package/highlight-html.css +41 -0
- package/highlight-js.css +25 -0
- package/highlight-json.css +21 -0
- package/highlight.js +423 -0
- package/keyboard.js +61 -0
- package/numberRows.js +51 -0
- package/package.json +29 -0
- package/structure.css +194 -0
- package/theme.css +102 -0
package/structure.css
ADDED
|
@@ -0,0 +1,194 @@
|
|
|
1
|
+
/* Codie structure and layout */
|
|
2
|
+
|
|
3
|
+
/* Container */
|
|
4
|
+
[codie] {
|
|
5
|
+
display: grid;
|
|
6
|
+
position: relative;
|
|
7
|
+
width: 100%;
|
|
8
|
+
font-size: inherit;
|
|
9
|
+
line-height: 1.5;
|
|
10
|
+
font-family:
|
|
11
|
+
'Geist Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New',
|
|
12
|
+
monospace;
|
|
13
|
+
overflow: auto;
|
|
14
|
+
background: var(--codie-bg);
|
|
15
|
+
color: var(--codie-text);
|
|
16
|
+
border-radius: calc(var(--unit, 4px) * 1);
|
|
17
|
+
scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
|
|
18
|
+
}
|
|
19
|
+
[codie]::-webkit-scrollbar-thumb {
|
|
20
|
+
background: var(--scrollbar-thumb);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
/* Stack layers on same grid cell */
|
|
24
|
+
[codie] > * {
|
|
25
|
+
grid-area: 1/1;
|
|
26
|
+
min-width: max-content;
|
|
27
|
+
align-self: start;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Code layer (shared between display and textarea) */
|
|
31
|
+
[codie] .codie-layer {
|
|
32
|
+
margin: 0;
|
|
33
|
+
padding: calc(var(--unit, 4px) * 4);
|
|
34
|
+
font: inherit;
|
|
35
|
+
line-height: inherit;
|
|
36
|
+
white-space: pre;
|
|
37
|
+
background: transparent;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* Display layer */
|
|
41
|
+
[codie] .codie-display {
|
|
42
|
+
pointer-events: none;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
/* Textarea layer - hidden by default */
|
|
46
|
+
[codie] .codie-textarea {
|
|
47
|
+
display: none;
|
|
48
|
+
width: 100%;
|
|
49
|
+
field-sizing: content;
|
|
50
|
+
min-height: 100%;
|
|
51
|
+
border: none;
|
|
52
|
+
outline: none;
|
|
53
|
+
resize: none;
|
|
54
|
+
overflow: hidden;
|
|
55
|
+
color: transparent;
|
|
56
|
+
caret-color: var(--codie-caret);
|
|
57
|
+
-webkit-text-fill-color: transparent;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
/* Editable mode - show textarea */
|
|
61
|
+
[codie][editable] .codie-textarea {
|
|
62
|
+
display: block;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
[codie][editable] .codie-display {
|
|
66
|
+
pointer-events: none;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
[codie][editable] .codie-textarea::selection {
|
|
70
|
+
background: var(--codie-selection);
|
|
71
|
+
-webkit-text-fill-color: transparent;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
/* Line numbers column */
|
|
75
|
+
[codie][numbered] {
|
|
76
|
+
grid-template-columns: auto 1fr;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
[codie] .codie-line-numbers {
|
|
80
|
+
display: none;
|
|
81
|
+
padding: calc(var(--unit, 4px) * 4);
|
|
82
|
+
padding-right: calc(var(--unit, 4px) * 2);
|
|
83
|
+
text-align: right;
|
|
84
|
+
color: var(--codie-line-number);
|
|
85
|
+
user-select: none;
|
|
86
|
+
border-right: 1px solid oklch(from var(--codie-text) l c h / 0.1);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
[codie][numbered] .codie-line-numbers {
|
|
90
|
+
display: block;
|
|
91
|
+
grid-area: 1/1;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
[codie][numbered] .codie-layer {
|
|
95
|
+
grid-area: 1/2;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Line wrapping for highlighting */
|
|
99
|
+
[codie] .codie-line {
|
|
100
|
+
display: block;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
[codie] .codie-line-highlight {
|
|
104
|
+
background: var(--codie-highlight);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
/* Focused state - dim non-highlighted lines */
|
|
108
|
+
[codie].codie-focused .codie-line {
|
|
109
|
+
opacity: 0.4;
|
|
110
|
+
transition: opacity 150ms ease-out;
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
[codie].codie-focused .codie-line.codie-line-highlight {
|
|
114
|
+
opacity: 1;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
/* Folding structure */
|
|
118
|
+
[codie] .codie-fold-wrapper {
|
|
119
|
+
display: grid;
|
|
120
|
+
grid-template-rows: min-content 0fr;
|
|
121
|
+
transition: grid-template-rows 200ms ease-out;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
[codie] .codie-fold-wrapper.codie-fold-open {
|
|
125
|
+
grid-template-rows: min-content 1fr;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
[codie] .codie-fold-header {
|
|
129
|
+
display: flex;
|
|
130
|
+
align-items: flex-start;
|
|
131
|
+
gap: calc(var(--unit, 4px) * 1);
|
|
132
|
+
cursor: pointer;
|
|
133
|
+
border-radius: calc(var(--unit, 4px) * 0.5);
|
|
134
|
+
transition: background-color 150ms ease-out;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
[codie] .codie-fold-header:hover {
|
|
138
|
+
background: var(--codie-fold-hover);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
[codie] .codie-fold-toggle {
|
|
142
|
+
height: 18px;
|
|
143
|
+
width: 18px;
|
|
144
|
+
padding: 0;
|
|
145
|
+
margin: 0;
|
|
146
|
+
background: transparent;
|
|
147
|
+
border: none;
|
|
148
|
+
cursor: pointer;
|
|
149
|
+
font-size: 8px;
|
|
150
|
+
line-height: 1;
|
|
151
|
+
transform: rotate(-45deg);
|
|
152
|
+
transition:
|
|
153
|
+
color 150ms ease-out,
|
|
154
|
+
transform 150ms ease-out;
|
|
155
|
+
display: inline-flex;
|
|
156
|
+
align-items: center;
|
|
157
|
+
justify-content: center;
|
|
158
|
+
color: transparent;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
[codie] .codie-fold-wrapper.codie-fold-open > .codie-fold-header > .codie-fold-toggle {
|
|
162
|
+
color: oklch(from var(--codie-fold-icon) l c h / 0.1);
|
|
163
|
+
transform: rotate(0deg);
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
[codie] .codie-fold-wrapper > .codie-fold-header:hover > .codie-fold-toggle {
|
|
167
|
+
color: var(--codie-fold-icon);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
[codie] .codie-fold-content {
|
|
171
|
+
overflow: hidden;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
/* Collapsed preview */
|
|
175
|
+
[codie] .codie-fold-preview {
|
|
176
|
+
display: none;
|
|
177
|
+
color: var(--codie-text);
|
|
178
|
+
opacity: 0.6;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
[codie] .codie-fold-wrapper:not(.codie-fold-open) .codie-fold-preview {
|
|
182
|
+
display: inline;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
/* Root fold has no toggle */
|
|
186
|
+
[codie] .codie-fold-wrapper[data-root] > .codie-fold-header {
|
|
187
|
+
cursor: default;
|
|
188
|
+
pointer-events: none;
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
[codie] .codie-fold-wrapper[data-root] > .codie-fold-header > .codie-fold-toggle {
|
|
192
|
+
opacity: 0;
|
|
193
|
+
pointer-events: none;
|
|
194
|
+
}
|
package/theme.css
ADDED
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
/* Codie Theme - Color Variables */
|
|
2
|
+
|
|
3
|
+
:root {
|
|
4
|
+
/* Light theme - Dark Modern colors darkened 25% */
|
|
5
|
+
--codie-bg: #ffffff;
|
|
6
|
+
--codie-text: #000000;
|
|
7
|
+
--codie-caret: #000000;
|
|
8
|
+
--codie-selection: oklch(0.7 0.1 250 / 0.3);
|
|
9
|
+
|
|
10
|
+
/* HTML tokens */
|
|
11
|
+
--codie-tag: #4175a1;
|
|
12
|
+
--codie-attr-name: #75a5bf;
|
|
13
|
+
--codie-attr-value: #9b6d5a;
|
|
14
|
+
--codie-punct: #606060;
|
|
15
|
+
--codie-comment: #507340;
|
|
16
|
+
|
|
17
|
+
/* CSS tokens */
|
|
18
|
+
--codie-css-selector: #a18c5e;
|
|
19
|
+
--codie-css-property: #75a5bf;
|
|
20
|
+
--codie-css-value: #9b6d5a;
|
|
21
|
+
|
|
22
|
+
/* JS tokens */
|
|
23
|
+
--codie-js-keyword: #4175a1;
|
|
24
|
+
--codie-js-import: #946590;
|
|
25
|
+
--codie-js-string: #9b6d5a;
|
|
26
|
+
--codie-js-function: #a5a580;
|
|
27
|
+
--codie-js-number: #889b7e;
|
|
28
|
+
--codie-js-ident: #75a5bf;
|
|
29
|
+
|
|
30
|
+
/* JSON tokens */
|
|
31
|
+
--codie-json-key: #0c7cb3;
|
|
32
|
+
--codie-json-string: #9b6447;
|
|
33
|
+
--codie-json-number: #7fa76d;
|
|
34
|
+
--codie-json-boolean: #3873ac;
|
|
35
|
+
--codie-json-null: #3873ac;
|
|
36
|
+
|
|
37
|
+
/* Vibe tokens */
|
|
38
|
+
--codie-vibe: #a41d59;
|
|
39
|
+
--codie-vibe-var: inherit;
|
|
40
|
+
|
|
41
|
+
/* Line numbers */
|
|
42
|
+
--codie-line-number: oklch(0.6 0 0);
|
|
43
|
+
--codie-line-number-active: oklch(0.3 0 0);
|
|
44
|
+
|
|
45
|
+
/* Folding */
|
|
46
|
+
--codie-fold-icon: oklch(0.6 0 0);
|
|
47
|
+
--codie-fold-hover: oklch(0.7 0.1 250 / 0.2);
|
|
48
|
+
|
|
49
|
+
/* Line highlight */
|
|
50
|
+
--codie-highlight: oklch(0.7 0.1 250 / 0.2);
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
/* Dark theme - VSCode Dark+ */
|
|
54
|
+
.dark [codie],
|
|
55
|
+
[dark] [codie],
|
|
56
|
+
[codie][dark] {
|
|
57
|
+
--codie-bg: #1e1e1e;
|
|
58
|
+
--codie-text: #d4d4d4;
|
|
59
|
+
--codie-caret: #fff;
|
|
60
|
+
--codie-selection: oklch(0.5 0.1 250 / 0.4);
|
|
61
|
+
|
|
62
|
+
/* HTML tokens */
|
|
63
|
+
--codie-tag: #569cd6;
|
|
64
|
+
--codie-attr-name: #9cdcfe;
|
|
65
|
+
--codie-attr-value: #ce9178;
|
|
66
|
+
--codie-punct: #808080;
|
|
67
|
+
--codie-comment: #6a9955;
|
|
68
|
+
|
|
69
|
+
/* CSS tokens */
|
|
70
|
+
--codie-css-selector: #d7ba7d;
|
|
71
|
+
--codie-css-property: #9cdcfe;
|
|
72
|
+
--codie-css-value: #ce9178;
|
|
73
|
+
|
|
74
|
+
/* JS tokens */
|
|
75
|
+
--codie-js-keyword: #569cd6;
|
|
76
|
+
--codie-js-import: #c586c0;
|
|
77
|
+
--codie-js-string: #ce9178;
|
|
78
|
+
--codie-js-function: #dcdcaa;
|
|
79
|
+
--codie-js-number: #b5cea8;
|
|
80
|
+
--codie-js-ident: #9cdcfe;
|
|
81
|
+
|
|
82
|
+
/* JSON tokens */
|
|
83
|
+
--codie-json-key: #9cdcfe;
|
|
84
|
+
--codie-json-string: #ce9178;
|
|
85
|
+
--codie-json-number: #b5cea8;
|
|
86
|
+
--codie-json-boolean: #569cd6;
|
|
87
|
+
--codie-json-null: #569cd6;
|
|
88
|
+
|
|
89
|
+
/* Vibe tokens */
|
|
90
|
+
--codie-vibe: #db2777;
|
|
91
|
+
|
|
92
|
+
/* Line numbers */
|
|
93
|
+
--codie-line-number: oklch(0.45 0 0);
|
|
94
|
+
--codie-line-number-active: oklch(0.75 0 0);
|
|
95
|
+
|
|
96
|
+
/* Folding */
|
|
97
|
+
--codie-fold-icon: oklch(0.45 0 0);
|
|
98
|
+
--codie-fold-hover: oklch(0.4 0.1 250 / 0.3);
|
|
99
|
+
|
|
100
|
+
/* Line highlight */
|
|
101
|
+
--codie-highlight: oklch(0.4 0.1 250 / 0.3);
|
|
102
|
+
}
|