@atlaskit/ads-mcp 0.20.3 → 0.20.4

package/dist/esm/tools/migration-guides/migrations/onboarding-to-spotlight.js

@@ -1,71 +0,0 @@
-var additionalResources = 'Visit https://hello.atlassian.net/wiki/spaces/DST/pages/6069774593 or https://atlassian.design/components/spotlight for more context';
-export var onboardingSingleStep = {
-  id: 'single-step',
-  title: 'Single Step Spotlight Migration',
-  description: 'Use when code ONLY has `Spotlight` from `@atlaskit/onboarding` (no JiraSpotlight)',
-  fromPackage: '@atlaskit/onboarding',
-  toPackage: '@atlaskit/spotlight',
-  examples: [{
-    title: 'Migrate single step spotlight',
-    description: 'Replace SpotlightTarget, and Spotlight with the new compositional @atlaskit/spotlight components',
-    before: "\n// file1.tsx\nimport React, { useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport { Spotlight } from '@atlaskit/onboarding';\n\nconst OnboardingSpotlight = () => {\n  const [isSpotlightActive, setIsSpotlightActive] = useState(true);\n  const start = () => setIsSpotlightActive(true);\n  const end = () => setIsSpotlightActive(false);\n\n  return (\n\t\t{isSpotlightActive && (\n\t\t\t<Spotlight\n\t\t\t\tdialogPlacement='bottom right'\n\t\t\t\tactions={[\n\t\t\t\t\t{\n\t\t\t\t\t\tonClick: end,\n\t\t\t\t\t\ttext: 'Got it',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\theading=\"Feature Heading\"\n\t\t\t\ttarget=\"my-target\"\n\t\t\t>\n\t\t\t\tThis is the spotlight body content describing the feature.\n\t\t\t</Spotlight>\n\t\t)}\n  );\n};\n\n// file2.tsx\nimport React from 'react';\nimport Button from '@atlaskit/button/new';\nimport { Spotlight } from '@atlaskit/onboarding';\n\nconst SomeFeature = () => {\n\n  return (\n\t\t<SpotlightTarget name=\"my-target\">\n\t\t\t<Button>Target Element</Button>\n\t\t</SpotlightTarget>\n  );\n};\n",
-    after: "\n// file2.tsx -- the Spotlight has been co-located to the targeted element.\nimport React, { useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport { Text } from '@atlaskit/primitives/compiled';\nimport {\n  PopoverContent,\n  PopoverProvider,\n  PopoverTarget,\n  SpotlightActions,\n  SpotlightBody,\n  SpotlightCard,\n  SpotlightControls,\n  SpotlightDismissControl,\n  SpotlightFooter,\n  SpotlightHeader,\n  SpotlightHeadline,\n  SpotlightPrimaryAction,\n} from '@atlaskit/spotlight';\n\nconst Spotlight = () => {\n  const [isVisible, setIsVisible] = useState(false);\n  const dismiss = () => setIsVisible(false);\n  const done = () => setIsVisible(false);\n\n  return (\n    <PopoverProvider>\n      <PopoverTarget>\n        <Button onClick={() => setIsVisible(true)}>Target Element</Button>\n      </PopoverTarget>\n      <PopoverContent dismiss={dismiss} placement=\"bottom-start\" isVisible={isVisible}>\n        <SpotlightCard>\n          <SpotlightHeader>\n            <SpotlightHeadline>Feature Heading</SpotlightHeadline>\n            <SpotlightControls>\n              <SpotlightDismissControl />\n            </SpotlightControls>\n          </SpotlightHeader>\n          <SpotlightBody>\n            <Text>This is the spotlight body content describing the feature.</Text>\n          </SpotlightBody>\n          <SpotlightFooter>\n            <SpotlightActions>\n              <SpotlightPrimaryAction onClick={done}>Got it</SpotlightPrimaryAction>\n            </SpotlightActions>\n          </SpotlightFooter>\n        </SpotlightCard>\n      </PopoverContent>\n    </PopoverProvider>\n  );\n};",
-    explanation: "Key changes when migrating a single step spotlight:\n- Do not use this migration guide for JiraSpotlight. Use 'jira-spotlight' instead.\n- PopoverProvider maintains internal Spotlight state. SpotlightManager coordinated multiple @atlaskit/onboarding usages and is no longer needed.\n- Replace SpotlightTarget with PopoverTarget - wraps the element to highlight\n- Replace Spotlight with PopoverContent containing SpotlightCard - controls visibility and positioning\n- The 'heading' prop becomes SpotlightHeadline inside SpotlightHeader\n- The 'actions' array becomes SpotlightActions with SpotlightPrimaryAction (and optionally SpotlightSecondaryAction)\n- The children content moves into SpotlightBody wrapped with Text component\n- Add SpotlightDismissControl inside SpotlightControls for the close button\n- The 'target' and/or 'targetName' prop is replaced with PopoverTarget directly wrapping the target element\n- The 'dialogPlacement' prop becomes 'placement' on PopoverContent. Mapping: \"top right\" \u2192 \"top-start\", \"top center\" \u2192 \"top\", \"top left\" \u2192 \"top-end\", \"right bottom\" \u2192 \"right-start\", \"right middle\" \u2192 \"right-start | right-end\", \"right top\" \u2192 \"right-end\", \"bottom left\" \u2192 \"bottom-end\", \"bottom center\" \u2192 \"bottom\", \"bottom right\" \u2192 \"bottom-start\", \"left top\" \u2192 \"left-end\", \"left middle\" \u2192 \"left-start | left-end\", \"left bottom\" \u2192 \"left-start\"'"
-  }],
-  bestPractices: ['PopoverTarget should wrap exactly one child element that will be highlighted', 'Always include SpotlightDismissControl for accessibility - allows users to dismiss via close button', 'SpotlightPrimaryAction is required and wraps the main CTA button', 'Wrap body text content in the Text component from @atlaskit/primitives/compiled'],
-  additionalResources: additionalResources
-};
-export var onboardingJiraSpotlight = {
-  id: 'jira-spotlight',
-  title: 'JiraSpotlight Migration',
-  description: 'Use when code contains `JiraSpotlight` import from `@atlassian/jira-spotlight`',
-  fromPackage: '@atlassian/jira-spotlight',
-  toPackage: '@atlaskit/spotlight',
-  examples: [{
-    title: 'Internal <JiraSpotlight /> migration',
-    description: 'Internal migrations are possible for JiraSpotlight usages which only pass simple/textual content to JiraSpotlight children',
-    before: "\n// file1.tsx\nimport { JiraSpotlight } from '@atlassian/jira-spotlight/src/ui/jira-spotlight.tsx';\n\nexport const OnboardingSpotlightWrapper = () => {\n\tconst spotlightId = 'some-unique-identifier'\n\tconst { dark, light } = spotlightImageUrls[spotlightId];\n\tconst imageUrl = colorMode === 'dark' ? dark : light;\n\n\treturn (\n\t\t<JiraSpotlight\n\t\t\timage={imageUrl}\n\t\t\tactions={[\n\t\t\t\t{\n\t\t\t\t\tonClick,\n\t\t\t\t\ttext: formatMessage(dismiss),\n\t\t\t\t},\n\t\t\t]}\n\t\t\theading={formatMessage(heading)}\n\t\t\ttarget={spotlightId}\n\t\t\tkey={spotlightId}\n\t\t\ttargetRadius={3}\n\t\t\ttargetBgColor={token('elevation.surface')}\n\t\t\tmessageId={spotlightId}\n\t\t\tmessageType=\"transactional\"\n\t\t\tdialogWidth={275}\n\t\t>\n\t\t\t{formatMessage(body)}\n\t\t</JiraSpotlight>\n\t);\n}\n\n// file2.tsx\nimport { SpotlightTarget } from '@atlaskit/onboarding';\n\nconst spotlightId = 'some-unique-identifier'\n\nexport const SomeFeature = () => {\n\treturn (\n\t\t<SpotlightTarget name={spotlightId}>\n\t\t\t// Target code\n\t\t</SpotlightTarget>\n\t);\n}\n",
-    after: "\n// file1.tsx\nimport { JiraSpotlight } from '@atlassian/jira-spotlight/src/ui/jira-spotlight.tsx';\n\nexport const OnboardingSpotlightWrapper = () => {\n\tconst spotlightId = 'some-unique-identifier'\n\tconst { dark, light } = spotlightImageUrls[spotlightId];\n\tconst imageUrl = colorMode === 'dark' ? dark : light;\n\n\treturn (\n\t\t<JiraSpotlight\n\t\t\tisMigrated // isMigrated prop passed\n\t\t\timage={imageUrl}\n\t\t\tactions={[\n\t\t\t\t{\n\t\t\t\t\tonClick,\n\t\t\t\t\ttext: formatMessage(dismiss),\n\t\t\t\t},\n\t\t\t]}\n\t\t\theading={formatMessage(heading)}\n\t\t\ttarget={spotlightId}\n\t\t\tkey={spotlightId}\n\t\t\ttargetRadius={3}\n\t\t\ttargetBgColor={token('elevation.surface')}\n\t\t\tmessageId={spotlightId}\n\t\t\tmessageType=\"transactional\"\n\t\t\tdialogWidth={275}\n\t\t>\n\t\t\t{formatMessage(body)}\n\t\t</JiraSpotlight>\n\t);\n}\n\n// file2.tsx\n// Updated SpotlightTarget import statement\nimport { SpotlightTarget } from '@atlassian/jira-spotlight/src/ui/SpotlightTarget.tsx';\n\nexport const SomeFeature = () => {\n\tconst spotlightId = 'some-unique-identifier'\n\n\treturn (\n\t\t<SpotlightTarget name={spotlightId}>\n\t\t\t// Target code\n\t\t</SpotlightTarget>\n\t);\n}\n\t\t\t",
-    explanation: "Key changes when migrating a JiraSpotlight:\n- A JiraSpotlight and a SpotlightTarget are part of the same usage if they share a spotlightId value - Referenced in JiraSpotlight.target and SpotlightTarget.name props\n- Pass isMigrated={true} to JiraSpotlight.\n- Update SpotlightTarget import statment from '@atlaskit/onboarding' to '@atlassian/jira-spotlight/src/ui/SpotlightTarget.tsx';\n- These changes allow switching the internal implementation to '@atlaskit/spotlight' via a feature flag.\n- This internal migration is only possible for usages that don't rely too heavily on the 'children' prop, as complex values, like heading, images, etc passed to 'children' are difficult to parse.\n"
-  }, {
-    title: 'Complex <JiraSpotlight /> migration',
-    description: 'Complex migrations are necessary for JiraSpotlight usages that make heavy use of the `children` prop to achieve customisation instead of relying on the `heading`, `body`, `image`, and/or `actions` props.',
-    before: "\n// file1.tsx\nimport { JiraSpotlight } from '@atlassian/jira-spotlight/src/ui/jira-spotlight.tsx';\n\nexport const OnboardingSpotlightWrapper = () => {\n\tconst spotlightId = 'some-unique-identifier'\n\tconst { dark, light } = spotlightImageUrls[spotlightId];\n\tconst imageUrl = colorMode === 'dark' ? dark : light;\n\n\treturn (\n\t\t<JiraSpotlight\n\t\t\ttarget={spotlightId}\n\t\t\ttargetRadius={3}\n\t\t\tdialogPlacement=''\n\t\t\ttargetBgColor={token('elevation.surface')}\n\t\t\tmessageId={spotlightId}\n\t\t\tmessageType=\"transactional\"\n\t\t\tdialogWidth={275}\n\t\t>\n\t\t\t<CustomSpotlightInner>\n\t\t\t\t{imageUrl}\n\t\t\t\t{formatMessage(heading)}\n\t\t\t\t{formatMessage(body)}\n\t\t\t\t<CustomSpotlightAction>\n\t\t\t\t\t{formatMessage(dismiss)}\n\t\t\t\t</CustomSpotlightAction>\n\t\t\t</CustomSpotlightInner>\n\t\t</JiraSpotlight>\n\t);\n}\n\n// file2.tsx\nimport { SpotlightTarget } from '@atlaskit/onboarding';\n\nconst spotlightId = 'some-unique-identifier'\n\nexport const SomeFeature = () => {\n\treturn (\n\t\t<SpotlightTarget name={spotlightId}>\n\t\t\t// Target code\n\t\t</SpotlightTarget>\n\t);\n}\n",
-    after: "\n// file2.tsx - Spotlight code has been co-located to the targeted element\nimport { Text } from '@atlaskit/primitives/compiled';\nimport {\n  PopoverContent,\n  PopoverProvider,\n  PopoverTarget,\n  SpotlightActions,\n  SpotlightBody,\n  SpotlightCard,\n  SpotlightControls,\n  SpotlightDismissControl,\n  SpotlightFooter,\n  SpotlightHeader,\n  SpotlightHeadline,\n  SpotlightPrimaryAction,\n} from '@atlaskit/spotlight';\nimport Image from '@atlaskit/image';\nimport { ChoreographedComponent } from '@atlassian/jira-spotlight/src/ui/ChoreographedComponent.tsx';\n\nexport const SomeFeature = () => {\n\tconst { dark, light } = spotlightImageUrls[spotlightId];\n\n\tconst [isSpotlightVisible, actions] = useListViewOnboarding({\n\t\tprojectId: String(projectData.id),\n\t\tid: spotlightId,\n\t});\n\n\treturn (\n\t\t<PopoverProvider>\n\t\t\t<PopoverTarget>{renderTrigger(isSpotlightVisible)}</PopoverTarget>\n\t\t\t<ChoreographedComponent messageId={spotlightId} messageType=\"transactional\">\n\t\t\t\t<PopoverContent isVisible={isSpotlightVisible} placement=\"bottom-start\" dismiss={onClick}>\n\t\t\t\t\t<SpotlightCard>\n\t\t\t\t\t\t<SpotlightHeader>\n\t\t\t\t\t\t\t<SpotlightHeadline>{formatMessage(heading)}</SpotlightHeadline>\n\t\t\t\t\t\t\t<SpotlightControls>\n\t\t\t\t\t\t\t\t<SpotlightDismissControl />\n\t\t\t\t\t\t\t</SpotlightControls>\n\t\t\t\t\t\t</SpotlightHeader>\n\t\t\t\t\t\t<SpotlightMedia>\n\t\t\t\t\t\t\t<Image src={light} srcDark={dark} alt=\"\" />\n\t\t\t\t\t\t</SpotlightMedia>\n\t\t\t\t\t\t<SpotlightBody>\n\t\t\t\t\t\t\t<Text>{formatMessage(body)}</Text>\n\t\t\t\t\t\t</SpotlightBody>\n\t\t\t\t\t\t<SpotlightFooter>\n\t\t\t\t\t\t\t<SpotlightActions>\n\t\t\t\t\t\t\t\t<SpotlightPrimaryAction onClick={onClick}>\n\t\t\t\t\t\t\t\t\t{formatMessage(dismiss)}\n\t\t\t\t\t\t\t\t</SpotlightPrimaryAction>\n\t\t\t\t\t\t\t</SpotlightActions>\n\t\t\t\t\t\t</SpotlightFooter>\n\t\t\t\t\t</SpotlightCard>\n\t\t\t\t</PopoverContent>\n\t\t\t</ChoreographedComponent>\n\t\t</PopoverProvider>\n\t);\n};",
-    explanation: "Key changes when migrating a single step spotlight:\n- Replace JiraSpotlight with ChoreographedComponent from '@atlassian/jira-spotlight'.\n- PopoverProvider maintains internal Spotlight state.\n- Replace SpotlightTarget with PopoverTarget - wraps the element to highlight\n- Replace Spotlight with PopoverContent containing SpotlightCard - controls visibility and positioning\n- 'heading' becomes SpotlightHeadline inside SpotlightHeader\n- 'actions' becomes SpotlightActions with SpotlightPrimaryAction (and optionally SpotlightSecondaryAction)\n- 'body' content moves into SpotlightBody wrapped with Text component\n- Add SpotlightDismissControl inside SpotlightControls for the close button\n- The 'target' and/or 'targetName' prop is replaced with PopoverTarget directly wrapping the target element\n- 'dialogPlacement' prop becomes 'placement' on PopoverContent. Mapping: \"top right\" \u2192 \"top-start\", \"top center\" \u2192 \"top\", \"top left\" \u2192 \"top-end\", \"right bottom\" \u2192 \"right-start\", \"right middle\" \u2192 \"right-start | right-end\", \"right top\" \u2192 \"right-end\", \"bottom left\" \u2192 \"bottom-end\", \"bottom center\" \u2192 \"bottom\", \"bottom right\" \u2192 \"bottom-start\", \"left top\" \u2192 \"left-end\", \"left middle\" \u2192 \"left-start | left-end\", \"left bottom\" \u2192 \"left-start\"'"
-  }],
-  bestPractices: [],
-  additionalResources: additionalResources
-};
-export var onboardingMultiStep = {
-  id: 'multi-step',
-  title: 'Multi Step Spotlight Tour Migration',
-  description: 'Migrate a multi-step spotlight tour from @atlaskit/onboarding to @atlaskit/spotlight',
-  fromPackage: '@atlaskit/onboarding',
-  toPackage: '@atlaskit/spotlight',
-  examples: [{
-    title: 'Migrate multi step spotlight tour',
-    description: 'Replace the single SpotlightManager pattern with multiple PopoverProvider instances, one for each target in the tour',
-    before: "import React, { useState } from 'react';\nimport Button, { IconButton } from '@atlaskit/button/new';\nimport CommentAddIcon from '@atlaskit/icon/core/comment-add';\nimport CopyIcon from '@atlaskit/icon/core/copy';\nimport {\n  Spotlight,\n  SpotlightManager,\n  SpotlightTarget,\n  SpotlightTransition,\n} from '@atlaskit/onboarding';\n\nconst OnboardingTour = () => {\n  const [activeSpotlight, setActiveSpotlight] = useState<null | number>(null);\n  const start = () => setActiveSpotlight(0);\n  const next = () => setActiveSpotlight((activeSpotlight || 0) + 1);\n  const back = () => setActiveSpotlight((activeSpotlight || 1) - 1);\n  const end = () => setActiveSpotlight(null);\n\n  const renderActiveSpotlight = () => {\n    const spotlights = [\n      <Spotlight\n        actions={[\n          { onClick: () => next(), text: 'Next' },\n          { onClick: () => end(), text: 'Dismiss', appearance: 'subtle' },\n        ]}\n        heading=\"Add a comment\"\n        target=\"comment\"\n        key=\"comment\"\n      >\n        Quickly add a comment to the work item.\n      </Spotlight>,\n      <Spotlight\n        actions={[\n          { onClick: () => end(), text: 'Done' },\n          { onClick: () => back(), text: 'Back', appearance: 'subtle' },\n        ]}\n        heading=\"Copy code\"\n        target=\"copy\"\n        key=\"copy\"\n      >\n        Click to copy the example code to your clipboard.\n      </Spotlight>,\n    ];\n\n    if (activeSpotlight === null) {\n      return null;\n    }\n    return spotlights[activeSpotlight];\n  };\n\n  return (\n    <SpotlightManager>\n      <SpotlightTarget name=\"comment\">\n        <IconButton icon={CommentAddIcon} label=\"comment\" />\n      </SpotlightTarget>\n      <SpotlightTarget name=\"copy\">\n        <IconButton icon={CopyIcon} label=\"Copy\" />\n      </SpotlightTarget>\n      <Button appearance=\"primary\" onClick={start}>\n        Start tour\n      </Button>\n      <SpotlightTransition>{renderActiveSpotlight()}</SpotlightTransition>\n    </SpotlightManager>\n  );\n};",
-    after: "import React, { useState } from 'react';\nimport Button, { IconButton } from '@atlaskit/button/new';\nimport CommentAddIcon from '@atlaskit/icon/core/comment-add';\nimport CopyIcon from '@atlaskit/icon/core/copy';\nimport { Text } from '@atlaskit/primitives/compiled';\nimport {\n  PopoverContent,\n  PopoverProvider,\n  PopoverTarget,\n  SpotlightActions,\n  SpotlightBody,\n  SpotlightCard,\n  SpotlightControls,\n  SpotlightDismissControl,\n  SpotlightFooter,\n  SpotlightHeader,\n  SpotlightHeadline,\n  SpotlightPrimaryAction,\n  SpotlightSecondaryAction,\n  SpotlightStepCount,\n} from '@atlaskit/spotlight';\n\nconst SpotlightTour = () => {\n  const [currentStep, setCurrentStep] = useState<number>(0);\n\n  const dismiss = () => setCurrentStep(0);\n  const back = () => setCurrentStep(Math.max(currentStep - 1, 1));\n  const next = () => setCurrentStep(Math.min(currentStep + 1, 2));\n  const done = () => setCurrentStep(0);\n\n  return (\n    <>\n      <PopoverProvider>\n        <PopoverTarget>\n          <IconButton icon={CommentAddIcon} label=\"comment\" />\n        </PopoverTarget>\n        <PopoverContent dismiss={dismiss} placement=\"bottom-start\" isVisible={currentStep === 1}>\n          <SpotlightCard>\n            <SpotlightHeader>\n              <SpotlightHeadline>Add a comment</SpotlightHeadline>\n              <SpotlightControls>\n                <SpotlightDismissControl onClick={dismiss} />\n              </SpotlightControls>\n            </SpotlightHeader>\n            <SpotlightBody>\n              <Text>Quickly add a comment to the work item.</Text>\n            </SpotlightBody>\n            <SpotlightFooter>\n              <SpotlightStepCount>1 of 2</SpotlightStepCount>\n              <SpotlightActions>\n                <SpotlightPrimaryAction onClick={next}>Next</SpotlightPrimaryAction>\n              </SpotlightActions>\n            </SpotlightFooter>\n          </SpotlightCard>\n        </PopoverContent>\n      </PopoverProvider>\n\n      <PopoverProvider>\n        <PopoverTarget>\n          <IconButton icon={CopyIcon} label=\"Copy\" />\n        </PopoverTarget>\n        <PopoverContent dismiss={dismiss} placement=\"bottom-start\" isVisible={currentStep === 2}>\n          <SpotlightCard>\n            <SpotlightHeader>\n              <SpotlightHeadline>Copy code</SpotlightHeadline>\n              <SpotlightControls>\n                <SpotlightDismissControl onClick={dismiss} />\n              </SpotlightControls>\n            </SpotlightHeader>\n            <SpotlightBody>\n              <Text>Click to copy the example code to your clipboard.</Text>\n            </SpotlightBody>\n            <SpotlightFooter>\n              <SpotlightStepCount>2 of 2</SpotlightStepCount>\n              <SpotlightActions>\n                <SpotlightSecondaryAction onClick={back}>Back</SpotlightSecondaryAction>\n                <SpotlightPrimaryAction onClick={done}>Done</SpotlightPrimaryAction>\n              </SpotlightActions>\n            </SpotlightFooter>\n          </SpotlightCard>\n        </PopoverContent>\n      </PopoverProvider>\n\n      <Button appearance=\"primary\" onClick={() => setCurrentStep(1)}>\n        Start tour\n      </Button>\n    </>\n  );\n};",
-    explanation: "Key changes when migrating a multi-step spotlight tour:\n- SpotlightManager coordinated multiple spotlights in a tour. PopoverProvider manages internal state for a single spotlight.\n- Each target gets its own PopoverProvider > PopoverTarget > PopoverContent structure\n- The spotlight array pattern is replaced with individual SpotlightCard components per target\n- Control visibility with isVisible={currentStep === n} on each PopoverContent\n- Add SpotlightStepCount component in SpotlightFooter to show progress (e.g., \"1 of 3\")\n- Use SpotlightSecondaryAction for \"Back\" buttons instead of appearance: 'subtle' in the actions array\n- Use SpotlightPrimaryAction for \"Next\" and \"Done\" buttons\n- The renderActiveSpotlight pattern is no longer needed - visibility is controlled declaratively\n- Navigation functions use Math.max/Math.min to bound the step range safely\n- All other migration changes from single step spotlight migration guide apply."
-  }],
-  bestPractices: ['Use a numeric currentStep state where 0 = hidden, 1+ = active step number', 'Always include SpotlightStepCount in multi-step tours for user orientation', 'First step should only have "Next" action, middle steps have "Back" and "Next", last step has "Back" and "Done"', 'Use SpotlightSecondaryAction for back/dismiss actions and SpotlightPrimaryAction for next/done', 'Include SpotlightDismissControl with onClick={dismiss} so users can exit the tour at any point', 'Bound navigation functions with Math.max/Math.min to prevent invalid step values', 'Preference duplicating Spotlight code instead of trying to have a single `@atlaskit/spotlight` instance that conditionally renders content based on step.'],
-  additionalResources: additionalResources
-};
-export var onboardingWithMotion = {
-  id: 'motion',
-  title: 'Single Step Spotlight with Motion Migration',
-  description: 'Migrate a single step spotlight with entrance animation from @atlaskit/onboarding to @atlaskit/spotlight using @atlaskit/motion',
-  fromPackage: '@atlaskit/onboarding',
-  toPackage: '@atlaskit/spotlight',
-  examples: [{
-    title: 'Migrate spotlight with transition animation',
-    description: 'Replace SpotlightTransition with FadeIn from @atlaskit/motion wrapped around the SpotlightCard',
-    before: "import React, { useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport {\n  Spotlight,\n  SpotlightManager,\n  SpotlightTarget,\n  SpotlightTransition,\n} from '@atlaskit/onboarding';\n\nconst OnboardingSpotlightWithTransition = () => {\n  const [isSpotlightActive, setIsSpotlightActive] = useState(false);\n  const start = () => setIsSpotlightActive(true);\n  const end = () => setIsSpotlightActive(false);\n\n  return (\n    <SpotlightManager>\n      <SpotlightTarget name=\"my-target\">\n        <Button>Target Element</Button>\n      </SpotlightTarget>\n      <div>\n        <Button appearance=\"primary\" onClick={start}>\n          Show spotlight\n        </Button>\n      </div>\n      <SpotlightTransition>\n        {isSpotlightActive && (\n          <Spotlight\n            actions={[\n              {\n                onClick: end,\n                text: 'Got it',\n              },\n            ]}\n            heading=\"Feature Heading\"\n            target=\"my-target\"\n            key=\"my-target\"\n          >\n            This is the spotlight body content describing the feature.\n          </Spotlight>\n        )}\n      </SpotlightTransition>\n    </SpotlightManager>\n  );\n};",
-    after: "import React, { useState } from 'react';\nimport Button from '@atlaskit/button/new';\nimport { FadeIn } from '@atlaskit/motion';\nimport { Text } from '@atlaskit/primitives/compiled';\nimport {\n  PopoverContent,\n  PopoverProvider,\n  PopoverTarget,\n  SpotlightActions,\n  SpotlightBody,\n  SpotlightCard,\n  SpotlightControls,\n  SpotlightDismissControl,\n  SpotlightFooter,\n  SpotlightHeader,\n  SpotlightHeadline,\n  SpotlightPrimaryAction,\n} from '@atlaskit/spotlight';\n\nconst SpotlightWithMotion = () => {\n  const [isVisible, setIsVisible] = useState(false);\n  const dismiss = () => setIsVisible(false);\n  const done = () => setIsVisible(false);\n\n  return (\n    <PopoverProvider>\n      <PopoverTarget>\n        <Button onClick={() => setIsVisible(true)}>Target Element</Button>\n      </PopoverTarget>\n      <PopoverContent done={done} dismiss={dismiss} placement=\"bottom-start\" isVisible={isVisible}>\n        <FadeIn entranceDirection=\"left\">\n          {(props) => (\n            <div {...props}>\n              <SpotlightCard>\n                <SpotlightHeader>\n                  <SpotlightHeadline>Feature Heading</SpotlightHeadline>\n                  <SpotlightControls>\n                    <SpotlightDismissControl />\n                  </SpotlightControls>\n                </SpotlightHeader>\n                <SpotlightBody>\n                  <Text>This is the spotlight body content describing the feature.</Text>\n                </SpotlightBody>\n                <SpotlightFooter>\n                  <SpotlightActions>\n                    <SpotlightPrimaryAction onClick={done}>Got it</SpotlightPrimaryAction>\n                  </SpotlightActions>\n                </SpotlightFooter>\n              </SpotlightCard>\n            </div>\n          )}\n        </FadeIn>\n      </PopoverContent>\n    </PopoverProvider>\n  );\n};",
-    explanation: "Key changes when migrating a spotlight with transition animation:\n- Replace SpotlightTransition with FadeIn from @atlaskit/motion\n- Import FadeIn from '@atlaskit/motion' instead of SpotlightTransition from '@atlaskit/onboarding'\n- FadeIn uses a render props pattern - wrap content in {(props) => <div {...props}>...</div>}\n- The entranceDirection prop controls animation direction: 'left', 'right', 'top', or 'bottom'\n- All other migration changes from single step spotlight apply (PopoverProvider, compositional components, etc.)"
-  }],
-  bestPractices: ['Choose entranceDirection based on spotlight placement (e.g., "left" for right-placed spotlights)', 'Motion is optional - only add if the original onboarding spotlight used SpotlightTransition for entrance effects'],
-  additionalResources: additionalResources
-};

