mozaic-mcp-server 2.1.0 → 2.2.0

package/dist/tools/get-component-info.js

@@ -62,6 +62,10 @@ function generateBasicExample(componentName, framework) {
             return `<${tag}>Content</${tag}>`;
         case "react":
             return `<${tag}>Content</${tag}>`;
+        case "webcomponents": {
+            const tagName = componentName.replace(/^M/, "").toLowerCase();
+            return `<mozaic-${tagName}>Content</mozaic-${tagName}>`;
+        }
         case "html": {
             const cssClass = `mc-${componentName.replace(/^M/, "").toLowerCase()}`;
             return `<div class="${cssClass}">Content</div>`;
@@ -83,7 +87,7 @@ export const getComponentInfoTool = {
             },
             framework: {
                 type: "string",
-                enum: ["vue", "react", "html"],
+                enum: ["vue", "react", "html", "webcomponents"],
                 default: "vue",
                 description: "Framework for code examples",
             },

package/dist/tools/get-component-info.js.map

@@ -1 +1 @@
-{"version":3,"file":"get-component-info.js","sourceRoot":"","sources":["../../src/tools/get-component-info.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"get-component-info.js","sourceRoot":"","sources":["../../src/tools/get-component-info.ts"],"names":[],"mappings":"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"}

package/dist/tools/get-webcomponent-info.d.ts

@@ -0,0 +1,52 @@
+import type Database from "better-sqlite3";
+export interface GetWebComponentInfoInput {
+    component: string;
+}
+export interface WebComponentInfoOutput {
+    name: string;
+    tagName: string;
+    description?: string;
+    attributes: Array<{
+        name: string;
+        type?: string;
+        default?: string;
+        required: boolean;
+        options?: string[];
+        description?: string;
+    }>;
+    slots: Array<{
+        name: string;
+        description?: string;
+    }>;
+    events: Array<{
+        name: string;
+        payload?: string;
+        description?: string;
+    }>;
+    cssProperties: string[];
+    examples: Array<{
+        title?: string;
+        code: string;
+    }>;
+}
+export declare function handleGetWebComponentInfo(db: Database.Database, input: GetWebComponentInfoInput): {
+    content: Array<{
+        type: "text";
+        text: string;
+    }>;
+};
+export declare const getWebComponentInfoTool: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            component: {
+                type: string;
+                description: string;
+            };
+        };
+        required: string[];
+    };
+};
+//# sourceMappingURL=get-webcomponent-info.d.ts.map

package/dist/tools/get-webcomponent-info.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-webcomponent-info.d.ts","sourceRoot":"","sources":["../../src/tools/get-webcomponent-info.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAG3C,MAAM,WAAW,wBAAwB;IACvC,SAAS,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,EAAE,KAAK,CAAC;QAChB,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,OAAO,CAAC;QAClB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC,CAAC;IACH,KAAK,EAAE,KAAK,CAAC;QACX,IAAI,EAAE,MAAM,CAAC;QACb,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC,CAAC;IACH,MAAM,EAAE,KAAK,CAAC;QACZ,IAAI,EAAE,MAAM,CAAC;QACb,OAAO,CAAC,EAAE,MAAM,CAAC;QACjB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC,CAAC;IACH,aAAa,EAAE,MAAM,EAAE,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC;QACd,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;KACd,CAAC,CAAC;CACJ;AAED,wBAAgB,yBAAyB,CACvC,EAAE,EAAE,QAAQ,CAAC,QAAQ,EACrB,KAAK,EAAE,wBAAwB,GAC9B;IAAE,OAAO,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAAE,CA8JpD;AAQD,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;CAenC,CAAC"}

package/dist/tools/get-webcomponent-info.js

@@ -0,0 +1,170 @@
+import { getComponentBySlug } from "../db/queries.js";
+export function handleGetWebComponentInfo(db, input) {
+    const { component } = input;
+    // Normalize component name to slug (kebab-case)
+    const slug = component.toLowerCase().replace(/^mozaic-/, "");
+    const componentData = getComponentBySlug(db, slug);
+    if (!componentData) {
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: `Web Component not found: ${component}. Try using the list_webcomponents tool to see available components.`,
+                },
+            ],
+        };
+    }
+    // Check if component supports webcomponents framework
+    const frameworks = componentData.frameworks || [];
+    if (!frameworks.includes("webcomponents")) {
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: `Component "${component}" is not available as a web component. Available frameworks: ${frameworks.join(", ")}`,
+                },
+            ],
+        };
+    }
+    // Filter examples for webcomponents
+    const filteredExamples = (componentData.examples || [])
+        .filter((ex) => ex.framework === "webcomponents")
+        .map((ex) => ({
+        title: ex.title,
+        code: ex.code,
+    }));
+    // Build output
+    const output = {
+        name: componentData.name,
+        tagName: componentData.slug,
+        description: componentData.description,
+        attributes: (componentData.props || []).map((p) => ({
+            name: p.name,
+            type: p.type,
+            default: p.defaultValue,
+            required: p.required || false,
+            options: p.options,
+            description: p.description,
+        })),
+        slots: (componentData.slots || []).map((s) => ({
+            name: s.name,
+            description: s.description,
+        })),
+        events: (componentData.events || []).map((e) => ({
+            name: e.name,
+            payload: e.payload,
+            description: e.description,
+        })),
+        cssProperties: componentData.cssClasses || [],
+        examples: filteredExamples,
+    };
+    // Add basic example if none found
+    if (output.examples.length === 0) {
+        const basicExample = generateBasicWebComponentExample(output.tagName);
+        output.examples.push({ title: "Basic Usage", code: basicExample });
+    }
+    // Add formatted output with helpful information
+    let text = `# ${output.name} (${output.tagName})\n\n`;
+    if (output.description) {
+        text += `${output.description}\n\n`;
+    }
+    // Attributes section
+    if (output.attributes.length > 0) {
+        text += `## Attributes\n\n`;
+        for (const attr of output.attributes) {
+            text += `- **${attr.name}**`;
+            if (attr.type)
+                text += ` (${attr.type})`;
+            if (attr.required)
+                text += ` *required*`;
+            if (attr.default)
+                text += ` - default: \`${attr.default}\``;
+            if (attr.description)
+                text += `\n  ${attr.description}`;
+            if (attr.options && attr.options.length > 0) {
+                text += `\n  Options: ${attr.options.map((o) => `\`${o}\``).join(", ")}`;
+            }
+            text += `\n`;
+        }
+        text += `\n`;
+    }
+    // Slots section
+    if (output.slots.length > 0) {
+        text += `## Slots\n\n`;
+        for (const slot of output.slots) {
+            text += `- **${slot.name}**`;
+            if (slot.description)
+                text += ` - ${slot.description}`;
+            text += `\n`;
+        }
+        text += `\n`;
+    }
+    // Events section
+    if (output.events.length > 0) {
+        text += `## Events\n\n`;
+        for (const event of output.events) {
+            text += `- **${event.name}**`;
+            if (event.payload)
+                text += ` (payload: ${event.payload})`;
+            if (event.description)
+                text += `\n  ${event.description}`;
+            text += `\n`;
+        }
+        text += `\n`;
+    }
+    // CSS Properties section
+    if (output.cssProperties.length > 0) {
+        text += `## CSS Custom Properties\n\n`;
+        for (const prop of output.cssProperties) {
+            text += `- \`${prop}\`\n`;
+        }
+        text += `\n`;
+    }
+    // Examples section
+    if (output.examples.length > 0) {
+        text += `## Examples\n\n`;
+        for (const example of output.examples) {
+            if (example.title) {
+                text += `### ${example.title}\n\n`;
+            }
+            text += `\`\`\`html\n${example.code}\n\`\`\`\n\n`;
+        }
+    }
+    // Installation
+    text += `## Installation\n\n`;
+    text += `\`\`\`javascript\n`;
+    text += `import '@adeo/mozaic-web-components/${slug}.js';\n`;
+    text += `\`\`\`\n\n`;
+    // JSON output for programmatic use
+    text += `---\n\n`;
+    text += `**JSON Output:**\n\n`;
+    text += `\`\`\`json\n${JSON.stringify(output, null, 2)}\n\`\`\``;
+    return {
+        content: [
+            {
+                type: "text",
+                text,
+            },
+        ],
+    };
+}
+// Generate a basic example
+function generateBasicWebComponentExample(tagName) {
+    return `<${tagName}>\n  Content\n</${tagName}>`;
+}
+// Tool definition for MCP
+export const getWebComponentInfoTool = {
+    name: "get_webcomponent_info",
+    description: "Get detailed information about a Mozaic Web Component including attributes, slots, events, CSS custom properties, and usage examples.",
+    inputSchema: {
+        type: "object",
+        properties: {
+            component: {
+                type: "string",
+                description: "Web component name (e.g., 'button', 'card', 'mozaic-button'). Will be converted to tag name.",
+            },
+        },
+        required: ["component"],
+    },
+};
+//# sourceMappingURL=get-webcomponent-info.js.map

