@fragments-sdk/webmcp 0.2.0 → 1.0.0

package/dist/fragments/index.d.ts

@@ -0,0 +1,88 @@
+import { CompiledFragmentsFile } from '@fragments-sdk/context/types';
+import { WebMCPTool } from '@webmcp-sdk/core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ReactNode } from 'react';
+
+interface CreateFragmentsWebMCPToolsOptions {
+    /** Tool name prefix. Default: 'fragments'. */
+    prefix?: string;
+    /** Subset of tools to register. If omitted, all tools are registered. */
+    tools?: Array<'discover' | 'inspect' | 'blocks' | 'tokens' | 'implement' | 'graph'>;
+}
+/**
+ * Build WebMCPTool[] from compiled fragments data.
+ *
+ * Reuses `buildMcpTools()` from @fragments-sdk/context for schema conversion
+ * (single source of truth — no schema drift). Execute handlers search/filter
+ * CompiledFragmentsFile data in-browser.
+ */
+declare function createFragmentsWebMCPTools(data: CompiledFragmentsFile, options?: CreateFragmentsWebMCPToolsOptions): WebMCPTool[];
+
+interface SearchIndex {
+    /** component name → lowercased searchable string (name + description + tags + category) */
+    components: Map<string, string>;
+    /** block name → lowercased searchable string */
+    blocks: Map<string, string>;
+}
+declare function buildSearchIndex(data: CompiledFragmentsFile): SearchIndex;
+type FragmentHandler = (data: CompiledFragmentsFile, args: Record<string, unknown>, index: SearchIndex) => unknown;
+declare const HANDLERS: Record<string, FragmentHandler>;
+
+interface UseFragmentToolsOptions extends CreateFragmentsWebMCPToolsOptions {
+    /** Disable registration. Default: true. */
+    enabled?: boolean;
+}
+/**
+ * Auto-register all Fragments design system tools via WebMCP.
+ *
+ * Internally creates tools with `createFragmentsWebMCPTools()` and registers
+ * them using `useWebMCPTools()`. Memoized by data reference + prefix.
+ */
+declare function useFragmentTools(data: CompiledFragmentsFile | null, options?: UseFragmentToolsOptions): {
+    tools: WebMCPTool[];
+    count: number;
+};
+
+interface UseCompiledFragmentsFromUrlResult {
+    data: CompiledFragmentsFile | null;
+    loading: boolean;
+    error: string | null;
+}
+/**
+ * Fetch compiled fragments data from a URL.
+ * Useful for user apps that want to integrate WebMCP tools.
+ */
+declare function useCompiledFragmentsFromUrl(url: string): UseCompiledFragmentsFromUrlResult;
+
+interface FragmentsWebMCPBaseProps {
+    /** Tool name prefix. Default: 'fragments'. */
+    prefix?: string;
+    /** Subset of tools to register. */
+    tools?: Array<'discover' | 'inspect' | 'blocks' | 'tokens' | 'implement' | 'graph'>;
+    children: ReactNode;
+}
+interface FragmentsWebMCPDataProps extends FragmentsWebMCPBaseProps {
+    /** Pre-loaded compiled fragments data. */
+    data: CompiledFragmentsFile;
+    url?: never;
+}
+interface FragmentsWebMCPUrlProps extends FragmentsWebMCPBaseProps {
+    /** URL to fetch compiled fragments data from. */
+    url: string;
+    data?: never;
+}
+type FragmentsWebMCPProps = FragmentsWebMCPDataProps | FragmentsWebMCPUrlProps;
+/**
+ * Batteries-included WebMCP integration for Fragments design system.
+ *
+ * Makes any app AI-native in 3 lines:
+ * ```tsx
+ * import compiledData from './fragments.compiled.json';
+ * import { FragmentsWebMCP } from '@fragments-sdk/webmcp/fragments';
+ *
+ * <FragmentsWebMCP data={compiledData}><App /></FragmentsWebMCP>
+ * ```
+ */
+declare function FragmentsWebMCP(props: FragmentsWebMCPProps): react_jsx_runtime.JSX.Element;
+
+export { type CreateFragmentsWebMCPToolsOptions, type FragmentHandler, FragmentsWebMCP, type FragmentsWebMCPProps, HANDLERS, type SearchIndex, type UseFragmentToolsOptions, buildSearchIndex, createFragmentsWebMCPTools, useCompiledFragmentsFromUrl, useFragmentTools };