package/dist/types/tools/analyze-a11y/index.d.ts

@@ -1,48 +0,0 @@
-import type { Tool } from '@modelcontextprotocol/sdk/types.js';
-import { z } from 'zod';
-export declare const analyzeA11yInputSchema: z.ZodObject<{
-    code: z.ZodString;
-    componentName: z.ZodOptional<z.ZodString>;
-    context: z.ZodOptional<z.ZodString>;
-    includePatternAnalysis: z.ZodOptional<z.ZodDefault<z.ZodBoolean>>;
-}, 'strip', z.ZodTypeAny, {
-    code: string;
-    componentName?: string | undefined;
-    context?: string | undefined;
-    includePatternAnalysis?: boolean | undefined;
-}, {
-    code: string;
-    componentName?: string | undefined;
-    context?: string | undefined;
-    includePatternAnalysis?: boolean | undefined;
-}>;
-export declare const listAnalyzeA11yTool: Tool;
-export declare const analyzeA11yLocalhostInputSchema: z.ZodObject<{
-    url: z.ZodString;
-    componentName: z.ZodOptional<z.ZodString>;
-    context: z.ZodOptional<z.ZodString>;
-    selector: z.ZodOptional<z.ZodString>;
-}, 'strip', z.ZodTypeAny, {
-    url: string;
-    componentName?: string | undefined;
-    context?: string | undefined;
-    selector?: string | undefined;
-}, {
-    url: string;
-    componentName?: string | undefined;
-    context?: string | undefined;
-    selector?: string | undefined;
-}>;
-export declare const listAnalyzeLocalhostA11yTool: Tool;
-export declare const analyzeA11yTool: (params: z.infer<typeof analyzeA11yInputSchema>) => Promise<{
-    content: {
-        type: string;
-        text: string;
-    }[];
-}>;
-export declare const analyzeLocalhostA11yTool: (params: z.infer<typeof analyzeA11yLocalhostInputSchema>) => Promise<{
-    content: {
-        type: string;
-        text: string;
-    }[];
-}>;