package/dist/tools/get-webcomponent-info.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-webcomponent-info.js","sourceRoot":"","sources":["../../src/tools/get-webcomponent-info.ts"],"names":[],"mappings":"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"}

package/dist/tools/list-webcomponents.d.ts

@@ -0,0 +1,32 @@
+import type Database from "better-sqlite3";
+export interface ListWebComponentsInput {
+    category?: "form" | "navigation" | "feedback" | "layout" | "data-display" | "action" | "all";
+}
+export interface WebComponentListItem {
+    name: string;
+    tagName: string;
+    category: string;
+    description?: string;
+}
+export declare function handleListWebComponents(db: Database.Database, input: ListWebComponentsInput): {
+    content: Array<{
+        type: "text";
+        text: string;
+    }>;
+};
+export declare const listWebComponentsTool: {
+    name: string;
+    description: string;
+    inputSchema: {
+        type: "object";
+        properties: {
+            category: {
+                type: string;
+                enum: string[];
+                default: string;
+                description: string;
+            };
+        };
+    };
+};
+//# sourceMappingURL=list-webcomponents.d.ts.map

package/dist/tools/list-webcomponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-webcomponents.d.ts","sourceRoot":"","sources":["../../src/tools/list-webcomponents.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,gBAAgB,CAAC;AAE3C,MAAM,WAAW,sBAAsB;IACrC,QAAQ,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,cAAc,GAAG,QAAQ,GAAG,KAAK,CAAC;CAC9F;AAED,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,wBAAgB,uBAAuB,CACrC,EAAE,EAAE,QAAQ,CAAC,QAAQ,EACrB,KAAK,EAAE,sBAAsB,GAC5B;IAAE,OAAO,EAAE,KAAK,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;CAAE,CAgHpD;AAGD,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;CAejC,CAAC"}

