@enjoys/context-engine 1.2.0 → 1.3.1

package/data/implementation/css.json

@@ -0,0 +1,65 @@
+{
+  "language": "css",
+  "implementationPatterns": [
+    {
+      "pattern": "--(([a-zA-Z_][a-zA-Z0-9_-]*))\\s*:\\s*([^;]+);",
+      "captureGroup": 1,
+      "kind": "variable",
+      "description": "Custom property definition. The implementation of a CSS variable (--name: value) that can be referenced with var(--name)."
+    },
+    {
+      "pattern": "([.#]?[a-zA-Z_][a-zA-Z0-9_-]*)\\s*\\{[^}]+\\}",
+      "captureGroup": 1,
+      "kind": "selector",
+      "description": "Selector rule implementation. The full rule block that defines styles for a given selector, including all property declarations."
+    },
+    {
+      "pattern": "@keyframes\\s+([a-zA-Z_][a-zA-Z0-9_-]*)\\s*\\{[\\s\\S]*?\\n\\}",
+      "captureGroup": 1,
+      "kind": "animation",
+      "description": "@keyframes implementation. The full animation definition including all keyframe stops (from/to or percentage-based)."
+    },
+    {
+      "pattern": "@font-face\\s*\\{[^}]*font-family\\s*:\\s*['\"]?([^'\";}]+)[^}]*\\}",
+      "captureGroup": 1,
+      "kind": "font",
+      "description": "@font-face implementation. The full font declaration including family name, sources, weight ranges, and display strategy."
+    },
+    {
+      "pattern": "@layer\\s+([a-zA-Z_][a-zA-Z0-9_-]*)\\s*\\{[\\s\\S]*?\\n\\}",
+      "captureGroup": 1,
+      "kind": "layer",
+      "description": "@layer implementation. The full cascade layer block containing all rules assigned to this layer."
+    },
+    {
+      "pattern": "@counter-style\\s+([a-zA-Z_][a-zA-Z0-9_-]*)\\s*\\{[^}]+\\}",
+      "captureGroup": 1,
+      "kind": "counter-style",
+      "description": "@counter-style implementation. Defines a custom counter style with system, symbols, and suffix descriptors."
+    },
+    {
+      "pattern": "@property\\s+--(([a-zA-Z_][a-zA-Z0-9_-]*))\\s*\\{[^}]+\\}",
+      "captureGroup": 1,
+      "kind": "registered-property",
+      "description": "@property (Houdini) implementation. Registers a custom property with syntax, inherits, and initial-value descriptors."
+    },
+    {
+      "pattern": "@media\\s+([^{]+)\\s*\\{[\\s\\S]*?\\n\\}",
+      "captureGroup": 1,
+      "kind": "media-query",
+      "description": "@media implementation. The full media query block containing conditional styles for specific device/viewport conditions."
+    },
+    {
+      "pattern": "@supports\\s+([^{]+)\\s*\\{[\\s\\S]*?\\n\\}",
+      "captureGroup": 1,
+      "kind": "feature-query",
+      "description": "@supports implementation. The full feature query block containing styles applied only if the browser supports the tested feature."
+    },
+    {
+      "pattern": "@container\\s+(?:([a-zA-Z_][a-zA-Z0-9_-]*)\\s+)?\\([^)]+\\)\\s*\\{[\\s\\S]*?\\n\\}",
+      "captureGroup": 1,
+      "kind": "container-query",
+      "description": "@container implementation. The full container query block containing styles applied based on container element size."
+    }
+  ]
+}

package/data/implementation/tailwindcss.json