package/dist/types/tools/get-a11y-guidelines/index.d.ts

@@ -1,16 +0,0 @@
-import type { Tool } from '@modelcontextprotocol/sdk/types.js';
-import { z } from 'zod';
-export declare const getA11yGuidelinesInputSchema: z.ZodObject<{
-    topic: z.ZodOptional<z.ZodString>;
-}, 'strip', z.ZodTypeAny, {
-    topic?: string | undefined;
-}, {
-    topic?: string | undefined;
-}>;
-export declare const listGetA11yGuidelinesTool: Tool;
-export declare const getA11yGuidelinesTool: ({ topic, }: z.infer<typeof getA11yGuidelinesInputSchema>) => Promise<{
-    content: {
-        type: string;
-        text: string;
-    }[];
-}>;

package/dist/types/tools/get-guidelines/index.d.ts

@@ -1,13 +0,0 @@
-import type { Tool } from '@modelcontextprotocol/sdk/types.js';
-import { z } from 'zod';
-export declare const getGuidelinesInputSchema: z.ZodObject<{
-    terms: z.ZodOptional<z.ZodDefault<z.ZodArray<z.ZodString, 'many'>>>;
-    limit: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
-}>;
-export declare const listGetGuidelinesTool: Tool;
-export declare const getGuidelinesTool: (params: z.infer<typeof getGuidelinesInputSchema>) => Promise<{
-    content: {
-        type: string;
-        text: string;
-    }[];
-}>;