package/dist/tools/list-webcomponents.js

@@ -0,0 +1,110 @@
+export function handleListWebComponents(db, input) {
+    const { category = "all" } = input;
+    // Query components with webcomponents framework
+    let query = `
+    SELECT name, slug, category, description, frameworks
+    FROM components
+    WHERE frameworks LIKE '%webcomponents%'
+  `;
+    const params = [];
+    if (category && category !== "all") {
+        query += ` AND category = ?`;
+        params.push(category);
+    }
+    query += ` ORDER BY category, name`;
+    const rows = db.prepare(query).all(...params);
+    if (rows.length === 0) {
+        return {
+            content: [
+                {
+                    type: "text",
+                    text: category === "all"
+                        ? "No web components found in the database."
+                        : `No web components found in category: ${category}`,
+                },
+            ],
+        };
+    }
+    // Group by category for better readability
+    const grouped = {};
+    for (const row of rows) {
+        const cat = row.category || "other";
+        if (!grouped[cat]) {
+            grouped[cat] = [];
+        }
+        grouped[cat].push({
+            name: row.name,
+            tagName: row.slug,
+            category: cat,
+            description: row.description,
+        });
+    }
+    // Format output
+    let text = `# Mozaic Web Components\n\n`;
+    text += `Total: ${rows.length} component${rows.length !== 1 ? "s" : ""}\n\n`;
+    if (category === "all") {
+        text += `## Categories\n\n`;
+        for (const [cat, components] of Object.entries(grouped)) {
+            text += `### ${cat.charAt(0).toUpperCase() + cat.slice(1)} (${components.length})\n\n`;
+            for (const comp of components) {
+                text += `- **${comp.name}** (\`<${comp.tagName}>\`)`;
+                if (comp.description) {
+                    text += `\n  ${comp.description}`;
+                }
+                text += `\n`;
+            }
+            text += `\n`;
+        }
+    }
+    else {
+        text += `## ${category.charAt(0).toUpperCase() + category.slice(1)} Components\n\n`;
+        for (const comp of rows) {
+            text += `- **${comp.name}** (\`<${comp.slug}>\`)`;
+            if (comp.description) {
+                text += `\n  ${comp.description}`;
+            }
+            text += `\n`;
+        }
+    }
+    // JSON output
+    const jsonOutput = {
+        total: rows.length,
+        categories: Object.keys(grouped),
+        components: category === "all"
+            ? grouped
+            : rows.map((r) => ({
+                name: r.name,
+                tagName: r.slug,
+                category: r.category,
+                description: r.description,
+            })),
+    };
+    text += `\n---\n\n`;
+    text += `**JSON Output:**\n\n`;
+    text += `\`\`\`json\n${JSON.stringify(jsonOutput, null, 2)}\n\`\`\``;
+    return {
+        content: [
+            {
+                type: "text",
+                text,
+            },
+        ],
+    };
+}
+// Tool definition for MCP
+export const listWebComponentsTool = {
+    name: "list_webcomponents",
+    description: "List available Mozaic Web Components by category. Returns custom element tag names and descriptions.",
+    inputSchema: {
+        type: "object",
+        properties: {
+            category: {
+                type: "string",
+                enum: ["form", "navigation", "feedback", "layout", "data-display", "action", "all"],
+                default: "all",
+                description: "Filter web components by category",
+            },
+        },
+    },
+};
+//# sourceMappingURL=list-webcomponents.js.map