package/dist/fragments/index.js

@@ -0,0 +1,579 @@
+// src/fragments/create-tools.ts
+import {
+  buildMcpTools,
+  buildToolNames
+} from "@fragments-sdk/context/mcp-tools";
+
+// src/fragments/handlers.ts
+import { ComponentGraphEngine, deserializeGraph } from "@fragments-sdk/context/graph";
+function buildSearchIndex(data) {
+  const components = /* @__PURE__ */ new Map();
+  for (const [key, frag] of Object.entries(data.fragments)) {
+    const searchable = [
+      frag.meta.name,
+      frag.meta.description,
+      frag.meta.category,
+      ...frag.meta.tags ?? []
+    ].join(" ").toLowerCase();
+    components.set(key, searchable);
+  }
+  const blocks = /* @__PURE__ */ new Map();
+  if (data.blocks) {
+    for (const [key, block] of Object.entries(data.blocks)) {
+      const searchable = [
+        block.name,
+        block.description,
+        block.category,
+        ...block.tags ?? [],
+        ...block.components
+      ].join(" ").toLowerCase();
+      blocks.set(key, searchable);
+    }
+  }
+  return { components, blocks };
+}
+function clampLimit(value, defaultVal, max = 50) {
+  if (typeof value !== "number") return defaultVal;
+  return Math.max(1, Math.min(max, Math.floor(value)));
+}
+function truncStr(value, maxLen = 200) {
+  if (typeof value !== "string") return "";
+  return value.slice(0, maxLen);
+}
+function validateEnum(value, allowed) {
+  if (typeof value !== "string") return void 0;
+  return allowed.includes(value) ? value : void 0;
+}
+function handleDiscover(data, args, index) {
+  const limit = clampLimit(args.limit, 10);
+  const search = truncStr(args.search);
+  const category = truncStr(args.category);
+  const status = validateEnum(args.status, [
+    "stable",
+    "beta",
+    "deprecated",
+    "experimental"
+  ]);
+  const component = truncStr(args.component);
+  const compact = args.compact === true;
+  const verbosity = validateEnum(args.verbosity, [
+    "compact",
+    "standard",
+    "full"
+  ]);
+  let results = Object.values(data.fragments);
+  if (category) {
+    const lower = category.toLowerCase();
+    results = results.filter(
+      (f) => f.meta.category.toLowerCase() === lower
+    );
+  }
+  if (status) {
+    results = results.filter((f) => f.meta.status === status);
+  }
+  if (component) {
+    const lower = component.toLowerCase();
+    const target = results.find(
+      (f) => f.meta.name.toLowerCase() === lower
+    );
+    if (target) {
+      results = results.filter(
+        (f) => f.meta.category === target.meta.category && f.meta.name !== target.meta.name
+      );
+    }
+  }
+  if (search) {
+    const lower = search.toLowerCase();
+    results = results.filter((f) => {
+      const searchable = index.components.get(f.meta.name) ?? "";
+      return searchable.includes(lower);
+    });
+  }
+  results = results.slice(0, limit);
+  if (compact || verbosity === "compact") {
+    return {
+      components: results.map((f) => ({
+        name: f.meta.name,
+        category: f.meta.category
+      })),
+      count: results.length
+    };
+  }
+  if (verbosity === "full") {
+    return { components: results, count: results.length };
+  }
+  return {
+    components: results.map((f) => ({
+      name: f.meta.name,
+      description: f.meta.description,
+      category: f.meta.category,
+      tags: f.meta.tags,
+      status: f.meta.status,
+      usage: f.usage
+    })),
+    count: results.length
+  };
+}
+function handleInspect(data, args, _index) {
+  const componentName = truncStr(args.component);
+  if (!componentName) {
+    return { error: true, message: "component parameter is required" };
+  }
+  const lower = componentName.toLowerCase();
+  const fragment = Object.values(data.fragments).find(
+    (f) => f.meta.name.toLowerCase() === lower
+  );
+  if (!fragment) {
+    return { error: true, message: `Component "${componentName}" not found` };
+  }
+  const fields = Array.isArray(args.fields) ? args.fields.map((f) => truncStr(f)) : null;
+  if (!fields) {
+    const variant = truncStr(args.variant);
+    if (variant) {
+      const lower2 = variant.toLowerCase();
+      return {
+        ...fragment,
+        variants: fragment.variants.filter(
+          (v) => v.name.toLowerCase() === lower2
+        )
+      };
+    }
+    return fragment;
+  }
+  const result = {};
+  for (const field of fields) {
+    const normalized = field === "usage" ? "usage" : field;
+    const parts = normalized.split(".");
+    let value = fragment;
+    for (const part of parts) {
+      if (value && typeof value === "object") {
+        value = value[part];
+      } else {
+        value = void 0;
+        break;
+      }
+    }
+    if (value !== void 0) {
+      result[field] = value;
+    }
+  }
+  return result;
+}
+function handleBlocks(data, args, index) {
+  if (!data.blocks) {
+    return { blocks: [], count: 0 };
+  }
+  const limit = clampLimit(args.limit, 50);
+  const search = truncStr(args.search);
+  const category = truncStr(args.category);
+  const component = truncStr(args.component);
+  const name = truncStr(args.name);
+  const verbosity = validateEnum(args.verbosity, [
+    "compact",
+    "standard",
+    "full"
+  ]);
+  let results = Object.values(data.blocks);
+  if (name) {
+    const lower = name.toLowerCase();
+    results = results.filter((b) => b.name.toLowerCase() === lower);
+    return { blocks: results, count: results.length };
+  }
+  if (category) {
+    const lower = category.toLowerCase();
+    results = results.filter((b) => b.category.toLowerCase() === lower);
+  }
+  if (component) {
+    const lower = component.toLowerCase();
+    results = results.filter(
+      (b) => b.components.some((c) => c.toLowerCase() === lower)
+    );
+  }
+  if (search) {
+    const lower = search.toLowerCase();
+    results = results.filter((b) => {
+      const searchable = index.blocks.get(b.name) ?? "";
+      return searchable.includes(lower);
+    });
+  }
+  results = results.slice(0, limit);
+  if (verbosity === "compact") {
+    return {
+      blocks: results.map((b) => ({
+        name: b.name,
+        description: b.description,
+        category: b.category,
+        components: b.components
+      })),
+      count: results.length
+    };
+  }
+  return { blocks: results, count: results.length };
+}
+function handleTokens(data, args, _index) {
+  if (!data.tokens) {
+    return { tokens: [], category: void 0 };
+  }
+  const limit = clampLimit(args.limit, 25);
+  const category = truncStr(args.category);
+  const search = truncStr(args.search);
+  if (category) {
+    const lower = category.toLowerCase();
+    const matchingCategory = Object.keys(data.tokens.categories).find(
+      (c) => c.toLowerCase() === lower
+    );
+    if (!matchingCategory) {
+      return { tokens: [], category };
+    }
+    let tokens = data.tokens.categories[matchingCategory];
+    if (search) {
+      const searchLower = search.toLowerCase();
+      tokens = tokens.filter((t) => t.name.toLowerCase().includes(searchLower));
+    }
+    return {
+      tokens: tokens.slice(0, limit),
+      category: matchingCategory
+    };
+  }
+  if (search) {
+    const lower = search.toLowerCase();
+    const tokens = [];
+    for (const entries of Object.values(data.tokens.categories)) {
+      for (const token of entries) {
+        if (token.name.toLowerCase().includes(lower)) {
+          tokens.push(token);
+          if (tokens.length >= limit) break;
+        }
+      }
+      if (tokens.length >= limit) break;
+    }
+    return { tokens };
+  }
+  const summary = {};
+  for (const [cat, entries] of Object.entries(data.tokens.categories)) {
+    summary[cat] = entries.length;
+  }
+  return { prefix: data.tokens.prefix, total: data.tokens.total, categories: summary };
+}
+function handleImplement(data, args, index) {
+  const useCase = truncStr(args.useCase);
+  const limit = clampLimit(args.limit, 5);
+  const verbosity = validateEnum(args.verbosity, [
+    "compact",
+    "standard",
+    "full"
+  ]);
+  if (!useCase) {
+    return { error: true, message: "useCase parameter is required" };
+  }
+  const discoverResult = handleDiscover(
+    data,
+    { search: useCase, limit, verbosity: "full" },
+    index
+  );
+  const components = discoverResult.count > 0 ? discoverResult.components : Object.values(data.fragments).slice(0, limit);
+  const componentNames = new Set(components.map((c) => c.meta.name));
+  let relevantBlocks = [];
+  if (data.blocks) {
+    relevantBlocks = Object.values(data.blocks).filter(
+      (b) => b.components.some((c) => componentNames.has(c))
+    );
+  }
+  if (relevantBlocks.length === 0 && data.blocks) {
+    const blocksResult = handleBlocks(
+      data,
+      { search: useCase, limit: 3 },
+      index
+    );
+    relevantBlocks = blocksResult.blocks;
+  }
+  let relevantTokens = [];
+  if (data.tokens) {
+    const words = useCase.toLowerCase().split(/\s+/);
+    for (const word of words) {
+      if (word.length < 3) continue;
+      const result = handleTokens(
+        data,
+        { search: word, limit: 5 },
+        index
+      );
+      if (result.tokens) {
+        relevantTokens.push(...result.tokens);
+      }
+    }
+    const seen = /* @__PURE__ */ new Set();
+    relevantTokens = relevantTokens.filter((t) => {
+      if (seen.has(t.name)) return false;
+      seen.add(t.name);
+      return true;
+    });
+  }
+  if (verbosity === "compact") {
+    return {
+      components: components.map((c) => ({
+        name: c.meta.name,
+        category: c.meta.category
+      })),
+      blocks: relevantBlocks.map((b) => ({
+        name: b.name,
+        category: b.category
+      })),
+      tokens: relevantTokens.map((t) => t.name)
+    };
+  }
+  return {
+    components,
+    blocks: relevantBlocks,
+    tokens: relevantTokens
+  };
+}
+var cachedEngine = null;
+function getEngine(data) {
+  const key = data.generatedAt;
+  if (cachedEngine && cachedEngine.key === key) return cachedEngine.engine;
+  const graph = deserializeGraph(data.graph);
+  const engine = new ComponentGraphEngine(graph, data.blocks);
+  cachedEngine = { engine, key };
+  return engine;
+}
+function handleGraph(data, args, _index) {
+  if (!data.graph) {
+    return { error: true, message: "No graph data available" };
+  }
+  const mode = validateEnum(args.mode, [
+    "dependencies",
+    "dependents",
+    "alternatives",
+    "health",
+    "impact",
+    "path",
+    "composition",
+    "islands"
+  ]);
+  if (!mode) {
+    return { error: true, message: "mode parameter is required" };
+  }
+  const component = truncStr(args.component);
+  const graph = data.graph;
+  switch (mode) {
+    case "health": {
+      const engine = getEngine(data);
+      return engine.getHealth();
+    }
+    case "dependencies": {
+      if (!component) {
+        return { error: true, message: "component parameter is required for dependencies mode" };
+      }
+      const edges = graph.edges.filter(
+        (e) => e.s.toLowerCase() === component.toLowerCase()
+      );
+      return {
+        component,
+        dependencies: edges.map((e) => ({
+          target: e.t,
+          type: e.ty
+        }))
+      };
+    }
+    case "dependents": {
+      if (!component) {
+        return { error: true, message: "component parameter is required for dependents mode" };
+      }
+      const edges = graph.edges.filter(
+        (e) => e.t.toLowerCase() === component.toLowerCase()
+      );
+      return {
+        component,
+        dependents: edges.map((e) => ({
+          source: e.s,
+          type: e.ty
+        }))
+      };
+    }
+    case "alternatives": {
+      if (!component) {
+        return { error: true, message: "component parameter is required for alternatives mode" };
+      }
+      const altEdges = graph.edges.filter(
+        (e) => e.ty === "alternative-to" && (e.s.toLowerCase() === component.toLowerCase() || e.t.toLowerCase() === component.toLowerCase())
+      );
+      const alternatives = altEdges.map(
+        (e) => e.s.toLowerCase() === component.toLowerCase() ? e.t : e.s
+      );
+      return { component, alternatives };
+    }
+    case "impact": {
+      if (!component) {
+        return { error: true, message: "component parameter is required for impact mode" };
+      }
+      const engine = getEngine(data);
+      const maxDepth = typeof args.maxDepth === "number" ? Math.min(args.maxDepth, 10) : 3;
+      return engine.impact(component, maxDepth);
+    }
+    case "path": {
+      if (!component) {
+        return { error: true, message: "component parameter is required for path mode" };
+      }
+      const target = truncStr(args.target);
+      if (!target) {
+        return { error: true, message: "target parameter is required for path mode" };
+      }
+      const engine = getEngine(data);
+      return engine.path(component, target);
+    }
+    case "composition": {
+      if (!component) {
+        return { error: true, message: "component parameter is required for composition mode" };
+      }
+      const engine = getEngine(data);
+      return engine.composition(component);
+    }
+    case "islands": {
+      const engine = getEngine(data);
+      return { islands: engine.islands() };
+    }
+    default:
+      return { error: true, message: `Unknown mode: ${mode}` };
+  }
+}
+var HANDLERS = {
+  discover: handleDiscover,
+  inspect: handleInspect,
+  blocks: handleBlocks,
+  tokens: handleTokens,
+  implement: handleImplement,
+  graph: handleGraph
+};
+
+// src/fragments/create-tools.ts
+var WEBMCP_TOOL_KEYS = [
+  "discover",
+  "inspect",
+  "blocks",
+  "tokens",
+  "implement",
+  "graph"
+];
+function createFragmentsWebMCPTools(data, options) {
+  const prefix = options?.prefix ?? "fragments";
+  const toolNames = buildToolNames(prefix);
+  const mcpSchemas = buildMcpTools(prefix);
+  const searchIndex = buildSearchIndex(data);
+  const enabledKeys = options?.tools ? WEBMCP_TOOL_KEYS.filter((key) => options.tools.includes(key)) : WEBMCP_TOOL_KEYS;
+  return enabledKeys.filter((key) => key !== "graph" || data.graph != null).map((key) => {
+    const schema = mcpSchemas.find((s) => s.name === toolNames[key]);
+    const handler = HANDLERS[key];
+    return {
+      name: schema.name,
+      description: schema.description,
+      inputSchema: schema.inputSchema,
+      annotations: { readOnlyHint: true },
+      execute: async (input, _client) => {
+        try {
+          return handler(data, input, searchIndex);
+        } catch (err) {
+          return {
+            error: true,
+            message: err instanceof Error ? err.message : String(err)
+          };
+        }
+      }
+    };
+  });
+}
+
+// src/fragments/use-fragment-tools.ts
+import { useMemo } from "react";
+import { useWebMCPTools } from "@webmcp-sdk/react";
+function useFragmentTools(data, options) {
+  const prefix = options?.prefix ?? "fragments";
+  const enabled = options?.enabled ?? true;
+  const toolsFilter = options?.tools;
+  const toolsKey = toolsFilter ? JSON.stringify(toolsFilter) : "";
+  const tools = useMemo(() => {
+    if (!data) return [];
+    return createFragmentsWebMCPTools(data, { prefix, tools: toolsFilter });
+  }, [data, prefix, toolsKey]);
+  useWebMCPTools(tools, { enabled });
+  return { tools, count: tools.length };
+}
+
+// src/fragments/use-compiled.ts
+import { useState, useEffect } from "react";
+function useCompiledFragmentsFromUrl(url) {
+  const [data, setData] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    setLoading(true);
+    setError(null);
+    fetch(url).then((res) => {
+      if (!res.ok) throw new Error(`HTTP ${res.status}`);
+      return res.json();
+    }).then((json) => {
+      if (!cancelled) {
+        setData(json);
+        setLoading(false);
+      }
+    }).catch((err) => {
+      if (!cancelled) {
+        setError(err instanceof Error ? err.message : String(err));
+        setLoading(false);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [url]);
+  return { data, loading, error };
+}
+
+// src/fragments/FragmentsWebMCP.tsx
+import { WebMCPProvider } from "@webmcp-sdk/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function FragmentsToolsRegistrar({
+  data,
+  prefix,
+  tools
+}) {
+  useFragmentTools(data, { prefix, tools });
+  return null;
+}
+function FragmentsWebMCPWithUrl({
+  url,
+  prefix,
+  tools,
+  children
+}) {
+  const { data } = useCompiledFragmentsFromUrl(url);
+  return /* @__PURE__ */ jsxs(WebMCPProvider, { devShim: true, children: [
+    /* @__PURE__ */ jsx(FragmentsToolsRegistrar, { data, prefix, tools }),
+    children
+  ] });
+}
+function FragmentsWebMCPWithData({
+  data,
+  prefix,
+  tools,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(WebMCPProvider, { devShim: true, children: [
+    /* @__PURE__ */ jsx(FragmentsToolsRegistrar, { data, prefix, tools }),
+    children
+  ] });
+}
+function FragmentsWebMCP(props) {
+  if ("url" in props && props.url) {
+    return /* @__PURE__ */ jsx(FragmentsWebMCPWithUrl, { ...props });
+  }
+  return /* @__PURE__ */ jsx(FragmentsWebMCPWithData, { ...props });
+}
+export {
+  FragmentsWebMCP,
+  HANDLERS,
+  buildSearchIndex,
+  createFragmentsWebMCPTools,
+  useCompiledFragmentsFromUrl,
+  useFragmentTools
+};

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { DefineToolConfig, InferInput, InputSchema, JSONSchemaInput, ModelContextAPI, ModelContextClient, PropertyDef, SPEC_URL, SPEC_VERSION, ShimRegistry, ToolAnnotations, ToolCallEvent, ToolExecuteCallback, WebMCPTool, defineTool, getExperimentalModelContext, getModelContext, installWebMCPShim, isShimInstalled, isWebMCPSupported, requireModelContext, uninstallWebMCPShim } from '@webmcp-sdk/core';
+import '@webmcp-sdk/react';

package/dist/index.js

@@ -0,0 +1,25 @@
+// src/index.ts
+import {
+  SPEC_VERSION,
+  SPEC_URL,
+  isWebMCPSupported,
+  getModelContext,
+  getExperimentalModelContext,
+  requireModelContext,
+  installWebMCPShim,
+  uninstallWebMCPShim,
+  isShimInstalled,
+  defineTool
+} from "@webmcp-sdk/core";
+export {
+  SPEC_URL,
+  SPEC_VERSION,
+  defineTool,
+  getExperimentalModelContext,
+  getModelContext,
+  installWebMCPShim,
+  isShimInstalled,
+  isWebMCPSupported,
+  requireModelContext,
+  uninstallWebMCPShim
+};

package/dist/react/index.d.ts

@@ -0,0 +1 @@
+export { UseWebMCPToolOptions, UseWebMCPToolsOptions, WebMCPContextValue, WebMCPProvider, WebMCPProviderProps, useWebMCPContext, useWebMCPStatus, useWebMCPTool, useWebMCPTools } from '@webmcp-sdk/react';

package/dist/react/index.js

@@ -0,0 +1,15 @@
+// src/react/index.ts
+import {
+  WebMCPProvider,
+  useWebMCPContext,
+  useWebMCPTool,
+  useWebMCPTools,
+  useWebMCPStatus
+} from "@webmcp-sdk/react";
+export {
+  WebMCPProvider,
+  useWebMCPContext,
+  useWebMCPStatus,
+  useWebMCPTool,
+  useWebMCPTools
+};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@fragments-sdk/webmcp",
-  "version": "0.2.0",
+  "version": "1.0.0",
   "license": "FSL-1.1-MIT",
-  "description": "WebMCP (W3C) React integration for exposing design system tools to AI agents via navigator.modelContext",
+  "description": "Fragments design system WebMCP integration — exposes component intelligence to AI agents via @webmcp-sdk",
   "author": "Conan McNicholl",
   "homepage": "https://usefragments.com",
   "repository": {
@@ -39,36 +39,29 @@
   "files": [
     "dist"
   ],
+  "dependencies": {
+    "@webmcp-sdk/core": "^0.1.0",
+    "@webmcp-sdk/react": "^0.1.0"
+  },
   "peerDependencies": {
     "react": ">=18",
-    "@fragments-sdk/context": ">=0.3.0"
-  },
-  "peerDependenciesMeta": {
-    "react": {
-      "optional": true
-    },
-    "@fragments-sdk/context": {
-      "optional": true
-    }
+    "@fragments-sdk/context": ">=0.4.0"
   },
   "devDependencies": {
     "@testing-library/react": "^14.0.0",
     "@types/react": "^18.3.0",
     "react": "^18.3.0",
     "react-dom": "^18.3.0",
-    "tsx": "^4.21.0",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2",
     "vitest": "^2.1.8",
-    "@fragments-sdk/context": "0.3.5"
+    "@fragments-sdk/context": "0.4.0"
   },
   "scripts": {
     "build": "tsup",
     "dev": "tsup --watch",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
-    "clean": "rm -rf dist",
-    "spec:check": "tsx scripts/check-spec-drift.ts",
-    "spec:update": "tsx scripts/check-spec-drift.ts --update"
+    "clean": "rm -rf dist"
   }
 }