grindlemire/go-tui: internal/lsp/schema/tailwind.go

21.2 KB Go 396 lines 2026-06-03 · d15bb9f raw
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396


package schema

import (
	"fmt"
	"strings"
)

// TailwindClassDef describes a Tailwind-style utility class.
type TailwindClassDef struct {
	Name        string
	Description string
	Category    string // "layout", "flex", "spacing", "typography", "visual", "scroll"
}

// GetClassDoc returns hover documentation for a Tailwind-style class.
// Returns empty string if the class is not recognized.
func GetClassDoc(class string) string {
	// Check static classes first
	if doc, ok := staticClassDocs[class]; ok {
		return doc
	}

	// Check parameterized patterns
	for _, p := range paramPatterns {
		if after, ok := strings.CutPrefix(class, p.prefix); ok {
			val := after
			if val != "" {
				return fmt.Sprintf(p.docFmt, val)
			}
		}
	}

	return ""
}

// MatchClasses returns all class definitions that match the given prefix.
// Used for completion filtering.
func MatchClasses(prefix string) []TailwindClassDef {
	var matches []TailwindClassDef
	for _, cls := range AllClasses {
		if prefix == "" || strings.HasPrefix(cls.Name, prefix) {
			matches = append(matches, cls)
		}
	}
	return matches
}

// paramPattern describes a parameterized class prefix with its documentation format.
type paramPattern struct {
	prefix string
	docFmt string // fmt string with one %s for the value
}

// staticClassDocs maps exact class names to their documentation strings.
var staticClassDocs = map[string]string{
	// Layout
	"block":    "Display as block (column direction, fills parent width). This is the default display mode.",
	"flex":     "Display as flexbox with row direction.",
	"flex-col": "Display as flexbox with column direction.",
	"flex-row": "Display as flexbox with row direction.",

	// Alignment
	"items-start":   "Align items to the start of the cross axis.",
	"items-center":  "Align items to the center of the cross axis.",
	"items-end":     "Align items to the end of the cross axis.",
	"items-stretch": "Stretch items to fill the cross axis.",

	"self-start":   "Align self to the start of the cross axis.",
	"self-center":  "Align self to the center of the cross axis.",
	"self-end":     "Align self to the end of the cross axis.",
	"self-stretch": "Stretch self to fill the cross axis.",

	"justify-start":   "Justify content to the start of the main axis.",
	"justify-center":  "Justify content to the center of the main axis.",
	"justify-end":     "Justify content to the end of the main axis.",
	"justify-between": "Distribute items with space between them.",
	"justify-around":  "Distribute items with space around them.",
	"justify-evenly":  "Distribute items with equal space around them.",

	// Flex wrap
	"flex-wrap":         "Enable flex wrapping. Items that overflow the main axis wrap to new lines.",
	"flex-wrap-reverse": "Enable reverse flex wrapping. Items wrap in reverse cross-axis order.",
	"flex-nowrap":       "Disable flex wrapping (default). All items stay on one line.",

	// Align content
	"content-start":   "Pack flex lines at the start of the cross axis.",
	"content-end":     "Pack flex lines at the end of the cross axis.",
	"content-center":  "Center flex lines on the cross axis.",
	"content-stretch": "Stretch flex lines to fill the cross axis.",
	"content-between": "Distribute flex lines with even space between them.",
	"content-around":  "Distribute flex lines with even space around each line.",

	// Borders
	"border":         "Default border style.",
	"border-none":    "No border.",
	"border-single":  "Single line border: `\u250c\u2500\u2510\u2502\u2514\u2500\u2518`",
	"border-double":  "Double line border: `\u2554\u2550\u2557\u2551\u255a\u2550\u255d`",
	"border-rounded": "Rounded border: `\u256d\u2500\u256e\u2502\u2570\u2500\u256f`",
	"border-thick":   "Thick border: `\u250f\u2501\u2513\u2503\u2517\u2501\u251b`",

	// Font styles
	"font-bold":          "Bold text style.",
	"font-dim":           "Dim/faint text style.",
	"font-italic":        "Italic text style.",
	"italic":             "Italic text style.",
	"font-underline":     "Underlined text style.",
	"underline":          "Underlined text style.",
	"font-blink":         "Blinking text style.",
	"blink":              "Blinking text style.",
	"font-reverse":       "Reverse video (swap foreground/background).",
	"reverse":            "Reverse video (swap foreground/background).",
	"font-strikethrough": "Strikethrough text style.",
	"strikethrough":      "Strikethrough text style.",

	// Text alignment
	"text-left":   "Align text to the left.",
	"text-center": "Align text to the center.",
	"text-right":  "Align text to the right.",

	// Size keywords
	"w-full": "Set width to 100%.",
	"w-auto": "Set width to auto (size to content).",
	"h-full": "Set height to 100%.",
	"h-auto": "Set height to auto (size to content).",
	"w-1/2":  "Set width to 50%.",
	"w-1/3":  "Set width to 33.3%.",
	"w-2/3":  "Set width to 66.7%.",
	"w-1/4":  "Set width to 25%.",
	"w-3/4":  "Set width to 75%.",

	// Flex grow/shrink keywords
	"grow":         "Set flex grow factor to 1.",
	"grow-0":       "Set flex grow factor to 0 (don't grow).",
	"shrink":       "Set flex shrink factor to 1.",
	"shrink-0":     "Prevent element from shrinking.",
	"flex-1":       "Shorthand for grow + shrink (flex: 1 1).",
	"flex-auto":    "Shorthand for grow + shrink, respects content size.",
	"flex-initial": "Don't grow but can shrink (flex: 0 1).",
	"flex-none":    "Fixed size, don't grow or shrink (flex: 0 0).",

	// Scroll
	"overflow-scroll":   "Enable scrolling for overflow content.",
	"overflow-y-scroll": "Enable vertical scrolling for overflow content.",
	"overflow-x-scroll": "Enable horizontal scrolling for overflow content.",

	// Overflow
	"overflow-hidden": "Clip children that overflow the element's bounds (no scrollbars).",

	// Focus
	"focusable": "Make this element focusable (can receive keyboard events).",

	// Visibility
	"hidden": "Hide element from layout and rendering.",

	// Text overflow
	"truncate": "Truncate text with ellipsis (\u2026) when it overflows the element width.",

	// Gradients
	"text-gradient-red-blue":   "Apply a horizontal gradient to text from red to blue.",
	"bg-gradient-red-blue":     "Apply a horizontal gradient to background from red to blue.",
	"border-gradient-red-blue": "Apply a horizontal gradient to border from red to blue.",
}