package/dist/types/tools/i18n-conversion/index.d.ts

@@ -1,16 +0,0 @@
-import type { Tool } from '@modelcontextprotocol/sdk/types.js';
-import { z } from 'zod';
-export declare const i18nConversionInputSchema: z.ZodObject<{
-    guide: z.ZodEnum<['hardcoded-string-to-formatmessage']>;
-}, 'strip', z.ZodTypeAny, {
-    guide: 'hardcoded-string-to-formatmessage';
-}, {
-    guide: 'hardcoded-string-to-formatmessage';
-}>;
-export declare const listI18nConversionTool: Tool;
-export declare const i18nConversionTool: (_params: z.infer<typeof i18nConversionInputSchema>) => Promise<{
-    content: {
-        type: string;
-        text: string;
-    }[];
-}>;

package/dist/types/tools/migration-guides/index.d.ts

@@ -1,19 +0,0 @@
-import type { Tool } from '@modelcontextprotocol/sdk/types.js';
-import { z } from 'zod';
-export declare const migrationGuidesInputSchema: z.ZodObject<{
-    migration: z.ZodEnum<[string]>;
-    description: z.ZodEnum<[string]>;
-}, 'strip', z.ZodTypeAny, {
-    migration: string;
-    description: string;
-}, {
-    migration: string;
-    description: string;
-}>;
-export declare const listMigrationGuidesTool: Tool;
-export declare const migrationGuidesTool: (params: z.infer<typeof migrationGuidesInputSchema>) => Promise<{
-    content: {
-        type: string;
-        text: string;
-    }[];
-}>;