@@ -0,0 +1,59 @@
+{
+  "language": "tailwindcss",
+  "implementationPatterns": [
+    {
+      "pattern": "@apply\\s+([\\w\\s:/-]+)\\s*;",
+      "captureGroup": 1,
+      "kind": "class",
+      "description": "Implementation of utility classes applied via @apply directive — resolves to their CSS property declarations."
+    },
+    {
+      "pattern": "\\.([\\w-]+)\\s*\\{[^}]*@apply\\s+([\\w\\s:/-]+)",
+      "captureGroup": 1,
+      "kind": "class",
+      "description": "Custom component class implementation using @apply to compose Tailwind utilities."
+    },
+    {
+      "pattern": "addUtilities\\s*\\(\\s*\\{([^}]+)\\}",
+      "captureGroup": 1,
+      "kind": "function",
+      "description": "Plugin-defined utility implementations registered via the addUtilities API."
+    },
+    {
+      "pattern": "addComponents\\s*\\(\\s*\\{([^}]+)\\}",
+      "captureGroup": 1,
+      "kind": "function",
+      "description": "Plugin-defined component implementations registered via the addComponents API."
+    },
+    {
+      "pattern": "matchUtilities\\s*\\(\\s*\\{\\s*['\"]?([\\w-]+)['\"]?",
+      "captureGroup": 1,
+      "kind": "function",
+      "description": "Dynamic utility implementations registered via matchUtilities — supports arbitrary values."
+    },
+    {
+      "pattern": "@layer\\s+(components)\\s*\\{([^}]+)\\}",
+      "captureGroup": 2,
+      "kind": "module",
+      "description": "Component layer implementations — custom components defined within @layer components."
+    },
+    {
+      "pattern": "@layer\\s+(utilities)\\s*\\{([^}]+)\\}",
+      "captureGroup": 2,
+      "kind": "module",
+      "description": "Utility layer implementations — custom utilities defined within @layer utilities."
+    },
+    {
+      "pattern": "@layer\\s+(base)\\s*\\{([^}]+)\\}",
+      "captureGroup": 2,
+      "kind": "module",
+      "description": "Base layer implementations — base style overrides defined within @layer base."
+    },
+    {
+      "pattern": "plugin\\s*\\(\\s*function\\s*\\(\\s*\\{([^}]+)\\}",
+      "captureGroup": 1,
+      "kind": "function",
+      "description": "Tailwind plugin implementation defining custom utilities, components, or base styles."
+    }
+  ]
+}

package/data/inlayHints/css.json

@@ -0,0 +1,87 @@
+{
+  "language": "css",
+  "inlayHintPatterns": [
+    {
+      "pattern": "([.#]?[a-zA-Z_][a-zA-Z0-9_-]*(?:\\s*[>+~]\\s*[.#]?[a-zA-Z_][a-zA-Z0-9_-]*)*)\\s*\\{",
+      "kind": "type",
+      "label": "specificity: (${id}, ${class}, ${type})",
+      "position": "after",
+      "description": "Displays the computed specificity of a CSS selector as an (ID, Class, Type) tuple. Helps understand cascade priority."
+    },
+    {
+      "pattern": "#([0-9a-fA-F]{3,8})\\b",
+      "kind": "type",
+      "label": "■ ${color}",
+      "position": "after",
+      "description": "Shows a color swatch preview inline after hex color values for visual identification."
+    },
+    {
+      "pattern": ":\\s*(-?\\d+(\\.\\d+)?)px\\b",
+      "kind": "type",
+      "label": "${rem}rem",
+      "position": "after",
+      "description": "Displays the rem equivalent of pixel values (assumes 16px base). Example: 24px → 1.5rem."
+    },
+    {
+      "pattern": ":\\s*(-?\\d+(\\.\\d+)?)rem\\b",
+      "kind": "type",
+      "label": "${px}px",
+      "position": "after",
+      "description": "Displays the pixel equivalent of rem values (assumes 16px base). Example: 1.5rem → 24px."
+    },
+    {
+      "pattern": "margin:\\s*([^;]+);",
+      "kind": "type",
+      "label": "↑${top} →${right} ↓${bottom} ←${left}",
+      "position": "after",
+      "description": "Expands margin shorthand to show computed values for each side (top, right, bottom, left)."
+    },
+    {
+      "pattern": "padding:\\s*([^;]+);",
+      "kind": "type",
+      "label": "↑${top} →${right} ↓${bottom} ←${left}",
+      "position": "after",
+      "description": "Expands padding shorthand to show computed values for each side (top, right, bottom, left)."
+    },
+    {
+      "pattern": "z-index:\\s*(-?\\d+)",
+      "kind": "type",
+      "label": "stacking layer: ${level}",
+      "position": "after",
+      "description": "Indicates the relative stacking layer of the z-index value within the current stacking context."
+    },
+    {
+      "pattern": "transition:\\s*([^;]+);",
+      "kind": "type",
+      "label": "⏱ ${totalDuration}",
+      "position": "after",
+      "description": "Shows the total transition duration including delay for quick reference."
+    },
+    {
+      "pattern": "animation:\\s*([^;]+);",
+      "kind": "type",
+      "label": "⏱ ${duration} × ${iterations}",
+      "position": "after",
+      "description": "Shows animation duration and iteration count for quick reference."
+    },
+    {
+      "pattern": "grid-template-columns:\\s*repeat\\((\\d+|auto-fill|auto-fit),\\s*([^)]+)\\)",
+      "kind": "type",
+      "label": "${count} columns",
+      "position": "after",
+      "description": "Shows the number of grid columns generated by repeat() for easier visualization."
+    },
+    {
+      "pattern": "font-size:\\s*clamp\\(([^,]+),\\s*([^,]+),\\s*([^)]+)\\)",
+      "kind": "type",
+      "label": "min: ${1}, preferred: ${2}, max: ${3}",
+      "position": "after",
+      "description": "Breaks down clamp() function parameters for fluid font-size declarations."
+    }
+  ],
+  "typeInferenceRules": {
+    "specificity": "Computed as (count of #id selectors, count of .class/:pseudo-class/[attribute] selectors, count of element/::pseudo-element selectors)",
+    "pxToRem": "Divide pixel value by 16 (default browser font-size)",
+    "shorthandExpansion": "1 value = all sides; 2 values = vertical|horizontal; 3 values = top|horizontal|bottom; 4 values = top|right|bottom|left"
+  }
+}

