@enjoys/context-engine 1.2.0 → 1.3.1

package/data/commands/tailwindcss.json

@@ -0,0 +1,53 @@
+{
+  "language": "tailwindcss",
+  "commands": [
+    {
+      "command": "tailwindcss.sortClasses",
+      "title": "Tailwind CSS: Sort Classes",
+      "description": "Sorts Tailwind utility classes in the selected class attribute following the recommended Headwind/Prettier-plugin-tailwindcss order.",
+      "category": "Tailwind CSS"
+    },
+    {
+      "command": "tailwindcss.showGeneratedCSS",
+      "title": "Tailwind CSS: Show Generated CSS",
+      "description": "Displays the compiled CSS output for the Tailwind utility classes under the cursor or in the selection.",
+      "category": "Tailwind CSS"
+    },
+    {
+      "command": "tailwindcss.openConfig",
+      "title": "Tailwind CSS: Open Configuration",
+      "description": "Opens the tailwind.config.js configuration file for the current workspace.",
+      "category": "Tailwind CSS"
+    },
+    {
+      "command": "tailwindcss.extractApply",
+      "title": "Tailwind CSS: Extract to @apply Component",
+      "description": "Extracts selected utility classes into a new CSS component using @apply directive.",
+      "category": "Tailwind CSS"
+    },
+    {
+      "command": "tailwindcss.showColorPalette",
+      "title": "Tailwind CSS: Show Color Palette",
+      "description": "Displays the full Tailwind color palette with hex values from the theme configuration.",
+      "category": "Tailwind CSS"
+    },
+    {
+      "command": "tailwindcss.convertToArbitrary",
+      "title": "Tailwind CSS: Convert to Arbitrary Value",
+      "description": "Converts a standard utility value to arbitrary bracket notation, e.g. p-4 to p-[1rem].",
+      "category": "Tailwind CSS"
+    },
+    {
+      "command": "tailwindcss.removeDuplicates",
+      "title": "Tailwind CSS: Remove Duplicate Classes",
+      "description": "Removes duplicate utility classes from the selected class attribute.",
+      "category": "Tailwind CSS"
+    },
+    {
+      "command": "tailwindcss.wrapResponsive",
+      "title": "Tailwind CSS: Wrap with Responsive Prefix",
+      "description": "Wraps selected utility classes with a chosen responsive breakpoint prefix (sm:, md:, lg:, xl:, 2xl:).",
+      "category": "Tailwind CSS"
+    }
+  ]
+}

package/data/completion/css.json