package/dist/tools/list-webcomponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-webcomponents.js","sourceRoot":"","sources":["../../src/tools/list-webcomponents.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mozaic-mcp-server",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Self-contained Claude Code skills for Mozaic Design System by ADEO",
   "type": "module",
   "main": "dist/index.js",

package/skills/mozaic-webcomponents-builder/scripts/generate-component.sh

@@ -0,0 +1,67 @@
+#!/bin/bash
+# Generate Web Component usage code
+# Usage: ./generate-component.sh <component-slug> [attributes-json] [children]
+
+COMPONENT_SLUG="$1"
+ATTRIBUTES_JSON="${2:-{}}"
+CHILDREN="$3"
+DB_PATH="${MOZAIC_DB_PATH:-${HOME}/.claude/mozaic.db}"
+
+if [ -z "$COMPONENT_SLUG" ]; then
+  echo "Error: Component slug required"
+  echo "Usage: $0 <component-slug> [attributes-json] [children]"
+  echo "Example: $0 button '{\"theme\":\"primary\",\"size\":\"m\"}' 'Click me'"
+  exit 1
+fi
+
+if [ ! -f "$DB_PATH" ]; then
+  echo "Error: Database not found at $DB_PATH"
+  echo "Please run: npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools skills"
+  exit 1
+fi
+
+# Get component info
+COMPONENT_NAME=$(sqlite3 "$DB_PATH" <<EOF
+SELECT name FROM components
+WHERE slug = '$COMPONENT_SLUG'
+  AND frameworks LIKE '%webcomponents%'
+LIMIT 1;
+EOF
+)
+
+if [ -z "$COMPONENT_NAME" ]; then
+  echo "Error: Web Component '$COMPONENT_SLUG' not found"
+  exit 1
+fi
+
+# Generate import statement
+echo "// Import web component"
+echo "import '@adeo/mozaic-web-components/${COMPONENT_SLUG}.js';"
+echo ""
+echo "// Usage in HTML"
+
+# Build attributes string
+ATTRS=""
+if [ "$ATTRIBUTES_JSON" != "{}" ]; then
+  # Parse JSON and build attributes (simplified - in production use jq)
+  ATTRS=$(echo "$ATTRIBUTES_JSON" | sed 's/[{}"]//g' | sed 's/,/ /g' | sed 's/:/=/g')
+fi
+
+# Generate component tag
+TAG_NAME="$COMPONENT_SLUG"
+
+if [ -n "$CHILDREN" ]; then
+  if [ -n "$ATTRS" ]; then
+    echo "<${TAG_NAME} ${ATTRS}>"
+  else
+    echo "<${TAG_NAME}>"
+  fi
+  echo "  ${CHILDREN}"
+  echo "</${TAG_NAME}>"
+else
+  if [ -n "$ATTRS" ]; then
+    echo "<${TAG_NAME} ${ATTRS}></${TAG_NAME}>"
+  else
+    echo "<${TAG_NAME}></${TAG_NAME}>"
+  fi
+fi

package/skills/mozaic-webcomponents-builder/scripts/get-component.sh