// paramPatterns defines parameterized class prefixes and their documentation.
var paramPatterns = []paramPattern{
	// Gap
	{prefix: "gap-", docFmt: "Set gap between children to %s characters."},

	// Padding
	{prefix: "p-", docFmt: "Set padding to %s on all sides."},
	{prefix: "px-", docFmt: "Set horizontal padding (left and right) to %s."},
	{prefix: "py-", docFmt: "Set vertical padding (top and bottom) to %s."},
	{prefix: "pt-", docFmt: "Set top padding to %s."},
	{prefix: "pb-", docFmt: "Set bottom padding to %s."},
	{prefix: "pl-", docFmt: "Set left padding to %s."},
	{prefix: "pr-", docFmt: "Set right padding to %s."},

	// Margin
	{prefix: "m-", docFmt: "Set margin to %s on all sides."},
	{prefix: "mx-", docFmt: "Set horizontal margin (left and right) to %s."},
	{prefix: "my-", docFmt: "Set vertical margin (top and bottom) to %s."},
	{prefix: "mt-", docFmt: "Set top margin to %s."},
	{prefix: "mb-", docFmt: "Set bottom margin to %s."},
	{prefix: "ml-", docFmt: "Set left margin to %s."},
	{prefix: "mr-", docFmt: "Set right margin to %s."},

	// Scrollbar styling (check before generic border/text patterns)
	{prefix: "scrollbar-thumb-", docFmt: "Set scrollbar thumb color to **%s**."},
	{prefix: "scrollbar-", docFmt: "Set scrollbar track color to **%s**."},

	// Gradients (check before generic text/bg/border patterns)
	{prefix: "text-gradient-", docFmt: "Apply a gradient to text from **%s** to another color. Use format: text-gradient-COLOR1-COLOR2[-DIRECTION] where DIRECTION is h (horizontal, default), v (vertical), dd (diagonal down), or du (diagonal up)."},
	{prefix: "bg-gradient-", docFmt: "Apply a gradient to background from **%s** to another color. Use format: bg-gradient-COLOR1-COLOR2[-DIRECTION] where DIRECTION is h (horizontal, default), v (vertical), dd (diagonal down), or du (diagonal up)."},
	{prefix: "border-gradient-", docFmt: "Apply a gradient to border from **%s** to another color. Use format: border-gradient-COLOR1-COLOR2[-DIRECTION] where DIRECTION is h (horizontal, default), v (vertical), dd (diagonal down), or du (diagonal up)."},

	// Text colors
	{prefix: "text-", docFmt: "Set text color to **%s**."},

	// Background colors
	{prefix: "bg-", docFmt: "Set background color to **%s**."},

	// Border colors
	{prefix: "border-", docFmt: "Set border color to **%s**."},

	// Width/height
	{prefix: "w-", docFmt: "Set width to %s characters."},
	{prefix: "h-", docFmt: "Set height to %s rows."},
	{prefix: "min-w-", docFmt: "Set minimum width to %s."},
	{prefix: "min-h-", docFmt: "Set minimum height to %s."},
	{prefix: "max-w-", docFmt: "Set maximum width to %s."},
	{prefix: "max-h-", docFmt: "Set maximum height to %s."},

	// Flex factors
	{prefix: "grow-", docFmt: "Set flex grow factor to %s."},
	{prefix: "shrink-", docFmt: "Set flex shrink factor to %s."},
	{prefix: "flex-grow-", docFmt: "Set flex grow factor to %s."},
	{prefix: "flex-shrink-", docFmt: "Set flex shrink factor to %s."},
}