@@ -0,0 +1,383 @@
+{
+  "language": "css",
+  "completions": [
+    {
+      "label": "display",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Specifies the display behavior of an element.\n\nValues: `block`, `inline`, `inline-block`, `flex`, `grid`, `none`, `contents`, `inline-flex`, `inline-grid`, `flow-root`, `table`, `list-item`." },
+      "insertText": "display: ${1|block,inline,inline-block,flex,grid,none,contents,inline-flex,inline-grid,flow-root|};",
+      "insertTextRules": 4,
+      "sortText": "00_display"
+    },
+    {
+      "label": "position",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets how an element is positioned in a document. Works with `top`, `right`, `bottom`, `left`, and `z-index`.\n\nValues: `static`, `relative`, `absolute`, `fixed`, `sticky`." },
+      "insertText": "position: ${1|static,relative,absolute,fixed,sticky|};",
+      "insertTextRules": 4,
+      "sortText": "00_position"
+    },
+    {
+      "label": "flex",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Shorthand for `flex-grow`, `flex-shrink`, and `flex-basis`.\n\nSyntax: `flex: <grow> <shrink> <basis>;`\n\nExamples:\n- `flex: 1;` — grow to fill space\n- `flex: 0 0 auto;` — don't grow or shrink\n- `flex: 1 1 0%;` — distribute space evenly" },
+      "insertText": "flex: ${1:1} ${2:1} ${3:0%};",
+      "insertTextRules": 4,
+      "sortText": "00_flex"
+    },
+    {
+      "label": "grid-template-columns",
+      "kind": 14,
+      "detail": "CSS Grid Property",
+      "documentation": { "value": "Defines the columns of a grid container.\n\nExamples:\n- `grid-template-columns: 1fr 1fr 1fr;`\n- `grid-template-columns: repeat(3, 1fr);`\n- `grid-template-columns: minmax(200px, 1fr) 3fr;`\n- `grid-template-columns: auto 1fr auto;`" },
+      "insertText": "grid-template-columns: ${1:repeat(${2:3}, ${3:1fr})};",
+      "insertTextRules": 4,
+      "sortText": "00_grid-template-columns"
+    },
+    {
+      "label": "grid-template-rows",
+      "kind": 14,
+      "detail": "CSS Grid Property",
+      "documentation": { "value": "Defines the rows of a grid container.\n\nExamples:\n- `grid-template-rows: auto 1fr auto;`\n- `grid-template-rows: repeat(3, minmax(100px, auto));`" },
+      "insertText": "grid-template-rows: ${1:auto 1fr auto};",
+      "insertTextRules": 4,
+      "sortText": "00_grid-template-rows"
+    },
+    {
+      "label": "margin",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Sets the margin area on all four sides.\n\nSyntax: `margin: <top> <right> <bottom> <left>;`\n\nShorthand patterns:\n- `margin: 10px;` — all sides\n- `margin: 10px 20px;` — vertical | horizontal\n- `margin: 10px 20px 30px;` — top | horizontal | bottom\n- `margin: 10px 20px 30px 40px;` — top | right | bottom | left\n- `margin: 0 auto;` — center horizontally" },
+      "insertText": "margin: ${1:0};",
+      "insertTextRules": 4,
+      "sortText": "00_margin"
+    },
+    {
+      "label": "padding",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Sets the padding area on all four sides.\n\nSyntax: `padding: <top> <right> <bottom> <left>;`\n\nAccepts length, percentage, or `0`. Does not accept negative values or `auto`." },
+      "insertText": "padding: ${1:0};",
+      "insertTextRules": 4,
+      "sortText": "00_padding"
+    },
+    {
+      "label": "color",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the foreground color of text and text decorations.\n\nAccepts: named colors, hex (`#fff`), `rgb()`, `rgba()`, `hsl()`, `hsla()`, `oklch()`, `lab()`, `lch()`, `color()`, `currentColor`, `inherit`, `transparent`." },
+      "insertText": "color: ${1:#000};",
+      "insertTextRules": 4,
+      "sortText": "00_color"
+    },
+    {
+      "label": "background",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Shorthand for `background-color`, `background-image`, `background-position`, `background-size`, `background-repeat`, `background-origin`, `background-clip`, and `background-attachment`.\n\nExamples:\n- `background: #fff;`\n- `background: url('bg.png') no-repeat center/cover;`\n- `background: linear-gradient(to right, #000, #fff);`" },
+      "insertText": "background: ${1:#fff};",
+      "insertTextRules": 4,
+      "sortText": "00_background"
+    },
+    {
+      "label": "border",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Shorthand for `border-width`, `border-style`, and `border-color`.\n\nSyntax: `border: <width> <style> <color>;`\n\nStyles: `none`, `solid`, `dashed`, `dotted`, `double`, `groove`, `ridge`, `inset`, `outset`." },
+      "insertText": "border: ${1:1px} ${2|solid,dashed,dotted,double,none|} ${3:#000};",
+      "insertTextRules": 4,
+      "sortText": "00_border"
+    },
+    {
+      "label": "font",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Shorthand for `font-style`, `font-variant`, `font-weight`, `font-size`/`line-height`, and `font-family`.\n\nSyntax: `font: [style] [variant] [weight] size[/line-height] family;`\n\nExample: `font: italic bold 16px/1.5 'Helvetica Neue', sans-serif;`" },
+      "insertText": "font: ${1:16px}/${2:1.5} ${3:sans-serif};",
+      "insertTextRules": 4,
+      "sortText": "00_font"
+    },
+    {
+      "label": "animation",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Shorthand for `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode`, and `animation-play-state`.\n\nSyntax: `animation: name duration timing-function delay iteration-count direction fill-mode;`\n\nExample: `animation: fadeIn 0.3s ease-in-out forwards;`" },
+      "insertText": "animation: ${1:name} ${2:0.3s} ${3|ease,ease-in,ease-out,ease-in-out,linear,cubic-bezier()|} ${4:forwards};",
+      "insertTextRules": 4,
+      "sortText": "00_animation"
+    },
+    {
+      "label": "transition",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Shorthand for `transition-property`, `transition-duration`, `transition-timing-function`, and `transition-delay`.\n\nSyntax: `transition: property duration timing-function delay;`\n\nExamples:\n- `transition: all 0.3s ease;`\n- `transition: opacity 0.2s, transform 0.3s ease-out;`" },
+      "insertText": "transition: ${1:all} ${2:0.3s} ${3|ease,ease-in,ease-out,ease-in-out,linear|};",
+      "insertTextRules": 4,
+      "sortText": "00_transition"
+    },
+    {
+      "label": "transform",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Applies a 2D or 3D transformation to an element.\n\nFunctions: `translate()`, `translateX()`, `translateY()`, `rotate()`, `scale()`, `scaleX()`, `scaleY()`, `skew()`, `skewX()`, `skewY()`, `matrix()`, `perspective()`, `translate3d()`, `rotate3d()`, `scale3d()`." },
+      "insertText": "transform: ${1|translate(),translateX(),translateY(),rotate(),scale(),skew(),matrix(),perspective()|};",
+      "insertTextRules": 4,
+      "sortText": "00_transform"
+    },
+    {
+      "label": "z-index",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the z-order of a positioned element and its descendants. Only works on elements with `position` other than `static`.\n\nValues: integer (positive or negative), `auto`." },
+      "insertText": "z-index: ${1:1};",
+      "insertTextRules": 4,
+      "sortText": "00_z-index"
+    },
+    {
+      "label": "overflow",
+      "kind": 14,
+      "detail": "CSS Shorthand Property",
+      "documentation": { "value": "Sets what to do when content overflows the element's box.\n\nValues: `visible`, `hidden`, `clip`, `scroll`, `auto`.\n\nAlso: `overflow-x`, `overflow-y` for individual axis control." },
+      "insertText": "overflow: ${1|visible,hidden,clip,scroll,auto|};",
+      "insertTextRules": 4,
+      "sortText": "00_overflow"
+    },
+    {
+      "label": "cursor",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the type of mouse cursor when hovering over an element.\n\nCommon values: `pointer`, `default`, `text`, `move`, `not-allowed`, `grab`, `grabbing`, `crosshair`, `wait`, `progress`, `help`, `zoom-in`, `zoom-out`, `none`, `url()` for custom cursors." },
+      "insertText": "cursor: ${1|pointer,default,text,move,not-allowed,grab,grabbing,crosshair,wait,help,none|};",
+      "insertTextRules": 4,
+      "sortText": "00_cursor"
+    },
+    {
+      "label": "opacity",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Sets the opacity level for an element. Affects the entire element including contents.\n\nRange: `0` (fully transparent) to `1` (fully opaque).\n\nNote: Unlike `visibility: hidden`, opacity `0` still occupies space and receives events." },
+      "insertText": "opacity: ${1:1};",
+      "insertTextRules": 4,
+      "sortText": "00_opacity"
+    },
+    {
+      "label": "box-sizing",
+      "kind": 14,
+      "detail": "CSS Property",
+      "documentation": { "value": "Defines how the width and height of an element are calculated.\n\n- `content-box` (default): Width/height only include content\n- `border-box`: Width/height include padding and border\n\nBest practice: `*, *::before, *::after { box-sizing: border-box; }`" },
+      "insertText": "box-sizing: ${1|border-box,content-box|};",
+      "insertTextRules": 4,
+      "sortText": "00_box-sizing"
+    },
+    {
+      "label": ":hover",
+      "kind": 14,
+      "detail": "CSS Pseudo-class",
+      "documentation": { "value": "Matches when the user interacts with an element via a pointing device (mouse hover).\n\nSpecificity: adds (0, 1, 0) to the selector.\n\nExample: `a:hover { color: blue; text-decoration: underline; }`" },
+      "insertText": ":hover {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "01_hover"
+    },
+    {
+      "label": ":focus",
+      "kind": 14,
+      "detail": "CSS Pseudo-class",
+      "documentation": { "value": "Matches when an element has received focus (keyboard tab, click, or programmatic focus).\n\nBest practice: Always provide visible `:focus` styles for accessibility. Consider `:focus-visible` for keyboard-only focus." },
+      "insertText": ":focus {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "01_focus"
+    },
+    {
+      "label": "::before",
+      "kind": 14,
+      "detail": "CSS Pseudo-element",
+      "documentation": { "value": "Creates a pseudo-element as the first child of the selected element. Requires `content` property.\n\nExample:\n```css\n.icon::before {\n  content: '';\n  display: inline-block;\n  width: 16px;\n  height: 16px;\n}\n```" },
+      "insertText": "::before {\n\tcontent: '${1}';\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "01_before"
+    },
+    {
+      "label": "::after",
+      "kind": 14,
+      "detail": "CSS Pseudo-element",
+      "documentation": { "value": "Creates a pseudo-element as the last child of the selected element. Requires `content` property.\n\nCommonly used for decorative elements, clearfixes, and overlays." },
+      "insertText": "::after {\n\tcontent: '${1}';\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "01_after"
+    },
+    {
+      "label": ":nth-child()",
+      "kind": 14,
+      "detail": "CSS Pseudo-class",
+      "documentation": { "value": "Matches elements based on their position among siblings.\n\nSyntax: `:nth-child(An+B [of S]?)`\n\nExamples:\n- `:nth-child(2)` — second child\n- `:nth-child(odd)` / `:nth-child(2n+1)` — odd children\n- `:nth-child(even)` / `:nth-child(2n)` — even children\n- `:nth-child(3n)` — every third child\n- `:nth-child(-n+3)` — first three children" },
+      "insertText": ":nth-child(${1:2n+1})",
+      "insertTextRules": 4,
+      "sortText": "01_nth-child"
+    },
+    {
+      "label": ":first-child",
+      "kind": 14,
+      "detail": "CSS Pseudo-class",
+      "documentation": { "value": "Matches the first child element. Equivalent to `:nth-child(1)`.\n\nExample: `li:first-child { font-weight: bold; }`" },
+      "insertText": ":first-child",
+      "insertTextRules": 0,
+      "sortText": "01_first-child"
+    },
+    {
+      "label": "@media",
+      "kind": 14,
+      "detail": "CSS At-Rule",
+      "documentation": { "value": "Applies styles conditionally based on media queries.\n\nMedia types: `all`, `screen`, `print`\nMedia features: `width`, `height`, `aspect-ratio`, `orientation`, `resolution`, `prefers-color-scheme`, `prefers-reduced-motion`, `hover`, `pointer`.\n\nLogical operators: `and`, `not`, `only`, `,` (or)." },
+      "insertText": "@media ${1|(max-width: 768px),(min-width: 768px),(prefers-color-scheme: dark),(prefers-reduced-motion: reduce)|} {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "02_media"
+    },
+    {
+      "label": "@keyframes",
+      "kind": 14,
+      "detail": "CSS At-Rule",
+      "documentation": { "value": "Defines the keyframes for an animation sequence.\n\nSyntax:\n```css\n@keyframes name {\n  from { /* start state */ }\n  to { /* end state */ }\n}\n```\nOr with percentage stops:\n```css\n@keyframes name {\n  0% { opacity: 0; }\n  50% { opacity: 0.5; }\n  100% { opacity: 1; }\n}\n```" },
+      "insertText": "@keyframes ${1:animationName} {\n\tfrom {\n\t\t${2:opacity: 0;}\n\t}\n\tto {\n\t\t${3:opacity: 1;}\n\t}\n}",
+      "insertTextRules": 4,
+      "sortText": "02_keyframes"
+    },
+    {
+      "label": "@import",
+      "kind": 14,
+      "detail": "CSS At-Rule",
+      "documentation": { "value": "Imports a stylesheet into the current stylesheet. Must appear before all other rules except `@charset` and `@layer`.\n\nSyntax:\n- `@import url('file.css');`\n- `@import url('print.css') print;`\n- `@import url('mobile.css') screen and (max-width: 768px);`\n- `@import 'file.css' layer(name);`" },
+      "insertText": "@import url('${1:file.css}');",
+      "insertTextRules": 4,
+      "sortText": "02_import"
+    },
+    {
+      "label": "@font-face",
+      "kind": 14,
+      "detail": "CSS At-Rule",
+      "documentation": { "value": "Defines a custom font to be used in the document.\n\nDescriptors: `font-family`, `src`, `font-weight`, `font-style`, `font-display`, `unicode-range`, `font-stretch`, `font-variant`, `font-feature-settings`.\n\n`font-display` values: `auto`, `block`, `swap`, `fallback`, `optional`." },
+      "insertText": "@font-face {\n\tfont-family: '${1:FontName}';\n\tsrc: url('${2:font.woff2}') format('woff2'),\n\t     url('${3:font.woff}') format('woff');\n\tfont-weight: ${4|normal,bold,100,200,300,400,500,600,700,800,900|};\n\tfont-style: ${5|normal,italic|};\n\tfont-display: ${6|swap,block,fallback,optional|};\n}",
+      "insertTextRules": 4,
+      "sortText": "02_font-face"
+    },
+    {
+      "label": "@supports",
+      "kind": 14,
+      "detail": "CSS At-Rule",
+      "documentation": { "value": "Feature query — applies styles only if the browser supports a given CSS feature.\n\nExamples:\n- `@supports (display: grid) { ... }`\n- `@supports not (gap: 1rem) { ... }`\n- `@supports (display: grid) and (gap: 1rem) { ... }`\n- `@supports selector(:has()) { ... }`" },
+      "insertText": "@supports (${1:display: grid}) {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "02_supports"
+    },
+    {
+      "label": "@layer",
+      "kind": 14,
+      "detail": "CSS At-Rule (Cascade Layers)",
+      "documentation": { "value": "Declares cascade layers to control the order of specificity.\n\nSyntax:\n- `@layer name;` — declare layer order\n- `@layer name { ... }` — assign rules to layer\n- `@layer name1, name2, name3;` — define layer order\n- `@import url('lib.css') layer(lib);`\n\nLayers declared earlier have lower priority." },
+      "insertText": "@layer ${1:layerName} {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "02_layer"
+    },
+    {
+      "label": "@container",
+      "kind": 14,
+      "detail": "CSS At-Rule (Container Queries)",
+      "documentation": { "value": "Applies styles based on the size of a containing element (not the viewport).\n\nRequires `container-type` on the parent:\n```css\n.parent { container-type: inline-size; }\n@container (min-width: 400px) { .child { ... } }\n```\nNamed containers: `container-name: sidebar;` + `@container sidebar (...) { }`" },
+      "insertText": "@container ${1:(min-width: ${2:400px})} {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "02_container"
+    },
+    {
+      "label": "var()",
+      "kind": 14,
+      "detail": "CSS Function — Custom Properties",
+      "documentation": { "value": "Inserts the value of a CSS custom property.\n\nSyntax: `var(--property-name, fallback-value)`\n\nExample:\n```css\n:root { --primary: #3490dc; }\n.btn { color: var(--primary, blue); }\n```\nFallback can itself use `var()`: `var(--a, var(--b, #000))`." },
+      "insertText": "var(--${1:property}${2:, ${3:fallback}})",
+      "insertTextRules": 4,
+      "sortText": "00_var"
+    },
+    {
+      "label": "Flexbox Center",
+      "kind": 15,
+      "detail": "Snippet — Center element with Flexbox",
+      "documentation": { "value": "Centers child elements both horizontally and vertically using Flexbox.\n\nThis is the most common centering technique in modern CSS." },
+      "insertText": "display: flex;\njustify-content: center;\nalign-items: center;",
+      "insertTextRules": 4,
+      "sortText": "03_flexbox-center"
+    },
+    {
+      "label": "Grid Layout",
+      "kind": 15,
+      "detail": "Snippet — Responsive grid layout",
+      "documentation": { "value": "Creates a responsive grid layout using `auto-fill` and `minmax()` for fluid column sizing without media queries." },
+      "insertText": "display: grid;\ngrid-template-columns: repeat(auto-fill, minmax(${1:250px}, 1fr));\ngap: ${2:1rem};",
+      "insertTextRules": 4,
+      "sortText": "03_grid-layout"
+    },
+    {
+      "label": "Media Query Mobile",
+      "kind": 15,
+      "detail": "Snippet — Mobile-first breakpoint",
+      "documentation": { "value": "Mobile-first media query for tablet and above (768px). Common breakpoints:\n- 480px: Mobile landscape\n- 768px: Tablet\n- 1024px: Desktop\n- 1280px: Large desktop" },
+      "insertText": "@media (min-width: ${1|480px,768px,1024px,1280px|}) {\n\t$0\n}",
+      "insertTextRules": 4,
+      "sortText": "03_media-mobile"
+    },
+    {
+      "label": "Custom Property Definition",
+      "kind": 15,
+      "detail": "Snippet — CSS Custom Property on :root",
+      "documentation": { "value": "Defines a CSS custom property (CSS variable) on the `:root` pseudo-class for global usage.\n\nCustom properties are inherited and can be overridden in nested scopes." },
+      "insertText": ":root {\n\t--${1:property-name}: ${2:value};\n}",
+      "insertTextRules": 4,
+      "sortText": "03_custom-property"
+    },
+    {
+      "label": "Dark Mode Toggle",
+      "kind": 15,
+      "detail": "Snippet — prefers-color-scheme dark",
+      "documentation": { "value": "Uses the `prefers-color-scheme` media feature to apply dark mode styles based on user system preference." },
+      "insertText": "@media (prefers-color-scheme: dark) {\n\t:root {\n\t\t--bg: ${1:#1a1a2e};\n\t\t--text: ${2:#e0e0e0};\n\t}\n}",
+      "insertTextRules": 4,
+      "sortText": "03_dark-mode"
+    },
+    {
+      "label": "calc()",
+      "kind": 14,
+      "detail": "CSS Function",
+      "documentation": { "value": "Performs calculations to determine CSS property values. Supports `+`, `-`, `*`, `/` and can mix units.\n\nExamples:\n- `width: calc(100% - 2rem);`\n- `font-size: calc(1rem + 0.5vw);`\n- `height: calc(100vh - var(--header-height));`" },
+      "insertText": "calc(${1:100%} ${2|-,+|} ${3:2rem})",
+      "insertTextRules": 4,
+      "sortText": "00_calc"
+    },
+    {
+      "label": "clamp()",
+      "kind": 14,
+      "detail": "CSS Function",
+      "documentation": { "value": "Clamps a value between a minimum and maximum.\n\nSyntax: `clamp(MIN, VAL, MAX)`\n\nExample: `font-size: clamp(1rem, 2.5vw, 2rem);` — responsive font that never goes below 1rem or above 2rem." },
+      "insertText": "clamp(${1:1rem}, ${2:2.5vw}, ${3:2rem})",
+      "insertTextRules": 4,
+      "sortText": "00_clamp"
+    },
+    {
+      "label": "gap",
+      "kind": 14,
+      "detail": "CSS Property (Flexbox/Grid)",
+      "documentation": { "value": "Sets the gap (gutter) between rows and columns in flex and grid layouts.\n\nShorthand for `row-gap` and `column-gap`.\n\n- `gap: 1rem;` — uniform gap\n- `gap: 1rem 2rem;` — row gap | column gap" },
+      "insertText": "gap: ${1:1rem};",
+      "insertTextRules": 4,
+      "sortText": "00_gap"
+    },
+    {
+      "label": "Visually Hidden",
+      "kind": 15,
+      "detail": "Snippet — Screen reader only",
+      "documentation": { "value": "Hides an element visually while keeping it accessible to screen readers. Preferred over `display: none` for accessibility." },
+      "insertText": "position: absolute;\nwidth: 1px;\nheight: 1px;\npadding: 0;\nmargin: -1px;\noverflow: hidden;\nclip: rect(0, 0, 0, 0);\nwhite-space: nowrap;\nborder-width: 0;",
+      "insertTextRules": 4,
+      "sortText": "03_visually-hidden"
+    }
+  ]
+}