package/dist/types/tools/migration-guides/migrations/onboarding-to-spotlight.d.ts

@@ -1,5 +0,0 @@
-import type { MigrationGuide } from '../types';
-export declare const onboardingSingleStep: MigrationGuide;
-export declare const onboardingJiraSpotlight: MigrationGuide;
-export declare const onboardingMultiStep: MigrationGuide;
-export declare const onboardingWithMotion: MigrationGuide;

package/dist/types-ts4.5/tools/analyze-a11y/index.d.ts

@@ -1,48 +0,0 @@
-import type { Tool } from '@modelcontextprotocol/sdk/types.js';
-import { z } from 'zod';
-export declare const analyzeA11yInputSchema: z.ZodObject<{
-    code: z.ZodString;
-    componentName: z.ZodOptional<z.ZodString>;
-    context: z.ZodOptional<z.ZodString>;
-    includePatternAnalysis: z.ZodOptional<z.ZodDefault<z.ZodBoolean>>;
-}, 'strip', z.ZodTypeAny, {
-    code: string;
-    componentName?: string | undefined;
-    context?: string | undefined;
-    includePatternAnalysis?: boolean | undefined;
-}, {
-    code: string;
-    componentName?: string | undefined;
-    context?: string | undefined;
-    includePatternAnalysis?: boolean | undefined;
-}>;
-export declare const listAnalyzeA11yTool: Tool;
-export declare const analyzeA11yLocalhostInputSchema: z.ZodObject<{
-    url: z.ZodString;
-    componentName: z.ZodOptional<z.ZodString>;
-    context: z.ZodOptional<z.ZodString>;
-    selector: z.ZodOptional<z.ZodString>;
-}, 'strip', z.ZodTypeAny, {
-    url: string;
-    componentName?: string | undefined;
-    context?: string | undefined;
-    selector?: string | undefined;
-}, {
-    url: string;
-    componentName?: string | undefined;
-    context?: string | undefined;
-    selector?: string | undefined;
-}>;
-export declare const listAnalyzeLocalhostA11yTool: Tool;
-export declare const analyzeA11yTool: (params: z.infer<typeof analyzeA11yInputSchema>) => Promise<{
-    content: {
-        type: string;
-        text: string;
-    }[];
-}>;
-export declare const analyzeLocalhostA11yTool: (params: z.infer<typeof analyzeA11yLocalhostInputSchema>) => Promise<{
-    content: {
-        type: string;
-        text: string;
-    }[];
-}>;

