@planningcenter/tapestry-migration-cli 3.6.1-qa-1035.0 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-migration-cli",
-  "version": "3.6.1-qa-1035.0",
+  "version": "3.7.0",
   "description": "CLI tool for Tapestry migrations",
   "type": "module",
   "main": "dist/index.js",
@@ -30,7 +30,7 @@
   },
   "devDependencies": {
     "@emotion/react": "^11.14.0",
-    "@planningcenter/tapestry": "^3.6.1-qa-1035.0",
+    "@planningcenter/tapestry": "^3.7.0",
     "@planningcenter/tapestry-react": "^4.11.5",
     "@types/jscodeshift": "^17.3.0",
     "@types/node": "^20.0.0",
@@ -50,5 +50,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "2b87acce23b1df6872d7bbeadd648b117c9962c4"
+  "gitHead": "d959b05c0d33fcee1f86953c994ffdff835e3b49"
 }

package/src/components/flex/index.test.ts

@@ -145,6 +145,21 @@ export default function Test() {
     expect(result).not.toContain("flex=")
   })
 
+  it("applies flexPropToExpand through the chain — unmappable flex stays as JSX prop with TODO, not in style={{}}", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ dynamicValue }) {
+  return <StackView flex={dynamicValue}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("flex={dynamicValue}")
+    expect(result).not.toContain("style={{")
+    expect(result?.match(/TODO/g)).toHaveLength(1)
+  })
+
   it("applies mediaQueriesToResponsive through the chain", () => {
     const input = `
 import { StackView } from "@planningcenter/tapestry-react"
@@ -174,6 +189,21 @@ export default function Test() {
     expect(result?.match(/direction=/g)).toHaveLength(1)
   })
 
+  it("applies dedupeAttributes through the chain — axis and flexDirection both mapping to direction collapse to one prop", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView axis="horizontal" flexDirection="column">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result?.match(/direction=/g)).toHaveLength(1)
+    expect(result).toContain('direction="column"')
+    expect(result).toContain("TODO: tapestry-migration (direction)")
+  })
+
   it("applies cssFlexAliasesToProps through the chain — unmappable justifyContent stays as JSX prop with TODO, not in style={{}}", () => {
     const input = `
 import { StackView } from "@planningcenter/tapestry-react"

package/src/components/flex/index.ts

@@ -5,6 +5,7 @@ import auditSpreadProps from "./transforms/auditSpreadProps"
 import axisToDirection from "./transforms/axisToDirection"
 import convertStyleProps from "./transforms/convertStyleProps"
 import cssFlexAliasesToProps from "./transforms/cssFlexAliasesToProps"
+import dedupeAttributes from "./transforms/dedupeAttributes"
 import distributionToJustify from "./transforms/distributionToJustify"
 import flexPropToExpand from "./transforms/flexPropToExpand"
 import innerRefToRef from "./transforms/innerRefToRef"
@@ -33,6 +34,7 @@ const transform: Transform = (fileInfo, api, options) => {
     convertStyleProps,
     unsupportedProps,
     auditSpreadProps,
+    dedupeAttributes,
     moveFlexImport,
   ]
 

package/src/components/flex/transforms/alignmentToAlign.test.ts

@@ -100,6 +100,107 @@ export default function Test() {
     expect(result).not.toContain("StackView.BASELINE")
   })
 
+  it('normalizes alignment="flex-start" to align="start"', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView alignment="flex-start">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align="start"')
+    expect(result).not.toContain("alignment")
+  })
+
+  it('normalizes alignment="flex-end" to align="end"', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView alignment="flex-end">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align="end"')
+    expect(result).not.toContain("alignment")
+  })
+
+  it("migrates a ternary with a valid string branch and an undefined pass-through branch", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView alignment={compact ? 'center' : undefined}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align={compact ? "center" : undefined}')
+    expect(result).not.toContain("alignment")
+  })
+
+  it("migrates a ternary with two valid string branches", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView alignment={compact ? 'center' : 'end'}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align={compact ? "center" : "end"}')
+    expect(result).not.toContain("alignment")
+  })
+
+  it("normalizes flex-start/flex-end within a ternary", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView alignment={compact ? 'flex-start' : 'flex-end'}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align={compact ? "start" : "end"}')
+    expect(result).not.toContain("alignment")
+  })
+
+  it("migrates a ternary with a dynamic branch, trusting it at runtime", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact, dynamicValue }) {
+  return <StackView alignment={compact ? 'center' : dynamicValue}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align={compact ? "center" : dynamicValue}')
+    expect(result).not.toContain("alignment")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("flags a ternary with a fill branch and leaves it in place", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView alignment={compact ? 'center' : 'fill'}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("alignment={compact ? 'center' : 'fill'}")
+    expect(result).toContain("TODO: tapestry-migration (alignment)")
+    expect(result).not.toContain('align="')
+    expect(result).not.toContain("align={")
+  })
+
   it("flags alignment={StackView.FILL} with a TODO and leaves it in place", () => {
     const input = `
 import { StackView } from "@planningcenter/tapestry-react"

package/src/components/flex/transforms/alignmentToAlign.ts

@@ -1,10 +1,11 @@
-import { Transform } from "jscodeshift"
+import { Expression, Transform } from "jscodeshift"
 
-import { addComment } from "../../shared/actions/addComment"
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
 import { getAttribute } from "../../shared/actions/getAttribute"
 import { resolveConstantAttributeValue } from "../../shared/actions/resolveConstantAttributeValue"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { FLEX_START_END_MAP } from "./constants"
 
 const VALID_ALIGN_VALUES = new Set([
   "start",
@@ -23,42 +24,95 @@ const CONSTANT_ALIGN_MAP: Record<string, string> = {
   STRETCH: "stretch",
 }
 
+const TODO_TEXT =
+  "could not migrate alignment to align automatically; convert this value to start, center, end, stretch, or baseline manually"
+
+function normalizeAlignValue(raw: string): string | null {
+  const normalized = FLEX_START_END_MAP[raw] ?? raw
+  return VALID_ALIGN_VALUES.has(normalized) ? normalized : null
+}
+
+type BranchResolution =
+  | { kind: "invalid" }
+  | { kind: "passthrough" }
+  | { kind: "valid"; value: string }
+
+function resolveBranch(node: Expression): BranchResolution {
+  if (node.type === "StringLiteral") {
+    const normalized = normalizeAlignValue(node.value)
+    return normalized !== null
+      ? { kind: "valid", value: normalized }
+      : { kind: "invalid" }
+  }
+  if (node.type === "MemberExpression" && node.property.type === "Identifier") {
+    const mapped = CONSTANT_ALIGN_MAP[node.property.name]
+    if (mapped === undefined) return { kind: "passthrough" }
+    const normalized = normalizeAlignValue(mapped)
+    return normalized !== null
+      ? { kind: "valid", value: normalized }
+      : { kind: "invalid" }
+  }
+  return { kind: "passthrough" }
+}
+
 const transform: Transform = attributeTransformFactory({
   condition: hasAttribute("alignment"),
   targetComponent: "StackView",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j }) => {
     const alignmentAttribute = getAttribute({ element, name: "alignment" })
     if (!alignmentAttribute) return false
 
+    const value = alignmentAttribute.value
+
+    if (
+      value?.type === "JSXExpressionContainer" &&
+      value.expression.type === "ConditionalExpression"
+    ) {
+      const conditional = value.expression
+      const consequent = resolveBranch(conditional.consequent as Expression)
+      const alternate = resolveBranch(conditional.alternate as Expression)
+
+      if (consequent.kind !== "invalid" && alternate.kind !== "invalid") {
+        if (consequent.kind === "valid") {
+          conditional.consequent = j.stringLiteral(consequent.value)
+        }
+        if (alternate.kind === "valid") {
+          conditional.alternate = j.stringLiteral(alternate.value)
+        }
+        alignmentAttribute.name.name = "align"
+        return true
+      }
+
+      addCommentToAttribute({
+        attribute: alignmentAttribute,
+        j,
+        text: TODO_TEXT,
+      })
+      return true
+    }
+
     const resolved = resolveConstantAttributeValue({
       attribute: alignmentAttribute,
       constantMap: CONSTANT_ALIGN_MAP,
     })
-    const alignValue =
-      resolved !== null &&
-      (VALID_ALIGN_VALUES.has(resolved) || resolved === "fill")
-        ? resolved
-        : null
 
-    if (alignValue === null) {
-      addComment({
-        element,
+    if (resolved === "fill") {
+      addCommentToAttribute({
+        attribute: alignmentAttribute,
         j,
-        scope: "alignment",
-        source,
-        text: "could not migrate alignment to align automatically; convert this value to start, center, end, stretch, or baseline manually",
+        text: 'alignment="fill" has no Flex equivalent; remove this prop and use expand on the child element instead',
       })
       return true
     }
 
-    if (alignValue === "fill") {
-      addComment({
-        element,
+    const alignValue = resolved !== null ? normalizeAlignValue(resolved) : null
+
+    if (alignValue === null) {
+      addCommentToAttribute({
+        attribute: alignmentAttribute,
         j,
-        scope: "alignment",
-        source,
-        text: 'alignment="fill" has no Flex equivalent; remove this prop and use expand on the child element instead',
+        text: TODO_TEXT,
       })
       return true
     }

package/src/components/flex/transforms/constants.ts

@@ -0,0 +1,4 @@
+export const FLEX_START_END_MAP: Record<string, string> = {
+  "flex-end": "end",
+  "flex-start": "start",
+}

package/src/components/flex/transforms/cssFlexAliasesToProps.ts

@@ -6,11 +6,7 @@ import { transformAttributeName } from "../../shared/actions/transformAttributeN
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
 import { orConditions } from "../../shared/conditions/orConditions"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
-
-const FLEX_START_END_MAP: Record<string, string> = {
-  "flex-end": "end",
-  "flex-start": "start",
-}
+import { FLEX_START_END_MAP } from "./constants"
 
 const VALID_JUSTIFY_VALUES = new Set([
   "start",

package/src/components/flex/transforms/dedupeAttributes.test.ts

@@ -0,0 +1,120 @@
+import jscodeshift from "jscodeshift"
+import { describe, expect, it } from "vitest"
+
+import transform from "./dedupeAttributes"
+
+const j = jscodeshift.withParser("tsx")
+
+function applyTransform(source: string): string | null {
+  const fileInfo = { path: "test.tsx", source }
+  return transform(
+    fileInfo,
+    { j, jscodeshift: j, report: () => {}, stats: () => {} },
+    {}
+  ) as string | null
+}
+
+describe("dedupeAttributes transform", () => {
+  it("keeps the last of two duplicate attributes and drops the earlier one", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView direction="row" direction="column">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('direction="column"')
+    expect(result?.match(/direction=/g)).toHaveLength(1)
+    expect(result).toContain("TODO: tapestry-migration (direction)")
+    expect(result).toContain("duplicate direction prop")
+  })
+
+  it("keeps the last of three duplicate attributes and drops the earlier ones", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView align="start" align="center" align="end">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('align="end"')
+    expect(result?.match(/align=/g)).toHaveLength(1)
+    expect(result).toContain("TODO: tapestry-migration (align)")
+  })
+
+  it("dedupes multiple different duplicated attribute names independently", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView direction="row" direction="column" align="start" align="end">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result?.match(/direction=/g)).toHaveLength(1)
+    expect(result?.match(/align=/g)).toHaveLength(1)
+    expect(result).toContain('direction="column"')
+    expect(result).toContain('align="end"')
+  })
+
+  it("preserves other non-duplicate attributes untouched", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView direction="row" direction="column" gap={2}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("gap={2}")
+    expect(result?.match(/direction=/g)).toHaveLength(1)
+  })
+
+  it("ignores spread attributes", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView {...props} direction="row" direction="column">Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("{...props}")
+    expect(result?.match(/direction=/g)).toHaveLength(1)
+  })
+
+  it("returns null when there are no duplicate attributes", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView direction="row" gap={2}>Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("returns null when StackView is not imported from tapestry-react", () => {
+    const input = `
+import { StackView } from "some-other-package"
+
+export default function Test() {
+  return <StackView direction="row" direction="column">Test</StackView>
+}
+    `.trim()
+
+    expect(applyTransform(input)).toBe(null)
+  })
+
+  it("returns null for an empty file", () => {
+    expect(applyTransform("")).toBe(null)
+  })
+})

package/src/components/flex/transforms/dedupeAttributes.ts

@@ -0,0 +1,49 @@
+import { JSXAttribute } from "jscodeshift"
+
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
+import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+
+export default attributeTransformFactory({
+  targetComponent: "StackView",
+  targetPackage: "@planningcenter/tapestry-react",
+  transform: (element, { j }) => {
+    const attrs = element.openingElement.attributes ?? []
+    const byName = new Map<string, JSXAttribute[]>()
+
+    for (const attr of attrs) {
+      if (attr.type !== "JSXAttribute") continue
+      if (attr.name.type !== "JSXIdentifier") continue
+      const name = attr.name.name
+      const group = byName.get(name)
+      if (group) {
+        group.push(attr)
+      } else {
+        byName.set(name, [attr])
+      }
+    }
+
+    let changed = false
+
+    for (const [name, group] of byName) {
+      if (group.length < 2) continue
+
+      const kept = group[group.length - 1]
+      const dropped = group.slice(0, -1)
+
+      for (const attr of dropped) {
+        const idx = attrs.indexOf(attr)
+        attrs.splice(idx, 1)
+      }
+
+      addCommentToAttribute({
+        attribute: kept,
+        j,
+        text: `duplicate ${name} prop after migration — an earlier ${name} value was dropped in favor of this one; verify this is correct`,
+      })
+
+      changed = true
+    }
+
+    return changed
+  },
+})

package/src/components/flex/transforms/distributionToJustify.test.ts

@@ -114,6 +114,65 @@ export default function Test() {
     expect(result).not.toContain("StackView.SPACE_EVENLY")
   })
 
+  it("migrates a ternary with a valid string branch and an undefined pass-through branch", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView distribution={compact ? 'center' : undefined}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify={compact ? "center" : undefined}')
+    expect(result).not.toContain("distribution")
+  })
+
+  it("migrates a ternary with two valid string branches", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView distribution={compact ? 'center' : 'start'}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify={compact ? "center" : "start"}')
+    expect(result).not.toContain("distribution")
+  })
+
+  it("migrates a ternary with a dynamic branch, trusting it at runtime", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact, dynamicValue }) {
+  return <StackView distribution={compact ? 'center' : dynamicValue}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain('justify={compact ? "center" : dynamicValue}')
+    expect(result).not.toContain("distribution")
+    expect(result).not.toContain("TODO")
+  })
+
+  it("flags a ternary with a fill branch and leaves it in place", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView distribution={compact ? 'center' : 'fill'}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("distribution={compact ? 'center' : 'fill'}")
+    expect(result).toContain("TODO: tapestry-migration (distribution)")
+    expect(result).not.toContain('justify="')
+    expect(result).not.toContain("justify={")
+  })
+
   it("flags distribution={StackView.FILL} with a TODO and leaves it in place", () => {
     const input = `
 import { StackView } from "@planningcenter/tapestry-react"

package/src/components/flex/transforms/distributionToJustify.ts

@@ -1,6 +1,6 @@
-import { Transform } from "jscodeshift"
+import { Expression, Transform } from "jscodeshift"
 
-import { addComment } from "../../shared/actions/addComment"
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
 import { getAttribute } from "../../shared/actions/getAttribute"
 import { resolveConstantAttributeValue } from "../../shared/actions/resolveConstantAttributeValue"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
@@ -23,45 +23,94 @@ const CONSTANT_DISTRIBUTION_MAP: Record<string, string> = {
   START: "start",
 }
 
+const TODO_TEXT =
+  "could not migrate distribution to justify automatically; convert this value to start, center, end, space-between, or space-evenly manually"
+
+function resolveJustifyValue(raw: string): string | null {
+  return VALID_JUSTIFY_VALUES.has(raw) ? raw : null
+}
+
+type BranchResolution =
+  | { kind: "invalid" }
+  | { kind: "passthrough" }
+  | { kind: "valid"; value: string }
+
+function resolveBranch(node: Expression): BranchResolution {
+  if (node.type === "StringLiteral") {
+    const value = resolveJustifyValue(node.value)
+    return value !== null ? { kind: "valid", value } : { kind: "invalid" }
+  }
+  if (node.type === "MemberExpression" && node.property.type === "Identifier") {
+    const mapped = CONSTANT_DISTRIBUTION_MAP[node.property.name]
+    if (mapped === undefined) return { kind: "passthrough" }
+    const value = resolveJustifyValue(mapped)
+    return value !== null ? { kind: "valid", value } : { kind: "invalid" }
+  }
+  return { kind: "passthrough" }
+}
+
 const transform: Transform = attributeTransformFactory({
   condition: hasAttribute("distribution"),
   targetComponent: "StackView",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j }) => {
     const distributionAttribute = getAttribute({
       element,
       name: "distribution",
     })
     if (!distributionAttribute) return false
 
+    const value = distributionAttribute.value
+
+    if (
+      value?.type === "JSXExpressionContainer" &&
+      value.expression.type === "ConditionalExpression"
+    ) {
+      const conditional = value.expression
+      const consequent = resolveBranch(conditional.consequent as Expression)
+      const alternate = resolveBranch(conditional.alternate as Expression)
+
+      if (consequent.kind !== "invalid" && alternate.kind !== "invalid") {
+        if (consequent.kind === "valid") {
+          conditional.consequent = j.stringLiteral(consequent.value)
+        }
+        if (alternate.kind === "valid") {
+          conditional.alternate = j.stringLiteral(alternate.value)
+        }
+        distributionAttribute.name.name = "justify"
+        return true
+      }
+
+      addCommentToAttribute({
+        attribute: distributionAttribute,
+        j,
+        text: TODO_TEXT,
+      })
+      return true
+    }
+
     const resolved = resolveConstantAttributeValue({
       attribute: distributionAttribute,
       constantMap: CONSTANT_DISTRIBUTION_MAP,
     })
-    const distributionValue =
-      resolved !== null &&
-      (VALID_JUSTIFY_VALUES.has(resolved) || resolved === "fill")
-        ? resolved
-        : null
 
-    if (distributionValue === null) {
-      addComment({
-        element,
+    if (resolved === "fill") {
+      addCommentToAttribute({
+        attribute: distributionAttribute,
         j,
-        scope: "distribution",
-        source,
-        text: "could not migrate distribution to justify automatically; convert this value to start, center, end, space-between, or space-evenly manually",
+        text: 'distribution="fill" has no Flex equivalent; remove this prop and use expand on the child elements instead',
       })
       return true
     }
 
-    if (distributionValue === "fill") {
-      addComment({
-        element,
+    const distributionValue =
+      resolved !== null ? resolveJustifyValue(resolved) : null
+
+    if (distributionValue === null) {
+      addCommentToAttribute({
+        attribute: distributionAttribute,
         j,
-        scope: "distribution",
-        source,
-        text: 'distribution="fill" has no Flex equivalent; remove this prop and use expand on the child elements instead',
+        text: TODO_TEXT,
       })
       return true
     }

package/src/components/flex/transforms/flexPropToExpand.test.ts

@@ -107,6 +107,22 @@ export default function Test() {
     expect(result).not.toContain("TODO")
   })
 
+  it("expands flex={2} into grow={2} shrink={1} basis='0'", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+export default function Test() {
+  return <StackView flex={2}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("grow={2}")
+    expect(result).toContain("shrink={1}")
+    expect(result).toContain('basis="0"')
+    expect(result).not.toContain("flex=")
+    expect(result).not.toContain("TODO")
+  })
+
   it("adds a TODO for a dynamic flex value", () => {
     const input = `
 import { StackView } from "@planningcenter/tapestry-react"

package/src/components/flex/transforms/flexPropToExpand.ts

@@ -46,19 +46,19 @@ export default attributeTransformFactory({
       return true
     }
 
-    // flex={0} → grow={0} shrink={1} basis="0"
+    // flex={N} (N !== 1) → grow={N} shrink={1} basis="0"
     if (
       value?.type === "JSXExpressionContainer" &&
-      value.expression.type === "NumericLiteral" &&
-      (value.expression as { value: number }).value === 0
+      value.expression.type === "NumericLiteral"
     ) {
+      const grow = (value.expression as { value: number }).value
       const idx = attrs.indexOf(flexAttr)
       attrs.splice(
         idx,
         1,
         j.jsxAttribute(
           j.jsxIdentifier("grow"),
-          j.jsxExpressionContainer(j.numericLiteral(0))
+          j.jsxExpressionContainer(j.numericLiteral(grow))
         ),
         j.jsxAttribute(
           j.jsxIdentifier("shrink"),

package/src/components/flex/transforms/mediaQueriesToResponsive.test.ts

@@ -293,6 +293,22 @@ export default function Test() {
     expect(result).not.toContain("TODO")
   })
 
+  it('flags flex="N N basis" inside a breakpoint with a TODO instead of duplicating an existing grow key', () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { flex: "1 0 0", grow: 5 } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("TODO")
+    expect(result).toContain("grow: 5")
+    expect(result?.match(/grow:/g)).toHaveLength(1)
+  })
+
   it('flags flex="inherit" inside a breakpoint with a generic TODO, not an expand-specific one', () => {
     const input = `
 import { StackView } from "@planningcenter/tapestry-react"
@@ -318,7 +334,7 @@ export default function Test() {
 
     const result = applyTransform(input)
     expect(result).toContain("TODO")
-    expect(result).not.toContain("expand is not supported")
+    expect(result).toContain("expand is not supported")
   })
 
   it("flags flex={1} inside a breakpoint with a TODO (expand not supported in responsive)", () => {
@@ -353,6 +369,71 @@ export default function Test() {
     expect(result).not.toContain("TODO")
   })
 
+  it("flags flex={0} inside a breakpoint with a TODO instead of duplicating an existing grow key", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { flex: 0, grow: 5 } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("TODO")
+    expect(result).toContain("grow: 5")
+    expect(result?.match(/grow:/g)).toHaveLength(1)
+  })
+
+  it("flags axis inside a breakpoint with a TODO instead of duplicating an existing direction key", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { axis: "horizontal", direction: "column" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("TODO")
+    expect(result).toContain('direction: "column"')
+    expect(result?.match(/direction:/g)).toHaveLength(1)
+  })
+
+  it("flags both axis and flexDirection with a TODO when they both target direction in the same breakpoint", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { axis: "horizontal", flexDirection: "column" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("TODO")
+    expect(result).toContain('axis: "horizontal"')
+    expect(result).toContain('flexDirection: "column"')
+    expect(result?.match(/direction:/g)).toBeNull()
+  })
+
+  it("flags alignItems inside a breakpoint with a TODO instead of duplicating an existing align key", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test() {
+  return <StackView mediaQueries={{ md: { alignItems: "center", align: "start" } }}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("responsive=")
+    expect(result).toContain("TODO")
+    expect(result).toContain('align: "start"')
+    expect(result?.match(/align:/g)).toHaveLength(1)
+  })
+
   it("flags an unsupported breakpoint (xxs) with a TODO", () => {
     const input = `
 import { StackView } from "@planningcenter/tapestry-react"

package/src/components/flex/transforms/mediaQueriesToResponsive.ts

@@ -5,6 +5,7 @@ import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribut
 import { getAttribute } from "../../shared/actions/getAttribute"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
+import { FLEX_START_END_MAP } from "./constants"
 
 function commentOnAttr(
   attr: JSXAttribute,
@@ -88,11 +89,6 @@ const PADDING_TODO =
   `use a Tapestry spacing scale number (${PADDING_SCALE_LIST}) ` +
   "for Flex padding, or use style={{ padding: ... }} for arbitrary CSS values"
 
-const FLEX_START_END_MAP: Record<string, string> = {
-  "flex-end": "end",
-  "flex-start": "start",
-}
-
 const FLEX_RESPONSIVE_PASSTHROUGH = new Set([
   "align",
   "alignSelf",
@@ -331,7 +327,8 @@ function planInnerProp(
 
   if (propName === "flex") {
     if (node.type === "StringLiteral" && typeof node.value === "string") {
-      const parts = (node.value as string).trim().split(/\s+/)
+      const raw = (node.value as string).trim()
+      const parts = raw.split(/\s+/)
       if (parts.length === 3) {
         const grow = Number(parts[0])
         const shrink = Number(parts[1])
@@ -346,6 +343,11 @@ function planInnerProp(
           }
         }
       }
+      if (raw === "1") {
+        return {
+          todo: "expand is not supported in responsive; use grow, shrink, and basis individually",
+        }
+      }
       return {
         todo: "could not migrate flex automatically; use grow, shrink, and basis individually",
       }
@@ -442,6 +444,15 @@ const transform: Transform = attributeTransformFactory({
         return true
       }
 
+      const pendingRenames: Array<{
+        apply: () => void
+        name: string
+        newKeys: string[]
+      }> = []
+      const finalKeyCounts = new Map<string, number>()
+      const countKey = (key: string) =>
+        finalKeyCounts.set(key, (finalKeyCounts.get(key) ?? 0) + 1)
+
       for (const innerProp of outerVal.properties) {
         if (innerProp.type !== "ObjectProperty") {
           innerTodos.push({
@@ -463,30 +474,58 @@ const transform: Transform = attributeTransformFactory({
         }
 
         const result = planInnerProp(innerKey.name, innerProp.value, j)
-        if (result === null) continue
+        if (result === null) {
+          countKey(innerKey.name)
+          continue
+        }
         if ("todo" in result) {
+          countKey(innerKey.name)
           innerTodos.push({ key: innerKey.name, message: result.todo })
           continue
         }
 
-        if ("newEntries" in result) {
-          const entries = result.newEntries
-          mutations.push(() => {
-            const idx = outerVal.properties.indexOf(innerProp)
-            outerVal.properties.splice(
-              idx,
-              1,
-              ...entries.map(({ newKey, newValue }) =>
-                j.objectProperty(j.identifier(newKey), newValue)
+        const newKeys =
+          "newEntries" in result
+            ? result.newEntries.map(({ newKey }) => newKey)
+            : [result.newKey]
+        newKeys.forEach(countKey)
+
+        pendingRenames.push({
+          apply: () => {
+            if ("newEntries" in result) {
+              const entries = result.newEntries
+              const idx = outerVal.properties.indexOf(innerProp)
+              outerVal.properties.splice(
+                idx,
+                1,
+                ...entries.map(({ newKey, newValue }) =>
+                  j.objectProperty(j.identifier(newKey), newValue)
+                )
               )
-            )
-          })
-        } else {
-          mutations.push(() => {
-            innerKey.name = result.newKey
-            innerProp.value = result.newValue
+            } else {
+              innerKey.name = result.newKey
+              innerProp.value = result.newValue
+            }
+          },
+          name: innerKey.name,
+          newKeys,
+        })
+      }
+
+      for (const plan of pendingRenames) {
+        const collidingKeys = plan.newKeys.filter(
+          (key) => (finalKeyCounts.get(key) ?? 0) > 1
+        )
+
+        if (collidingKeys.length > 0) {
+          innerTodos.push({
+            key: plan.name,
+            message: `could not migrate ${plan.name} automatically — it would duplicate the ${collidingKeys.join(", ")} key already present (or produced by another prop) in this breakpoint; set the target prop(s) individually instead`,
           })
+          continue
         }
+
+        mutations.push(plan.apply)
       }
     }
 

package/src/components/flex/transforms/spacingToGap.test.ts

@@ -136,6 +136,93 @@ export default function Test({ spacingProp }) {
     expect(result).not.toContain("gap=")
   })
 
+  it("renames spacing to gap for a ternary with two in-scale numeric branches", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView spacing={compact ? 1.5 : 2}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("gap={compact ? 1.5 : 2}")
+    expect(result).not.toContain("spacing")
+  })
+
+  it("renames spacing to gap for a ternary with an undefined pass-through branch", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView spacing={compact ? 2 : undefined}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("gap={compact ? 2 : undefined}")
+    expect(result).not.toContain("spacing")
+  })
+
+  it("renames spacing to gap for a ternary with a null pass-through branch", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView spacing={compact ? 2 : null}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("gap={compact ? 2 : null}")
+    expect(result).not.toContain("spacing")
+  })
+
+  it("flags a ternary with one off-scale branch with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView spacing={compact ? 1.5 : 10}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("spacing={compact ? 1.5 : 10}")
+    expect(result).toContain("TODO: tapestry-migration (spacing)")
+    expect(result).not.toContain("gap=")
+  })
+
+  it("flags a ternary with a ReactNode branch with a TODO", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact }) {
+  return <StackView spacing={compact ? 1.5 : <Divider />}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("spacing={compact ? 1.5 : <Divider />}")
+    expect(result).toContain("TODO: tapestry-migration (spacing)")
+    expect(result).not.toContain("gap=")
+  })
+
+  it("renames spacing to gap for a ternary with a dynamic branch, trusting it at runtime", () => {
+    const input = `
+import { StackView } from "@planningcenter/tapestry-react"
+
+export default function Test({ compact, dynamicValue }) {
+  return <StackView spacing={compact ? 1.5 : dynamicValue}>Test</StackView>
+}
+    `.trim()
+
+    const result = applyTransform(input)
+    expect(result).toContain("gap={compact ? 1.5 : dynamicValue}")
+    expect(result).not.toContain("spacing")
+    expect(result).not.toContain("TODO")
+  })
+
   it("respects an aliased StackView import", () => {
     const input = `
 import { StackView as Stack } from "@planningcenter/tapestry-react"

package/src/components/flex/transforms/spacingToGap.ts

@@ -1,12 +1,25 @@
 import { JSXAttribute, Transform } from "jscodeshift"
 
-import { addComment } from "../../shared/actions/addComment"
+import { addCommentToAttribute } from "../../shared/actions/addCommentToAttribute"
 import { getAttribute } from "../../shared/actions/getAttribute"
 import { hasAttribute } from "../../shared/conditions/hasAttribute"
 import { attributeTransformFactory } from "../../shared/transformFactories/attributeTransformFactory"
 
 const VALID_GAP_VALUES = new Set([0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7])
 
+const TODO_TEXT =
+  "could not migrate spacing to gap automatically; use a Tapestry spacing scale number (0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7) for gap, or for ReactNode spacers add explicit margin to the spacer element instead"
+
+function isKnownInvalidBranch(node: unknown): boolean {
+  if (typeof node !== "object" || node === null) return false
+  const typed = node as { type: string; value?: unknown }
+  if (typed.type === "NumericLiteral" && typeof typed.value === "number") {
+    return !VALID_GAP_VALUES.has(typed.value)
+  }
+  if (typed.type === "StringLiteral") return true
+  return typed.type === "JSXElement" || typed.type === "JSXFragment"
+}
+
 function resolveSpacingValue(attribute: JSXAttribute): number | null {
   const value = attribute.value
   if (
@@ -19,24 +32,29 @@ function resolveSpacingValue(attribute: JSXAttribute): number | null {
   return null
 }
 
+function isAlreadyValidTernary(attribute: JSXAttribute): boolean {
+  const value = attribute.value
+  if (value?.type !== "JSXExpressionContainer") return false
+  const expr = value.expression
+  if (expr.type !== "ConditionalExpression") return false
+  return (
+    !isKnownInvalidBranch(expr.consequent) &&
+    !isKnownInvalidBranch(expr.alternate)
+  )
+}
+
 const transform: Transform = attributeTransformFactory({
   condition: hasAttribute("spacing"),
   targetComponent: "StackView",
   targetPackage: "@planningcenter/tapestry-react",
-  transform: (element, { j, source }) => {
+  transform: (element, { j }) => {
     const spacingAttribute = getAttribute({ element, name: "spacing" })
     if (!spacingAttribute) return false
 
     const spacingValue = resolveSpacingValue(spacingAttribute)
 
-    if (spacingValue === null) {
-      addComment({
-        element,
-        j,
-        scope: "spacing",
-        source,
-        text: "could not migrate spacing to gap automatically; use a Tapestry spacing scale number (0, 0.25, 0.5, 1, 1.5, 2, 3, 4, 5, 6, 7) for gap, or for ReactNode spacers add explicit margin to the spacer element instead",
-      })
+    if (spacingValue === null && !isAlreadyValidTernary(spacingAttribute)) {
+      addCommentToAttribute({ attribute: spacingAttribute, j, text: TODO_TEXT })
       return true
     }