package/data/inlayHints/tailwindcss.json

@@ -0,0 +1,111 @@
+{
+  "language": "tailwindcss",
+  "inlayHintPatterns": [
+    {
+      "pattern": "\\bp-(\\d+)\\b",
+      "kind": "type",
+      "label": "padding: ${1 * 0.25}rem",
+      "position": "after",
+      "description": "Shows the computed padding value in rem for spacing utilities. E.g. p-4 → padding: 1rem (16px)."
+    },
+    {
+      "pattern": "\\bm-(\\d+)\\b",
+      "kind": "type",
+      "label": "margin: ${1 * 0.25}rem",
+      "position": "after",
+      "description": "Shows the computed margin value in rem. E.g. m-4 → margin: 1rem (16px)."
+    },
+    {
+      "pattern": "\\bgap-(\\d+)\\b",
+      "kind": "type",
+      "label": "gap: ${1 * 0.25}rem",
+      "position": "after",
+      "description": "Shows the computed gap value. E.g. gap-4 → gap: 1rem (16px)."
+    },
+    {
+      "pattern": "\\bw-(\\d+)\\b",
+      "kind": "type",
+      "label": "width: ${1 * 0.25}rem",
+      "position": "after",
+      "description": "Shows the computed width value for numeric width utilities."
+    },
+    {
+      "pattern": "\\bh-(\\d+)\\b",
+      "kind": "type",
+      "label": "height: ${1 * 0.25}rem",
+      "position": "after",
+      "description": "Shows the computed height value for numeric height utilities."
+    },
+    {
+      "pattern": "\\bbg-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)\\b",
+      "kind": "type",
+      "label": "→ #{color_hex}",
+      "position": "after",
+      "description": "Shows the hex color value for Tailwind palette colors. E.g. bg-blue-500 → #3b82f6."
+    },
+    {
+      "pattern": "\\btext-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)\\b",
+      "kind": "type",
+      "label": "→ #{color_hex}",
+      "position": "after",
+      "description": "Shows the hex color value for text color utilities."
+    },
+    {
+      "pattern": "\\bborder-(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(50|100|200|300|400|500|600|700|800|900|950)\\b",
+      "kind": "type",
+      "label": "→ #{color_hex}",
+      "position": "after",
+      "description": "Shows the hex color value for border color utilities."
+    },
+    {
+      "pattern": "\\b(sm):",
+      "kind": "parameter",
+      "label": "≥640px",
+      "position": "after",
+      "description": "Shows the min-width breakpoint value for sm: prefix."
+    },
+    {
+      "pattern": "\\b(md):",
+      "kind": "parameter",
+      "label": "≥768px",
+      "position": "after",
+      "description": "Shows the min-width breakpoint value for md: prefix."
+    },
+    {
+      "pattern": "\\b(lg):",
+      "kind": "parameter",
+      "label": "≥1024px",
+      "position": "after",
+      "description": "Shows the min-width breakpoint value for lg: prefix."
+    },
+    {
+      "pattern": "\\b(xl):",
+      "kind": "parameter",
+      "label": "≥1280px",
+      "position": "after",
+      "description": "Shows the min-width breakpoint value for xl: prefix."
+    },
+    {
+      "pattern": "\\b(2xl):",
+      "kind": "parameter",
+      "label": "≥1536px",
+      "position": "after",
+      "description": "Shows the min-width breakpoint value for 2xl: prefix."
+    },
+    {
+      "pattern": "\\btext-(xs|sm|base|lg|xl|2xl|3xl|4xl|5xl|6xl|7xl|8xl|9xl)\\b",
+      "kind": "type",
+      "label": "→ font-size",
+      "position": "after",
+      "description": "Shows the computed font-size. E.g. text-lg → 1.125rem / 18px."
+    },
+    {
+      "pattern": "\\brounded-(none|sm|md|lg|xl|2xl|3xl|full)\\b",
+      "kind": "type",
+      "label": "→ border-radius",
+      "position": "after",
+      "description": "Shows the computed border-radius value. E.g. rounded-lg → 0.5rem / 8px."
+    }
+  ],
+  "typeInferenceRules": {}
+}