package/dist/types-ts4.5/tools/get-a11y-guidelines/index.d.ts

@@ -1,16 +0,0 @@
-import type { Tool } from '@modelcontextprotocol/sdk/types.js';
-import { z } from 'zod';
-export declare const getA11yGuidelinesInputSchema: z.ZodObject<{
-    topic: z.ZodOptional<z.ZodString>;
-}, 'strip', z.ZodTypeAny, {
-    topic?: string | undefined;
-}, {
-    topic?: string | undefined;
-}>;
-export declare const listGetA11yGuidelinesTool: Tool;
-export declare const getA11yGuidelinesTool: ({ topic, }: z.infer<typeof getA11yGuidelinesInputSchema>) => Promise<{
-    content: {
-        type: string;
-        text: string;
-    }[];
-}>;

package/dist/types-ts4.5/tools/get-guidelines/index.d.ts

@@ -1,13 +0,0 @@
-import type { Tool } from '@modelcontextprotocol/sdk/types.js';
-import { z } from 'zod';
-export declare const getGuidelinesInputSchema: z.ZodObject<{
-    terms: z.ZodOptional<z.ZodDefault<z.ZodArray<z.ZodString, 'many'>>>;
-    limit: z.ZodOptional<z.ZodDefault<z.ZodNumber>>;
-}>;
-export declare const listGetGuidelinesTool: Tool;
-export declare const getGuidelinesTool: (params: z.infer<typeof getGuidelinesInputSchema>) => Promise<{
-    content: {
-        type: string;
-        text: string;
-    }[];
-}>;

package/dist/types-ts4.5/tools/migration-guides/migrations/onboarding-to-spotlight.d.ts

@@ -1,5 +0,0 @@
-import type { MigrationGuide } from '../types';
-export declare const onboardingSingleStep: MigrationGuide;
-export declare const onboardingJiraSpotlight: MigrationGuide;
-export declare const onboardingMultiStep: MigrationGuide;
-export declare const onboardingWithMotion: MigrationGuide;