// AllClasses is the list of all known Tailwind-style classes for completion.
// This includes static classes and common parameterized examples.
var AllClasses = []TailwindClassDef{
	// Layout
	{Name: "block", Description: "Display as block (column direction, fills parent width)", Category: "layout"},
	{Name: "flex", Description: "Display as flexbox with row direction", Category: "layout"},
	{Name: "flex-col", Description: "Display as flexbox with column direction", Category: "layout"},
	{Name: "flex-row", Description: "Display as flexbox with row direction", Category: "layout"},

	// Flex wrap
	{Name: "flex-wrap", Description: "Enable flex wrapping", Category: "flex"},
	{Name: "flex-wrap-reverse", Description: "Reverse flex wrapping", Category: "flex"},
	{Name: "flex-nowrap", Description: "Disable flex wrapping", Category: "flex"},

	// Align content
	{Name: "content-start", Description: "Pack lines at start", Category: "flex"},
	{Name: "content-end", Description: "Pack lines at end", Category: "flex"},
	{Name: "content-center", Description: "Center lines", Category: "flex"},
	{Name: "content-stretch", Description: "Stretch lines to fill", Category: "flex"},
	{Name: "content-between", Description: "Space between lines", Category: "flex"},
	{Name: "content-around", Description: "Space around lines", Category: "flex"},

	// Alignment
	{Name: "items-start", Description: "Align items to the start of the cross axis", Category: "flex"},
	{Name: "items-center", Description: "Align items to the center of the cross axis", Category: "flex"},
	{Name: "items-end", Description: "Align items to the end of the cross axis", Category: "flex"},
	{Name: "items-stretch", Description: "Stretch items to fill the cross axis", Category: "flex"},
	{Name: "self-start", Description: "Align self to the start of the cross axis", Category: "flex"},
	{Name: "self-center", Description: "Align self to the center of the cross axis", Category: "flex"},
	{Name: "self-end", Description: "Align self to the end of the cross axis", Category: "flex"},
	{Name: "self-stretch", Description: "Stretch self to fill the cross axis", Category: "flex"},
	{Name: "justify-start", Description: "Justify content to the start", Category: "flex"},
	{Name: "justify-center", Description: "Justify content to the center", Category: "flex"},
	{Name: "justify-end", Description: "Justify content to the end", Category: "flex"},
	{Name: "justify-between", Description: "Distribute items with space between", Category: "flex"},
	{Name: "justify-around", Description: "Distribute items with space around", Category: "flex"},
	{Name: "justify-evenly", Description: "Distribute items with equal space", Category: "flex"},

	// Spacing
	{Name: "gap-1", Description: "Set gap between children to 1", Category: "spacing"},
	{Name: "gap-2", Description: "Set gap between children to 2", Category: "spacing"},
	{Name: "gap-3", Description: "Set gap between children to 3", Category: "spacing"},
	{Name: "gap-4", Description: "Set gap between children to 4", Category: "spacing"},
	{Name: "p-1", Description: "Set padding to 1 on all sides", Category: "spacing"},
	{Name: "p-2", Description: "Set padding to 2 on all sides", Category: "spacing"},
	{Name: "p-3", Description: "Set padding to 3 on all sides", Category: "spacing"},
	{Name: "p-4", Description: "Set padding to 4 on all sides", Category: "spacing"},
	{Name: "px-1", Description: "Set horizontal padding to 1", Category: "spacing"},
	{Name: "px-2", Description: "Set horizontal padding to 2", Category: "spacing"},
	{Name: "py-1", Description: "Set vertical padding to 1", Category: "spacing"},
	{Name: "py-2", Description: "Set vertical padding to 2", Category: "spacing"},
	{Name: "m-1", Description: "Set margin to 1 on all sides", Category: "spacing"},
	{Name: "m-2", Description: "Set margin to 2 on all sides", Category: "spacing"},

	// Typography
	{Name: "font-bold", Description: "Bold text style", Category: "typography"},
	{Name: "font-dim", Description: "Dim/faint text style", Category: "typography"},
	{Name: "font-italic", Description: "Italic text style", Category: "typography"},
	{Name: "italic", Description: "Italic text style", Category: "typography"},
	{Name: "underline", Description: "Underlined text style", Category: "typography"},
	{Name: "strikethrough", Description: "Strikethrough text style", Category: "typography"},
	{Name: "blink", Description: "Blinking text style", Category: "typography"},
	{Name: "reverse", Description: "Reverse video (swap fg/bg)", Category: "typography"},
	{Name: "text-left", Description: "Align text to the left", Category: "typography"},
	{Name: "text-center", Description: "Align text to the center", Category: "typography"},
	{Name: "text-right", Description: "Align text to the right", Category: "typography"},

	// Text colors
	{Name: "text-red", Description: "Set text color to red", Category: "typography"},
	{Name: "text-green", Description: "Set text color to green", Category: "typography"},
	{Name: "text-blue", Description: "Set text color to blue", Category: "typography"},
	{Name: "text-cyan", Description: "Set text color to cyan", Category: "typography"},
	{Name: "text-magenta", Description: "Set text color to magenta", Category: "typography"},
	{Name: "text-yellow", Description: "Set text color to yellow", Category: "typography"},
	{Name: "text-white", Description: "Set text color to white", Category: "typography"},
	{Name: "text-black", Description: "Set text color to black", Category: "typography"},

	// Bright text colors
	{Name: "text-bright-red", Description: "Set text color to bright red", Category: "typography"},
	{Name: "text-bright-green", Description: "Set text color to bright green", Category: "typography"},
	{Name: "text-bright-blue", Description: "Set text color to bright blue", Category: "typography"},
	{Name: "text-bright-cyan", Description: "Set text color to bright cyan", Category: "typography"},
	{Name: "text-bright-magenta", Description: "Set text color to bright magenta", Category: "typography"},
	{Name: "text-bright-yellow", Description: "Set text color to bright yellow", Category: "typography"},
	{Name: "text-bright-white", Description: "Set text color to bright white", Category: "typography"},
	{Name: "text-bright-black", Description: "Set text color to bright black (gray)", Category: "typography"},

	// Background colors
	{Name: "bg-red", Description: "Set background to red", Category: "visual"},
	{Name: "bg-green", Description: "Set background to green", Category: "visual"},
	{Name: "bg-blue", Description: "Set background to blue", Category: "visual"},
	{Name: "bg-cyan", Description: "Set background to cyan", Category: "visual"},
	{Name: "bg-magenta", Description: "Set background to magenta", Category: "visual"},
	{Name: "bg-yellow", Description: "Set background to yellow", Category: "visual"},
	{Name: "bg-white", Description: "Set background to white", Category: "visual"},
	{Name: "bg-black", Description: "Set background to black", Category: "visual"},

	// Bright background colors
	{Name: "bg-bright-red", Description: "Set background to bright red", Category: "visual"},
	{Name: "bg-bright-green", Description: "Set background to bright green", Category: "visual"},
	{Name: "bg-bright-blue", Description: "Set background to bright blue", Category: "visual"},
	{Name: "bg-bright-cyan", Description: "Set background to bright cyan", Category: "visual"},
	{Name: "bg-bright-magenta", Description: "Set background to bright magenta", Category: "visual"},
	{Name: "bg-bright-yellow", Description: "Set background to bright yellow", Category: "visual"},
	{Name: "bg-bright-white", Description: "Set background to bright white", Category: "visual"},
	{Name: "bg-bright-black", Description: "Set background to bright black (dark gray)", Category: "visual"},

	// Borders
	{Name: "border", Description: "Default border style", Category: "visual"},
	{Name: "border-none", Description: "No border", Category: "visual"},
	{Name: "border-single", Description: "Single line border", Category: "visual"},
	{Name: "border-double", Description: "Double line border", Category: "visual"},
	{Name: "border-rounded", Description: "Rounded border", Category: "visual"},
	{Name: "border-thick", Description: "Thick border", Category: "visual"},
	{Name: "border-red", Description: "Set border color to red", Category: "visual"},
	{Name: "border-green", Description: "Set border color to green", Category: "visual"},
	{Name: "border-blue", Description: "Set border color to blue", Category: "visual"},
	{Name: "border-cyan", Description: "Set border color to cyan", Category: "visual"},

	// Sizing
	{Name: "w-full", Description: "Set width to 100%", Category: "layout"},
	{Name: "w-auto", Description: "Set width to auto", Category: "layout"},
	{Name: "h-full", Description: "Set height to 100%", Category: "layout"},
	{Name: "h-auto", Description: "Set height to auto", Category: "layout"},
	{Name: "w-1/2", Description: "Set width to 50%", Category: "layout"},
	{Name: "w-1/3", Description: "Set width to 33.3%", Category: "layout"},
	{Name: "w-2/3", Description: "Set width to 66.7%", Category: "layout"},

	// Flex grow/shrink
	{Name: "grow", Description: "Set flex grow factor to 1", Category: "flex"},
	{Name: "grow-0", Description: "Set flex grow factor to 0", Category: "flex"},
	{Name: "shrink", Description: "Set flex shrink factor to 1", Category: "flex"},
	{Name: "shrink-0", Description: "Prevent element from shrinking", Category: "flex"},
	{Name: "flex-1", Description: "Shorthand for grow + shrink (flex: 1 1)", Category: "flex"},
	{Name: "flex-auto", Description: "Grow + shrink, respects content size", Category: "flex"},
	{Name: "flex-initial", Description: "Don't grow but can shrink (flex: 0 1)", Category: "flex"},
	{Name: "flex-none", Description: "Fixed size, don't grow or shrink", Category: "flex"},

	// Scroll
	{Name: "overflow-scroll", Description: "Enable scrolling for overflow content", Category: "scroll"},
	{Name: "overflow-y-scroll", Description: "Enable vertical scrolling", Category: "scroll"},
	{Name: "overflow-x-scroll", Description: "Enable horizontal scrolling", Category: "scroll"},

	// Overflow
	{Name: "overflow-hidden", Description: "Clip children without scrollbars", Category: "layout"},

	// Focus
	{Name: "focusable", Description: "Make element focusable", Category: "layout"},

	// Visibility
	{Name: "hidden", Description: "Hide element from layout and rendering", Category: "layout"},

	// Text overflow
	{Name: "truncate", Description: "Truncate text with ellipsis on overflow", Category: "typography"},

	// Hex colors (examples)
	{Name: "text-[#ff0000]", Description: "Set text color to hex #ff0000", Category: "visual"},
	{Name: "bg-[#00ff00]", Description: "Set background to hex #00ff00", Category: "visual"},
	{Name: "border-[#0000ff]", Description: "Set border color to hex #0000ff", Category: "visual"},

	// Scrollbar styling
	{Name: "scrollbar-red", Description: "Set scrollbar track color to red", Category: "visual"},
	{Name: "scrollbar-cyan", Description: "Set scrollbar track color to cyan", Category: "visual"},
	{Name: "scrollbar-thumb-red", Description: "Set scrollbar thumb color to red", Category: "visual"},
	{Name: "scrollbar-thumb-cyan", Description: "Set scrollbar thumb color to cyan", Category: "visual"},
	{Name: "scrollbar-[#ff6600]", Description: "Set scrollbar track color to hex", Category: "visual"},
	{Name: "scrollbar-thumb-[#ff6600]", Description: "Set scrollbar thumb color to hex", Category: "visual"},

	// Gradients
	{Name: "text-gradient-red-blue", Description: "Apply horizontal gradient to text from red to blue", Category: "visual"},
	{Name: "text-gradient-cyan-magenta", Description: "Apply horizontal gradient to text from cyan to magenta", Category: "visual"},
	{Name: "text-gradient-red-blue-v", Description: "Apply vertical gradient to text from red to blue", Category: "visual"},
	{Name: "bg-gradient-red-blue", Description: "Apply horizontal gradient to background from red to blue", Category: "visual"},
	{Name: "bg-gradient-cyan-magenta", Description: "Apply horizontal gradient to background from cyan to magenta", Category: "visual"},
	{Name: "bg-gradient-red-blue-dd", Description: "Apply diagonal-down gradient to background from red to blue", Category: "visual"},
	{Name: "border-gradient-yellow-red", Description: "Apply horizontal gradient to border from yellow to red", Category: "visual"},
}
grindlemire/go-tui code browser