package/data/completion/javascript.json

@@ -909,6 +909,33 @@
       "insertText": "using ${1:resource} = ${2:expression};",
       "insertTextRules": 4,
       "sortText": "00_using"
+    },
+    {
+      "label": { "label": "react component", "detail": " function", "description": "JSX" },
+      "kind": 15,
+      "detail": "React function component",
+      "documentation": { "value": "Create a React function component with JSX.\n\n```jsx\nfunction Button({ label }) {\n  return (\n    <button className=\"btn\">{label}</button>\n  );\n}\n\nexport default Button;\n```" },
+      "insertText": "function ${1:Component}({ ${2:props} }) {\n\treturn (\n\t\t<div className=\"${3}\">\n\t\t\t${4}\n\t\t</div>\n\t);\n}\n\nexport default ${1:Component};",
+      "insertTextRules": 4,
+      "sortText": "00_react_component"
+    },
+    {
+      "label": { "label": "jsx element", "detail": " snippet", "description": "JSX" },
+      "kind": 15,
+      "detail": "JSX element",
+      "documentation": { "value": "Insert a JSX element.\n\n```jsx\n<div className=\"container\">Content</div>\n```" },
+      "insertText": "<${1:div} className=\"${2}\">${3}</${1:div}>",
+      "insertTextRules": 4,
+      "sortText": "00_jsx_element"
+    },
+    {
+      "label": { "label": "useState", "detail": " hook", "description": "React" },
+      "kind": 15,
+      "detail": "React useState hook",
+      "documentation": { "value": "Declare component state with `useState`.\n\n```jsx\nconst [count, setCount] = useState(0);\n```" },
+      "insertText": "const [${1:state}, set${2:State}] = useState(${3:initial});",
+      "insertTextRules": 4,
+      "sortText": "00_react_useState"
     }
   ]
 }

package/data/completion/redis-cli.json

@@ -1,5 +1,5 @@
 {
-  "language": "redis",
+  "language": "redis-cli",
   "completions": [
     {
       "label": "SET",