@@ -0,0 +1,105 @@
+#!/bin/bash
+# Get detailed information about a Web Component
+# Usage: ./get-component.sh <component-slug>
+
+COMPONENT_SLUG="$1"
+DB_PATH="${MOZAIC_DB_PATH:-${HOME}/.claude/mozaic.db}"
+
+if [ -z "$COMPONENT_SLUG" ]; then
+  echo "Error: Component slug required"
+  echo "Usage: $0 <component-slug>"
+  echo "Example: $0 button"
+  exit 1
+fi
+
+if [ ! -f "$DB_PATH" ]; then
+  echo "Error: Database not found at $DB_PATH"
+  echo "Please run: npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools skills"
+  exit 1
+fi
+
+COMPONENT_INFO=$(sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT * FROM components
+WHERE slug = '$COMPONENT_SLUG'
+  AND frameworks LIKE '%webcomponents%'
+LIMIT 1;
+EOF
+)
+
+if [ -z "$COMPONENT_INFO" ] || [ "$COMPONENT_INFO" = "[]" ]; then
+  echo "Error: Web Component '$COMPONENT_SLUG' not found"
+  exit 1
+fi
+
+PROPS=$(sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT name, type, default_value, required, description
+FROM component_props
+WHERE component_id = (
+  SELECT id FROM components WHERE slug = '$COMPONENT_SLUG' AND frameworks LIKE '%webcomponents%'
+)
+ORDER BY required DESC, name;
+EOF
+)
+PROPS="${PROPS:-[]}"
+
+SLOTS=$(sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT name, description
+FROM component_slots
+WHERE component_id = (
+  SELECT id FROM components WHERE slug = '$COMPONENT_SLUG' AND frameworks LIKE '%webcomponents%'
+)
+ORDER BY name;
+EOF
+)
+SLOTS="${SLOTS:-[]}"
+
+EVENTS=$(sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT name, payload, description
+FROM component_events
+WHERE component_id = (
+  SELECT id FROM components WHERE slug = '$COMPONENT_SLUG' AND frameworks LIKE '%webcomponents%'
+)
+ORDER BY name;
+EOF
+)
+EVENTS="${EVENTS:-[]}"
+
+EXAMPLES=$(sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT title, code, description
+FROM component_examples
+WHERE component_id = (
+  SELECT id FROM components WHERE slug = '$COMPONENT_SLUG' AND frameworks LIKE '%webcomponents%'
+)
+  AND framework = 'webcomponents'
+ORDER BY id;
+EOF
+)
+EXAMPLES="${EXAMPLES:-[]}"
+
+CSS_CLASSES=$(sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT class_name
+FROM component_css_classes
+WHERE component_id = (
+  SELECT id FROM components WHERE slug = '$COMPONENT_SLUG' AND frameworks LIKE '%webcomponents%'
+)
+ORDER BY class_name;
+EOF
+)
+CSS_CLASSES="${CSS_CLASSES:-[]}"
+
+cat <<EOF
+{
+  "component": $COMPONENT_INFO,
+  "attributes": $PROPS,
+  "slots": $SLOTS,
+  "events": $EVENTS,
+  "examples": $EXAMPLES,
+  "cssProperties": $CSS_CLASSES
+}
+EOF

package/skills/mozaic-webcomponents-builder/scripts/list-components.sh

@@ -0,0 +1,42 @@
+#!/bin/bash
+# List Web Components by category
+# Usage: ./list-components.sh [category]
+# Categories: form, navigation, feedback, layout, data-display, action, all (default)
+
+CATEGORY="${1:-all}"
+DB_PATH="${MOZAIC_DB_PATH:-${HOME}/.claude/mozaic.db}"
+
+# Check if database exists
+if [ ! -f "$DB_PATH" ]; then
+  echo "Error: Database not found at $DB_PATH"
+  echo "Please run: npx -p mozaic-mcp-server@latest adeo-mozaic-install-tools skills"
+  exit 1
+fi
+
+# Query components by category
+if [ "$CATEGORY" = "all" ]; then
+  sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  name,
+  slug,
+  category,
+  description
+FROM components
+WHERE frameworks LIKE '%webcomponents%'
+ORDER BY category, name;
+EOF
+else
+  sqlite3 "$DB_PATH" <<EOF
+.mode json
+SELECT
+  name,
+  slug,
+  category,
+  description
+FROM components
+WHERE frameworks LIKE '%webcomponents%'
+  AND category = '$CATEGORY'
+ORDER BY name;
+EOF
+fi