package/data/inlineCompletions/css.json

@@ -0,0 +1,125 @@
+{
+  "language": "css",
+  "inlineCompletions": [
+    {
+      "triggerPattern": "display:\\s*",
+      "insertText": "flex;\njustify-content: ${1:center};\nalign-items: ${2:center};",
+      "description": "Flexbox layout with justify-content and align-items. Most common pattern for centering elements.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "display:\\s*g",
+      "insertText": "grid;\ngrid-template-columns: repeat(${1:auto-fill}, minmax(${2:250px}, 1fr));\ngap: ${3:1rem};",
+      "description": "Responsive CSS Grid layout with auto-fill and minmax for fluid column sizing.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "@media\\s*\\(",
+      "insertText": "max-width: ${1:768px}) {\n\t$0\n}",
+      "description": "Desktop-first media query breakpoint. Applies styles at or below the specified width.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "@media\\s*\\(min",
+      "insertText": "min-width: ${1:768px}) {\n\t$0\n}",
+      "description": "Mobile-first media query breakpoint. Applies styles at or above the specified width.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "@media\\s*\\(prefers-color",
+      "insertText": "prefers-color-scheme: dark) {\n\t:root {\n\t\t--bg: ${1:#121212};\n\t\t--text: ${2:#e0e0e0};\n\t}\n}",
+      "description": "Prefers-color-scheme dark mode media query with CSS custom property overrides.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "animation:\\s*",
+      "insertText": "${1:name} ${2:0.3s} ${3:ease-in-out} ${4:forwards};",
+      "description": "Animation shorthand with name, duration, timing function, and fill mode.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "transition:\\s*",
+      "insertText": "${1:all} ${2:0.3s} ${3:ease};",
+      "description": "Transition shorthand with property, duration, and timing function.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "background:\\s*linear",
+      "insertText": "linear-gradient(${1|to right,to bottom,135deg,to bottom right|}, ${2:#667eea}, ${3:#764ba2});",
+      "description": "Linear gradient background with direction and color stops.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "position:\\s*a",
+      "insertText": "absolute;\ntop: ${1:50%};\nleft: ${2:50%};\ntransform: translate(-50%, -50%);",
+      "description": "Absolute centering pattern using position absolute with transform.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "position:\\s*s(?=t)",
+      "insertText": "sticky;\ntop: ${1:0};",
+      "description": "Sticky positioning with top offset. Element sticks to position during scroll.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "@keyframes\\s+",
+      "insertText": "${1:animationName} {\n\tfrom {\n\t\t${2:opacity: 0;}\n\t\t${3:transform: translateY(10px);}\n\t}\n\tto {\n\t\t${4:opacity: 1;}\n\t\t${5:transform: translateY(0);}\n\t}\n}",
+      "description": "Keyframes animation definition with from/to states for fade and slide effect.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "@font-face\\s*\\{",
+      "insertText": "\n\tfont-family: '${1:FontName}';\n\tsrc: url('${2:fonts/${1}.woff2}') format('woff2'),\n\t     url('${3:fonts/${1}.woff}') format('woff');\n\tfont-weight: ${4:400};\n\tfont-style: ${5:normal};\n\tfont-display: ${6:swap};\n",
+      "description": "Font-face declaration with woff2/woff sources and font-display swap for performance.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "grid-template-areas:\\s*",
+      "insertText": "\"${1:header} ${1:header} ${1:header}\"\n\t\"${2:sidebar} ${3:main} ${3:main}\"\n\t\"${4:footer} ${4:footer} ${4:footer}\";",
+      "description": "Grid template areas with a common header/sidebar/main/footer layout.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "border-radius:\\s*",
+      "insertText": "${1|4px,8px,12px,50%,9999px|};",
+      "description": "Border radius with common presets: subtle rounding, moderate rounding, circle, and pill shape.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "box-shadow:\\s*",
+      "insertText": "${1:0} ${2:2px} ${3:4px} ${4:rgba(0, 0, 0, 0.1)};",
+      "description": "Box shadow with x-offset, y-offset, blur radius, and semi-transparent color.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "text-overflow:\\s*",
+      "insertText": "ellipsis;\nwhite-space: nowrap;\noverflow: hidden;",
+      "description": "Text truncation pattern with ellipsis, preventing text wrap and hiding overflow.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "@layer\\s+",
+      "insertText": "${1:base}, ${2:components}, ${3:utilities};",
+      "description": "Cascade layer ordering declaration. Layers listed first have lowest priority.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "@container\\s*\\(",
+      "insertText": "min-width: ${1:400px}) {\n\t$0\n}",
+      "description": "Container query for component-level responsive design based on container size.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "scroll-snap-type:\\s*",
+      "insertText": "${1|x,y,both|} ${2|mandatory,proximity|};",
+      "description": "Scroll snap type for axis and strictness. Creates carousel-like scroll behavior.",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "aspect-ratio:\\s*",
+      "insertText": "${1|16 / 9,4 / 3,1 / 1,3 / 2,21 / 9|};",
+      "description": "Aspect ratio with common presets: widescreen, standard, square, photo, ultrawide.",
+      "completeBracketPairs": true
+    }
+  ]
+}

package/data/inlineCompletions/javascript.json

@@ -12,6 +12,18 @@
       "insertText": "const ${1:name} = (${2:params}) => {\n\t$0\n};",
       "description": "Arrow function",
       "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "^\\\\s*rfc\\\\s*$",
+      "insertText": "function ${1:Component}() {\n\treturn (\n\t\t<div className=\"${2}\">${3}</div>\n\t);\n}\n\nexport default ${1:Component};",
+      "description": "React function component (JSX)",
+      "completeBracketPairs": true
+    },
+    {
+      "triggerPattern": "^\\\\s*useState\\\\s*$",
+      "insertText": "const [${1:state}, set${2:State}] = useState(${3:initial});",
+      "description": "React useState hook",
+      "completeBracketPairs": true
     }
   ]
 }